Как задать порядок загрузки файлов в input type="file" multiple?

Question

[Aodhan]

Имеется загрузчик файлов с предпросмотром и сортировкой файлов в поле предпросмотра путем изменения атрибута key. Но теперь мне нужно понять, как формой отправлять значения этого атрибута для каждого файла. Потому как порядок отображения этих файлов в дальнейшем будет зависеть от атрибута, его передача важна. Какие есть варианты на этот счет? Ну или куда копать хотябы?

$("#fileUpload").change(function() {
											handleFiles(this.files);
										});
										function handleFiles(files) {
											for (let i = 0; i < files.length; i++){
												const file = files[i];
												const img = document.createElement("img");
												let elements = [];
												img.classList.add("obj");
												img.id = i+1;
												img.file = file;
												$(img).attr('key', i+1);
												elements = '<li><span class="img-move">'+(i+1)+'</span><div class="img-wrapper draggable-element d-'+(i+1)+'"><span class="img-delete"><i class="fa fa-close "></i></span></div></li>';
												$('#images').append(elements);
												const reader = new FileReader();
												reader.onload = (function (aImg) {
													return function (e) {
														aImg.src = e.target.result;
													};
												})(img);
												$(`.img-wrapper.d-${i + 1}`).append(img);
												reader.readAsDataURL(file);
											}

										}

Пример исходного кода. Для лучшего понимания процесса.

Answer 1

[Алексей Николаев]

Берете все загруженные и отсортированные пользователем или автоматически картинки, и отправляете в json на сервер. Нативные контролы вам тут никак не помогут, нужно ручками сделать. При каждом handleFiles обновляйте массив с файлами, откуда будете брать, чтобы DOM не тормошить, при каждой сортировке тоже. В общем-то очень просто.

Answer 2

[Stalker_RED]

Атрибуты не передаются. Придется собрать их скриптом и передать в отдельном поле или полях.