Input disappears after cancelling and removing in progress upload

[Ian]

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.

[Hristo Valyavicharski]

Hi Ian,

To display the disappeared input handle OnClientFileUploadRemoved and add it manually:

function OnClientFileUploadRemoved(sender, args) {
                sender.addFileInput();
            }

Regards,
Hristo Valyavicharski
Telerik

[Ian]

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.

[Hristo Valyavicharski]

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

[Ian]

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.

[Ian]

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();
    }
}

[Disposable Hero]

I wanted to thank you for this example. I discovered that args.set_cancel(true); is responsible for hiding the input button which I did not want. Thanks to your example I was able to re-display the hidden input button. Cheers...

 

            function OnClientFileUploading(sender, args) {
                var numberOfUploadedFiles = sender.getUploadedFiles().length;
                if (numberOfUploadedFiles >= 10) {
                    args.set_cancel(true); //This stops any further uploads and events...but it also hides the input button which I don't want
  
                    //re-display the "Browse File" button and remove the z-index:-1
                    var uploadRows = $("span.ruFileWrap > input.ruFakeInput").length;
                    if (uploadRows < 1) {
                        sender.addFileInput();
                    }
                    var button = $("span.ruFileWrap").find("input.ruFakeInput");
                    button.removeAttr('style');
                } 

            }