Как в javascript перемещать элементы массива в FileList?

Question

При загрузке на сайт фотографий эти фото отображаются в галереи. В галереи есть возможность перемещать фотки. Как сделать так, чтоб при перемещении фотки в списке эта же фотка меняла свое местоположение в списке массива, т.к. в базу данных фото сохраняются в такой последовательности, как они расположены в массива FileList`a.

let arrPhotoList = document.getElementById('uploadgallery').files;

let oldElPhoto = arrPhotoList[evt.oldIndex];
arrPhotoList[evt.oldIndex] = arrPhotoList[evt.newIndex];
arrPhotoList[evt.newIndex] = oldElPhoto;

Пробовал сделать таким методом, но FileList не позволяет перезаписывать элементы списка таким образом. Если вдруг в FileList'е нельзя делать такие манипуляции, тогда как можно отфильтровать массив файлов и записать его в <input type="file" name="gallery[]" class="hidden" id="uploadgallery" accept="image/*" multiple>

Answer 1

Создаем пустой массив: var arr = [];

Сохраняем все загруженные фото в созданный массив arr.

let files = document.getElementById('uploadgallery').files;
for(let i = 0; i < files.length; i++){
    if (!files[i].type.match('image.*')) {
        files.splice(i, 1);
    } else {
        arr.push(files[i]);
    }
}

Перемещаем фото(элементы массива arr) в нужном нам порядке:

arr.splice(from, 1, arr.splice(to, 1, arr[from])[0]);

Покуем данные в FormData и отправляем их на сервер, например через ajax:

let fd = new FormData(this);
if(arr.length > 0) {
    for (var i = 0; i < arr.length; i++) {
        fd.append('gallery[]', arr[i]);
    }
}

P.s. спасибо за подсказку.

Можно создать свой массив на основе FileList, сделать необходимые манипуляции, сохранить с помощью FormData. – Stepan Kasyanenko

БЛОГ НА HUSL

Как в javascript перемещать элементы массива в FileList?

Ответы (1 шт):