This is a migrated thread and some comments may be shown as answers.

Input disappears after cancelling and removing in progress upload

5 Answers 134 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 26 Jun 2013, 02:36 PM
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.

5 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 01 Jul 2013, 01:00 PM
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.
0
Ian
Top achievements
Rank 1
answered on 01 Jul 2013, 01:30 PM
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.
0
Hristo Valyavicharski
Telerik team
answered on 04 Jul 2013, 02:24 PM
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.
0
Ian
Top achievements
Rank 1
answered on 04 Jul 2013, 05:20 PM
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.


0
Ian
Top achievements
Rank 1
answered on 08 Jul 2013, 09:04 PM
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();
    }
}
Tags
AsyncUpload
Asked by
Ian
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Ian
Top achievements
Rank 1
Share this question
or