Всем привет.

На днях столкнулся с задачей, что при отправке формы с типом multipart/form-data нужно было добавить отдельные заголовки для каждого файла из формы. Задача немного нестандартная и как средствами клиентского JS ее решить не сразу понятно.
В rtk-query и axios такой конфигурации не нашел, как и в клиентском FormData. В интернете гуглится мало инфы и часто встречается решение с использованием пакета form-data (но он для node).

Глядя в Network, видно, что браузер сам добавляет Content-Disposition и Content-Type. В спецификации же к http написано, что можно добавлять отдельные заголовки для полей.

В итоге выход один - генерить руками тело запроса и преобразовывать его в Blob.
Генерим заголовки как текст, добавляем 2 пустые сроки, преобразуем в blob и добавляем в массив. Затем преобразуем файл в blob и добавляем в массив. И так со всеми файлами. Не забываем разделить поля при помощь boundery типа ----WebKitFormBoundary{random_string}

Из всех блобов делаем один общий

new Blob(blobs, {
    type: `multipart/form-data; boundary=${boundary}`,
  });

И отправляем нахуй
Спасибо чатгпт за алгоритм (я бы охерел это руками писать).

Chrome кстати говорит, что это пустая FormData, но бекенд успешно сохраняет файлы из запроса.