File Select box pops up repeatedly

[John]

When my users select a file to upload, the File Select box closes then immediately re-opens again for each previously selected file.  For example, if I select one file, it works fine.  When a second file is selected, the file select box closes, but then opens again with the name of the first file selected.  If I select a third file, the File Select box opens twice more, once for each of the previously selected files.

In my implementation, I display the selected files myself and then trigger the upload after the files are selected.  The upload of the selected files works fine.  Any ideas??

My RadAsyncUpload control is defined this way:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" style="display:none;" MultipleFileSelection="Disabled" Skin="Silk" TargetFolder="uploads" HideFileInput="true" ManualUpload="true" EnableInlineProgress="false" OnClientFileSelected="RadUpload_OnClientFileSelected" OnClientFilesUploaded="RadUpload_OnClientFilesUploaded" OnClientFileUploaded="RadUpload_OnClientSingleFileUploaded" OnClientFileUploading ="RadUpload_OnClientFileUploading" OnClientFileUploadFailed="RadUpload_OnUploadFailed" OnClientValidationFailed ="RadUpload_OnClientValidationFailed" UploadedFilesRendering="BelowFileInput" HttpHandlerUrl="~/Handler.ashx" DisablePlugins="true" OnClientFileUploadRemoving="RadUpload_FileRemoving">

I start the selection by clicking a button which calls this javascript function:

function RadUpload_StartSelection(sender, args) {

   $telerik.$(".ruFileInput").click();

}

function RadUpload_OnClientFileSelected(sender, args) {

//fired for each file that was selected. We add the file to our list

//with a "[X]" link to remove it (which calls RadUpload_removeFile)

$telerik.$(args.get_row()).addClass("ruUploading"); //adding this css class to the row prevents it from displaying under the control

//now add the filename and [X] anchor to our file list

var $List = $("#divFileList");

if ($List.html().length>0) $List.html($List.html()+" + ");

$List.html($List.html()+args.get_fileName()+" <a href='#' id='" + args.get_row()._mapIndex + "' onclick='RadUpload_removeFile(this);return false;'>[X]</a>");

}

 

 

 

[John]

Note that this only happens when the ManualUpload property is set to true (I need to defer the upload until I trigger the startUpload() event).

[Ivan Danchev]

Hello,

I am afraid I was not able to reproduce the issue with the provided code and the file selection was working correctly at my side. I am attaching a sample runnable web site based on your code. Please try to reproduce the issue in it and post your modifications, so we can further test your scenario and try to determine the cause for the observed behavior.

Regards,
Ivan Danchev
Telerik

[John]

Thank you for your help Ivan.  I can make your project duplicate my problem by simply adding a separate button to trigger the select (instead of using the button created by the control).  Add this:

<input type="button" id="btnSelectFiles" value="Click to Select Files" onclick="RadUpload_StartSelection();" />

Note1: the RadUpload_StartSelection() function used by this button is already on your ManualUpload.aspx page

Note2: I also hide the RadAsyncUpload control by adding Style="display:none;" to the control, but this is not necessary to duplicate the problem.

Click the new button to trigger the File Select -- it will work fine for the first file but will display the file-select box twice for the second file and three times for a third, etc.

 

Many thanks for your help!

 

 

 

[Ivan Danchev]

Hello,

Thank you for the provided additional information, it helped reproduce the issue with the consecutive opening dialog windows. We will need more time to analyze this behavior and determine what causes it. I will get back to you as soon as we have any result.

Regards,
Ivan Danchev
Telerik

[Ivan Danchev]

Hello,

After further analysis of your scenario we found out that the cause for the observed behavior is calling click() on multiple input elements. When a file is selected an input element with class "ruFileInput" is rendered and with multiple files selected the input elements' count increases accordingly. So in order to prevent multiple click events from firing your code can be modified as shown below, which will ensure that only the first element will be clicked:

function RadUpload_StartSelection() {
    $telerik.$(".ruFileInput").first().click();
}

Regards,
Ivan Danchev
Telerik