Maintain order of selected files in FileUpload with AllowMultiple = true

Question

I have a <asp:FileUpload> with the AllowMultiple property set to true:

 <asp:fileupload id="FileUpload" runat="server" allowmultiple="true" cssclass="fileUpload btn btn-sm btn-default" onchange="preloadImages()" /> <div class="field col-md-2 col-md-offset-1 immScarpePreview MainPreviewBox"> <asp:image id="Image1" runat="server" visible="false" cssclass="img-responsive" /> <asp:button id="ImmButton" runat="server" text="Upload" onclick="ImmButton_Click" cssclass="hidden" /> </div> 

In my JavaScript function, I simulate a click on an invisible button:

 <script> function preloadImages() { $('#<%=ImmButton.ClientID%>').trigger('click'); } </script> 

In the code, I save the files to a temporary folder, and I show the downloaded images in the <asp:Image> controls:

  protected void ImmButton_Click(object sender, EventArgs e) { if (FileUpload.HasFile) { try { int cont = 0; byte[] fileData = null; foreach (HttpPostedFile file in FileUpload.PostedFiles) { if (cont == 0) { using (var binaryReader = new BinaryReader(file.InputStream)) fileData = binaryReader.ReadBytes(file.ContentLength); File.WriteAllBytes(Server.MapPath("immScarpe/tmp/" + file.FileName), fileData); setImage1("immScarpe/tmp/" + file.FileName); } else if (cont == 1) { using (var binaryReader = new BinaryReader(file.InputStream)) fileData = binaryReader.ReadBytes(file.ContentLength); File.WriteAllBytes(Server.MapPath("immScarpe/tmp/" + file.FileName), fileData); setImage2("immScarpe/tmp/" + file.FileName); } else if (cont == 2) //and so on... //so on... cont++; } } catch(Exception ex) { //error writing file Console.Write(ex.Message); } } } private void setImage1(string image) //all equals for all the 5 images { Image1.ImageUrl = image; Image1.Visible = true; } 

This works fine, but I need help. When I go through FileUpload.PostedFiles, the order of the selected images is in alphabetical order, I think. I would like to keep the user selection order. Is it possible?

Answer 1

I have bad news, at least if you are using Windows.

I tested your code with Chrome, Edge, Firefox, and Internet Explorer on Windows 10, and I checked HTTP POST requests with Telerik Fiddler. I have the same results in all browsers:

• The order of the files in the FileUpload.PostedFiles collection is the same as in the HTTP request; ASP.NET does not sort files in a collection.
• The order of the files in the HTTP request is the same as in the upload control; The browser does not sort the files in the HTTP request. (To view the files in the upload control, I turned off the preloadImages function.)
• The order of the files in the download control (and also on the client side files ) is not necessarily the same as in the File name field in the Windows file selection dialog box:
  • If I manually type the file names out of order, then the download control lists the files in the order in which I printed them, and the FileUpload.PostedFiles collection supports this order.
  • However, if I select files out of order by pressing Ctrl +, the download control displays the files in alphabetical order, as does the FileUpload.PostedFiles collection.

In this latter case, I assume that Windows sorts the files before sending them to the browser. If this is true, then the browser will never get the original user selection order, and therefore you cannot maintain order, even with JavaScript.

If you absolutely need to maintain the order of multiple uploaded files, you probably need several <asp:FileUpload> , each with AllowMultiple="False" .