Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change order of files in multiple file input?

The files are ordered alphabetically by default; is there any way to upload them in the order they were chosen in the file picker instead?

I want to be able to select a primary file and then other extra files in the same input without having to submit more than one input/time.

like image 240
Phoexo Avatar asked Jul 23 '15 13:07

Phoexo


People also ask

How do you input multiple files?

Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting. Tip: For <input type="email"> : Separate each email with a comma, like: [email protected], [email protected], [email protected] in the email field.

How do you limit the maximum file selected when using multiple inputs?

Use two <input type=file> elements instead, without the multiple attribute. If the requirement is really just "have two different single inputs", then this is actually the best answer @Diego.

What is the easiest way to upload single or multiple files with FormData?

Uploading Multiple Files const uploadFile = (files) => { console. log("Uploading file..."); const API_ENDPOINT = "https://file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request. open("POST", API_ENDPOINT, true); request. onreadystatechange = () => { if (request.


1 Answers

The files are actually not ordered alphabetically. They are lined in the order of appearance in the file picker (at least that is how current Chrome and Firefox work on Windows 7). You simply had them sorted by name in the picker.

I don't think what you're asking is possible. You could either:

  • instruct the user to make sure the primary file is always first in the list (however, I believe there is no guarantee of the order by browsers).
  • create a separate input element for the primary file.
  • (recommended) display the file names (and/or content) and allow the user to select the file he wishes to be primary. Store that information in some hidden field with JavaScript.
like image 146
pishpish Avatar answered Nov 15 '22 11:11

pishpish