Client Side Validation Of File Size

[Craig]

I see your demo of the new AsyncUpload control claims:

RadAsyncUpload provides client-side event called OnClientValidationFailed. It is fired when the selected file has invalid extension or its size is higher than the MaxFileSize property.

The demo, however, is validating file size on the server. Is there still a problem with client-side filesize validation, or is the demo just not configured to use it?

Thanks,

Craig

[Yana]

Hi Craig,

Actually there is no problem with the method, just the demo doesn't use it.

Kind regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Craig]

Thanks Yana.

OK I'll try it. Is there an example or demo which does validate file size on the client? I'm asking because I haven't found a Telerik solution to this in the two years I've been using Telerik web controls and expect to end up in the same place with this control - and I can't afford much timeout right now, so it would be extremely helpful if an example of this exists.

Thanks.

[Yana]

Hi Craig,

Actually OnClientValidationFailed event is demonstrated in the online example here, please note "validationFailed" javascript method:

<script type="text/javascript">
        function validationFailed(sender, eventArgs) {
            $(".ErrorHolder").append("<p>Validation failed for '" + eventArgs.get_fileName() + "'.</p>").fadeIn("slow");
        }
</script>

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Craig]

Thanks, but this is the demo that led to this thread. The problem I have, and have had for two years, is that the file size is not validated on the client. It is uploaded to the server and then, after it is uploaded, the client is notified that their file is too large to upload. This is a continual source of embarrassment to me because my clients are uploading very large files which can take a long time and all I can do is put a text warning statically on the page which users who are in a hurry don't read anyway. It is all the more painful for these users to be told 20 minutes or more later that their file is too big when they've been watching it's progress bar for what seems like forever.

Am I right in thinking that there is still no solution to this problem?

Craig

[Genady Sergeev]

Hi Craig,

Unfortunately you are right, at the moment there is no workaround for this problem. However, we are working on overcoming it. I cannot arrange with exact release date, but it is likely that we will have a working solution for this annoying problem for Q1 Service Pack 1 which is scheduled for the middle of April.
 Please excuse us for the caused inconveniences.

Kind regards,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Craig]

Thanks for the information. I will eagerly await SP1.

[CS]

Hello,

Was a solution for this implemented in the Q1 2010 Service Pack 1 that was released on April 15th?  It does not appear to be.  If not, do you know when we can expect to see a solution?  This is a big problem for me as well which is causing me to look at other controls for a solution.  I've seen other ASP.Net upload controls that can validate the file size without having to upload the entire file, as well as other websites that can do it such as Gmail, so why can't Telerik?

Thanks,
CS

[Dimitar Milushev]

Hi CS,

Client-side file size validation requires the upload to work through a browser plugin (usually Flash) since browsers do not provide the necessary API to check the file size using only Javascript. Since changing the mechanism used by RadAsyncUpload to upload files is a major change, we decided that Flash-based uploading should be released with the Q2 2010 release so we could devote more time to QA and testing.

I hope you can understand the motivation behind this decision and please excuse us for misleading you.

Best wishes,
Dimitar Milushev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[CS]

Thank you, I do appreciate your reply.

CS

[Stew urbach]

1. I see that the ajax async upload doesnt do that but does your silverlight version do that? 
2. if so does it also store the file in a temp folder like the ajax one does? i need to save to a DB and dont want to store on file system, even temporarily.

3.also, my OnClientValidationFailed never fires for going over max size, but my OnClientFileUploadFailed does. it only fires when the extension is wrong.

4. is there a way to show the upload progress on the async control, currently it looks like it doesnt have that

i am using the async upload control.

5. Also, looking at the source code in AsyncUploadedFile:

 

public override Stream InputStream{ 

 get  { return File.OpenRead(TempFilePath);  }
}
I am wondering, does this stream get closed somewhere? i can't find where it gets closed

 

 

 

6. When the files are uploaded they are stored in the temporary location and file details stored in Cache.
     a. In a web farm i dont see the point of saving to cache, can i disable this?
     b. After uploading my files (after full postback) the cache and files in temp directory are still persisting. It is taking 30 or more minutes to clear out. i havent changed the default expiration of 4 hrs. what is going on here?

7. I have noticed using IE 8 that after uploading a file before the full postback and then clicking 'remove' and then browse again for a file, the windows desktop is blank along with any shared folders. This only happens sometime and cant be recreated everytime. Is this a known problem with IE 8 or is it possible that its something to do with the asyncUpload control?

thanks!!

[Genady Sergeev]

Hi Stew urbach,

1) Yes, the Silverlight upload supports size validation on the client. The good news are that forth from the next release RadAsyncUpload would support that as well.

2) RadAsyncUpload currently does not support this functionality. Again Q2 will resolve this issue. We will also provide demo that shows how to save uploaded file directly into a database, without managing temp files.

3) We agree that this behavior is somewhat confusing.  Q2 will resolve the problem.

4) RadProgressArea can be used with RadAsyncUpload in pretty much the same way as with RadUpload. I suggest that you take a look at the following demo.

5) Since this is a public property it is up to the developer to close the stream. We don't hold open reference for the stream. A stream is opened and a reference is passed when the property is accessed and it is up to the programmer to use and the close it.

6) We are using the .NET Cache Dependency functionality to delete the files. However, if you have TargetFolder set on your AsyncUpload the things wont get to the cache at all. As soon as the page is submitted the file is saved an the temp file is deleted manually.

However, if for some reason the temp file was not deleted (for example if the user has closed the browser) the Cache Dependency kicks off. By default, after 4 hours it will delete the temp files. However, if for some reason IIS was shut down earlier or the application pool was reset the files are going to be deleted when that event happen. I suppose that this is happening in your case. Do you have TargetFolder
set on the async upload?

7) RadAsyncUpload has absolutely not control over the open file dialog. I haven't heard of such problem, however I suppose that is is an issue with IE8. You can easy verify if this is the case if the issue is reproduced with the standard ASP.NET Upload.

Regards,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Edward Pearson]

Is there a way to disable Flash for RadAsyncUpload?  I tried setting the 'MultipleFileSelection=Disabled', but I still see that RadAsyncUpload is a Flash object in my browser.  I like this feature, but unfortunately we have this "No Flash Allowed" policy here.

[T. Tsonev]

Hello Edward,

Our assumption is that customers that have such "No Flash" policy will not have the Flash plug-in installed at all. Otherwise you're still open to any potential vulnerabilities in the plug-in.

Anyway, there's a way to forcefully disable the flash support. Add this script after the ScriptManager on the page:

<script type="text/javascript">

RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; }

</script>

I hope this helps.

Sincerely yours,
Tsvetomir Tsonev
the Telerik team

[Atif]

Dear i read all the discussion but i can't find the solution.i am using first time telerik rad grid and facing issue related to upload file size exceed. Please tel me how to handle this issue on client side.tel me with code.
 

[Sebastian]

Hi Atif,

I think that you can use the following online example as starting point for your implementation and configure the RadAsyncUpload instance inside the edit template in par with your preferences (setting max file size, allowed extensions, etc.). You can couple that with client validation is needed.

Best regards,
Sebastian
the Telerik team

[Andy Huhn]

Hello,

I added

  RadAsyncUpload.Modules.Flash.isAvailable = function() { return false; }

to an already existing script block inside an already existing RadCodeBlock in my page...I now get the error, "RadAsyncUpload is undefined".  Help?

Thank you,
Andy

[Genady Sergeev]

Hi Andy Huhn,

Please make sure that you add the mentioned code after the ScriptManager declaration. i.e. after the RadAsyncUpload scripts were linked to the page. The workaround may not work If you place it above, in the heading section for example.

Greetings,
Genady Sergeev
the Telerik team

[Andy]

Hi Genady,

The snippet is indeed after the RadScriptManager.  The Script Manager is on the master page, immediately inside the form definition, before the ContentPlaceHolder.  The page (not the master page) contains a user control on it.  The user control contains the RadAsyncUpload, as well as this snippet of code.

Here is the .ascx of the user control:

<%@ Control Language="C#" AutoEventWireup="true" Codebehind="AsyncUploader.ascx.cs" Inherits="Elanco.Shuttle.Shell.Views.AsyncUploader" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function SetControlEnablement(enabled) {
                var warningControl = $get("<%= UploadWarning.ClientID %>");
                if (enabled) {
                    warningControl.style.setAttribute("display", "none");
                }
                else {
                    warningControl.style.setAttribute("display", "");
                }
            }

            function ClientFileUploading(sender, e) {
                SetControlEnablement(false);
            }

            function ClientFileUploaded(sender, e) {
                var fileCountLabel = $get("<%= FileCountLabel.ClientID %>");
                fileCountLabel.innerHTML = parseInt(fileCountLabel.innerHTML) + 1;
                var valueSoFar = parseInt(fileCountLabel.innerHTML);
                var ul = $find("<%= RadUpload1.ClientID %>");
                var fileInputs = ul.getFileInputs();
                var pArea = $find("<%= ProgressArea1.ClientID %>");
                var toCompare = ul._currentIndex - 1;
                if (valueSoFar >= toCompare) {
                    $get("<%= SubmitButton.ClientID %>").click();
                    SetControlEnablement(true);
                }
            }

            RadAsyncUpload.Modules.Flash.isAvailable = function() { return false; }
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />

    <table>
        <tr>
            <td><asp:Label runat="server" ID="PromptLabel" ForeColor="Red" Font-Bold="true"></asp:Label></td>
        </tr>
        <tr>
            <td>
                <asp:Label runat="server" ID="UploadWarning" Font-Bold="true" ForeColor="Red" style="display:none">Please do not refresh the page or interrupt the upload</asp:Label>
                <asp:Label runat="server" ID="FileCountLabel" style="visibility:hidden" text="0"/>
            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadAsyncUpload ID="RadUpload1" runat="server"
                    ControlObjectsVisibility="RemoveButtons" ReadOnlyFileInputs="true"
                    Skin="Vista" TemporaryFolder="~/UploadFilesWorking" TargetFolder="~/UploadFiles"
                    MultipleFileSelection="Automatic" OnClientFileUploaded="ClientFileUploaded"
                    OnClientFileUploading="ClientFileUploading">
                </telerik:RadAsyncUpload>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button runat="server" ID="SubmitButton" Text="Upload files"
                    onclick="SubmitButton_Click" style="visibility:hidden" />
            </td>
        </tr>
        <tr>
            <telerik:RadProgressArea runat="server" ID="ProgressArea1" Skin="Vista">
                <Localization Uploaded="Uploaded" />
            </telerik:RadProgressArea>
        </tr>
    </table>

Here is the code behind for the user control:

public partial class AsyncUploader : Microsoft.Practices.CompositeWeb.Web.UI.UserControl, IAsyncUploaderView
{
    #region Private Properties

    private AsyncUploaderPresenter _presenter;

    private IFileService _fileServiceInstance;

    private PacketEntity _packet;

    #endregion

    #region Events

    private UploadedEventHandler uploaded;

    public event UploadedEventHandler Uploaded
    {
        add
        {
            uploaded += value;
        }
        remove
        {
            uploaded -= value;
        }
    }

    protected void OnUploaded(object sender, UploadedEventArgs e)
    {
        if (uploaded != null)
            uploaded(sender, e);
    }

    private EventHandler<EventArgs> packetNeeded;

    public event EventHandler<EventArgs> PacketNeeded
    {
        add
        {
            packetNeeded += value;
        }
        remove
        {
            packetNeeded -= value;
        }
    }

    protected void OnPacketNeeded(object sender, EventArgs e)
    {
        if (packetNeeded != null)
            packetNeeded(sender, e);
    }

    #endregion

    #region Public Properties

    public bool VisibleCustom
    {
        get {
            return (RadUpload1.Visible);
        }
        set {
            RadUpload1.Visible = value;
            PromptLabel.Visible = value;
        }
    }

    public int DocumentTypeId
    {
        get
        {
            if (ViewState["DocumentTypeId"] == null)
                return (-1);

            return ((int)ViewState["DocumentTypeId"]);
        }
        set { ViewState["DocumentTypeId"] = value; }
    }

    public PacketEntity Packet
    {
        get
        {
            if (_packet == null)
                OnPacketNeeded(this, new EventArgs());

            return (_packet);
        }
        set { _packet = value; }
    }

    public string PromptText
    {
        get { return (PromptLabel.Text); }
        set { PromptLabel.Text = value; }
    }

    [ServiceDependency]
    public IFileService FileServiceInstance
    {
        get
        {
            return (_fileServiceInstance);
        }
        set
        {
            _fileServiceInstance = value;
        }
    }

    public List<int> AddedFiles
    {
        get
        {
            if (Presenter.Controller.State.ServerSideViewState["AddedFiles"] == null)
                Presenter.Controller.State.ServerSideViewState["AddedFiles"] = new List<int>();

            return ((List<int>)Presenter.Controller.State.ServerSideViewState["AddedFiles"]);
        }
        set
        {
            Presenter.Controller.State.ServerSideViewState["AddedFiles"] = value;
        }
    }

    #endregion

    #region Event Handlers

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this._presenter.OnViewInitialized();
        }
        this._presenter.OnViewLoaded();
    }

    protected void SubmitButton_Click(object sender, EventArgs e)
    {
        // Step 1: add the new files to the file share and the ShuttleFile tables via the FileService.
        int uniquenessIndex = 0;
        FileServiceTransactionManager txnMgr = new FileServiceTransactionManager(FileServiceInstance);

        try
        {
            foreach (UploadedFile f in RadUpload1.UploadedFiles)
            {

                var newFile = FileServiceInstance.AddFileToRepository(
                    Server.MapPath("~/UploadFiles"),
                    f.GetName(),
                    DD.GetRepository(DD.Strings.ApplicationNames.EApproval + "." + DD.Strings.RepositoryCodeForEApprovalMain),
                    ref uniquenessIndex,
                    new SecurityUserCollection(),
                    new SecurityUserCollection(),
                    new SecurityUserEntity(),
                    txnMgr);

                AddedFiles.Add(newFile.ShuttleFileId);
            }

            txnMgr.Commit();

        } catch (Exception ex)
        {

            if (txnMgr != null)
                txnMgr.Rollback();

            throw ( new Exception( "Unable to upload new documents.", ex ) );

        }

        // Part 2: add the new files to the packet
        foreach (int f in AddedFiles)
        {
            PacketDocumentEntity newPD = new PacketDocumentEntity();
            newPD.ShuttleFileId = Convert.ToInt32(f);
            ShuttleFileEntity newFile = new ShuttleFileEntity(newPD.ShuttleFileId);
            newPD.Description = newFile.FileName;
            newPD.DocumentTypeId = DocumentTypeId;
            Packet.PacketDocument.Add(newPD);
        }

        // Part 3: Hide the uploader
        VisibleCustom = false;

        // Part 4: Cascade the event to event handlers registered by the client page
        List<int> addedFilesToSend = new List<int>();
        addedFilesToSend.AddRange(AddedFiles);

        UploadedEventArgs argsToSend = new UploadedEventArgs(this, addedFilesToSend, DocumentTypeId);
        OnUploaded(this, argsToSend);
        AddedFiles = null;

    }

    #endregion

    #region WCSF Stuff

    [CreateNew]
    public AsyncUploaderPresenter Presenter
    {
        get
        {
            return this._presenter;
        }
        set
        {
            if (value == null)
                throw new ArgumentNullException("value");

            this._presenter = value;
            this._presenter.View = this;
        }
    }

    #endregion
}

Any help is appreciated.

[Andy]

I should also have mentioned that we're using this version of Telerik:

2010.2.826.35

Thanks,
Andy

[Genady Sergeev]

Hello Andy,

Pardon me, I've failed to see an syntax error in the code that you have used. This is your code:

RadAsyncUpload.Modules.Flash.isAvailable = function() { return false; }

However, it should look like this:

Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function() { return false; }

Sincerely yours,
Genady Sergeev
the Telerik team

[Andy]

Hi Genady,

Here is the full code block I'm using:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function SetControlEnablement(enabled) {
            var warningControl = $get("<%= UploadWarning.ClientID %>");
            if (enabled) {
                warningControl.style.setAttribute("display", "none");
            }
            else {
                warningControl.style.setAttribute("display", "");
            }
        }

        function ClientFileUploading(sender, e) {
            SetControlEnablement(false);
        }

        function ClientFileUploaded(sender, e) {
            var fileCountLabel = $get("<%= FileCountLabel.ClientID %>");
            fileCountLabel.innerHTML = parseInt(fileCountLabel.innerHTML) + 1;
            var valueSoFar = parseInt(fileCountLabel.innerHTML);
            var ul = $find("<%= RadUpload1.ClientID %>");
            var fileInputs = ul.getFileInputs();
            var pArea = $find("<%= ProgressArea1.ClientID %>");
            var toCompare = ul._currentIndex - 1;
            if (valueSoFar >= toCompare) {
                $get("<%= SubmitButton.ClientID %>").click();
                SetControlEnablement(true);
            }
        }

        Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function() { return false; }
    </script>
</telerik:RadCodeBlock>

I'm still getting the error:

Microsoft JScript runtime error: 'Telerik.Web.UI.RadAsyncUpload.Modules' is null or not an object.

Help?  Or is there any other way (without modifying the client machine) to force the RadAsyncUpload control to behave as if Flash 10 isn't installed?

Thanks,
Andy

[Genady Sergeev]

Hi Andy,

I am still not able to reproduce the problem. I am attaching my sample project to this replay. Can you reproduce the error on it?

Kind regards,
Genady Sergeev
the Telerik team

[Andy]

I've found the issue.  I'll post the solution here for the benefit of anyone else who has the same issues.

I had set the Visible property for the RadAsyncUpload to false, to prevent it from displaying until the user clicked another button.  When I set the Visible property to false, Telerik.Web.UI.RadAsyncUpload.Modules was not defined.

To fix this, I am no longer setting the RadAsyncUpload's Visible property.  Instead, I am setting its visibility CSS Style property, like this:

RadUpload1.Style[ "visibility" ] = "hidden";

And to display the control, I use the following:

RadUpload1.Style[ "visibility" ] = "visible";

This took care of the issue.

[Ravish]

Hello Telerik Team,

I am using RadAsyncUpload and its not firing  Event OnClientValidationFailed on client for file size. I saw that it works in the demo provided on your site but doesnot work in actual scenario. Can you please suggest workaround for it.

Thanks,
Ravish

[Peter Filipov]

Hi Ravish,

I am sending you a sample project that is working. I set up MaxFileSize property to "5" and if you try e.g. to upload 800kb file it should fire the OnClientValidationFailed event because the file is too big. Please review the code and change it to reproduce your issue and send it back.

Kind regards,
Peter Filipov
the Telerik team