Input disappears after cancelling and removing in progress upload

6 posts, 0 answers
  1. Ian
    Ian avatar
    5 posts
    Member since:
    Jun 2012

    Posted 26 Jun 2013 Link to this post

    I have an AsyncUpload control with the following settings:

    MaxFileInputsCount = 3
    InitialFileInputsCount = 1
    AutoAddFileInputs = True

    And the rest set to defaults.

    If I individually select and start uploading three large files so that they are all in progress, and then hit cancel and remove on one of the uploads before any of them have completed, I no longer get a file input row and am only able to upload two files now even if I remove the other uploads.

    If I wait until one of the uploads if finished, the input row will appear as expected.
  2.
  3. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 01 Jul 2013 Link to this post

    Hi Ian,

    To display the disappeared input handle OnClientFileUploadRemoved and add it manually:
    function OnClientFileUploadRemoved(sender, args) {
                    sender.addFileInput();
                }

    Regards,
    Hristo Valyavicharski
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Ian
    Ian avatar
    5 posts
    Member since:
    Jun 2012

    Posted 01 Jul 2013 Link to this post

    The problem I am having only occurs when all three rows are in progress, one is canceled and then removed BEFORE the other two are completed.

    I tried a solution like the one you gave originally, and it does solve the problem but if any of the uploads are complete when I remove a row, two file input boxes and browse buttons appear.
  7. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 04 Jul 2013 Link to this post

    Hi Ian,

    Actually  MaxFileInputsCount and  InitialFileInputsCount cannot work together with MultipleFileSelection. This is a limitation of RadAsyncUpload control. However you may check the number of selected files in OnClientFilesSelected event and prevent selecting of more than 3 files by canceling the event. Note that additional input field will be added. This is a development issue which was resolved and the fix for it will be included in the upcoming Service Pack. Until this happens you may use the suggested workaround:
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
        MultipleFileSelection="Automatic"
        OnClientFilesSelected="OnClientFilesSelected"
    </telerik:RadAsyncUpload>

    function OnClientFilesSelected(sender, args) {
        var totalCount = args.get_count();
        var successCount = $('.ruUploadProgress.ruUploadSuccess').length;
     
     
        if (totalCount > 3 || successCount + totalCount > 3) {
            args.set_cancel(true);
        }
    }
     
    //This fixes removes the additional input that was added.
    Telerik.Web.UI.RadAsyncUpload.prototype._onFilesSelected = function (row, filesSelected) {
        args = { count: filesSelected };
     
        var cancel = $.raiseCancellableControlEvent(this, "filesSelected", args),
            me = this,
            $row = $(row);
     
        if (cancel) {
            $row.data("cancel", true);
            setTimeout(function () {
                me.deleteFileInputAt($row.index(), true);
            }, 50);
        }
    }


    Regards,
    Hristo Valyavicharski
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. Ian
    Ian avatar
    5 posts
    Member since:
    Jun 2012

    Posted 04 Jul 2013 Link to this post

    My problem doesn't actually deal with MultipleFileSelection.  I am not setting that property on the control at all.

    I want a control to only display one input at a time, and only allow three total files.  Having to select one file at a time is fine, so I could set MultipleFileSelection to disabled.

    I am attaching a link to a video capture of the issue I am experiencing.

    In this video:
    • Attach three 50MB files and let them complete uploading. Notice that once the third file is selected, the input row disappears.
    • Remove all three files.  Notice that with each removal, a single input row is visible.
    • Attach three 50MB files again.
    • While all three files are uploading, cancel and remove two of them.  Notice that no input row is visible upon removal until removing the last file.
    • Repeat the process, cancel all three files.  Notice that there are now only two files allowed to be uploaded.  The third input row doesn't appear.
    • Repeat again, cancelling all files again.  Notice that there is now only one input row available.


  11. Ian
    Ian avatar
    5 posts
    Member since:
    Jun 2012

    Posted 08 Jul 2013 Link to this post

    I found a somewhat hackish workaround for this bug.

    Whenever a file is selected, it makes sure that it was NOT the 3rd row, and that there are no currently displayed input rows.  If this is the case, it adds an input row.
    Whenever a file is removed, it checks to see if there's a visible input row and if not, adds one.

    I added the following code to my OnClientFileSelected and OnClientFileUploadRemoved functions:

    function OnClientFileSelected(sender, args) {
        var uploadRows = $("span.ruFileWrap > input.ruFakeInput").length;
        if (uploadRows < 1 && args.get_rowIndex() < 2) {
            sender.addFileInput();
        }
    }
     
    function OnClientFileUploadRemoved(sender, args) {
        var uploadRows = $("span.ruFileWrap > input.ruFakeInput").length;
        if (uploadRows < 1) {
            sender.addFileInput();
        }
    }
Back to Top