Как отправить свой Blob объект посредством XMLHttpRequest?

Question

[Максим]

У меня есть задача:
Я хочу при multiple аттаче файлов в инпут, иметь возможность удалять некоторые файлы (которые допустим прикреплены ошибочно).
Но я знаю что объект FilesList это Blob object и он readonly.
В итоге можно только удалить все файлы, но один удалить нельзя.

Я могу создать свой Blob объект скопировав часть данных с FilesList, произвести с ним необходимые мне манипуляции и отправить его через XMLHttpRequest?

Answer 1

[Роман]

Как вариант, могу предложить следующее.
Пару дней назад отвечал на этот вопрос Как получить несколько файлов base64 string?
По сути там формируется массив с данными всех прикрепленных файлов. Применительно к вашей задаче можно например перед отправкой удалить часть элементов/файлов из данного массива и затем их отправить.
А для красоты можно еще и сделать табличный вывод прикрепленных файлов с кнопкой "удалить" для каждого.

Comments

[Максим]

Спасибо Роман! Пока еще не успел ознакомиться с вашей ссылкой. Но пока вопрос:
- Я могу создать свой Blob объект скопировав часть данных с FilesList, произвести с ним необходимые мне манипуляции и отправить его через XMLHttpRequest?
Благодарю за ответ!

[Роман]

Максим, конечно

Отправка бинарных данных

https://developer.mozilla.org/ru/docs/Web/API/XMLH...

The send method of the XMLHttpRequest has been extended to enable easy transmission of binary data by accepting an ArrayBuffer, Blob, or File object.

The following example sends creates a text file on-the-fly and uses the POST method to send the "file" to the server. This example uses plain text, but you can imagine the data being a binary file instead.

var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function (oEvent) {
  // Uploaded.
};

var blob = new Blob(['abc123'], {type: 'text/plain'});

oReq.send(blob);

единственное, что для отправки массива, получаемого в моем ответе вместо

var blob = new Blob(['abc123'], {type: 'text/plain'});

будет

const blob = new Blob([JSON.stringify(values)], {type : 'application/json'});

где values это и есть массив со всеми данными прикрепленных файлов

[Роман]

Максим, ну и вот еще почитайте

https://www.html5rocks.com/ru/tutorials/file/xhr2/

[Максим]

Роман, супер! Спасибо!

Почему задал этот вопрос, дело в том, что на этом же сайте нашел похожий вопрос пользователя "Как удалить один файл в multiple инпуте", ему несколько человек в один голос ответили, что это невозможно. Мол, удаляй все файлы или делай несколько инпутов =) Я конечно расстроился, но надежда умирала последней =)

[Роман]

Максим, из инпута не удалить, но зачем отправлять файлы именно из инпута, когда их из инпута можно вытянуть, сформировать свой массив с файлами, отфильтровать ненужные и в конечном итоге отправить сформированный массив блобиком (который правда на сервере надо будет разобрать на файлы))))

[Роман]

Максим, более того, при таком подходе можно дать пользователю возможность несколько раз выбрать разные файлы из разных папок прежде чем он отправит их на сервер

[Максим]

Роман, "Удалить из инпута", это просто дилетантская формулировка такая. Разумеется пользователю только и надо, как перерисовать страничку и чтобы на сервер отправились те файлы которые отражены как список прикрепленных =)

[Роман]

Максим, именно так