How to correctly compose the request body with multipart / form-data?

Question

AJAX

I want to manually send a file, an example of a request body part:

Content-Disposition: form-data; name="myfile"; filename="pic.jpg"
Content-Type: image/jpeg
(пустая строка)
содержимое файла

Instead of the contents of the file, I tried to substitute the output from both reader.readAsText and reader.readAsBinaryString , but alas, in both cases I get a broken file on the server side. What is this mysterious content of the file about which the documentation does not say a word? In what encoding should I substitute the file, even if the binary string does not fit?

Answer 1

https://learn.javascript.ru/formdata
or do you want it manually? Then the easiest option is through the blob constructor

const body = new Blob(['some text', file, 'some text 2', ...]);

This thing just takes and concatenates everything into one blob, which you just send to fetch. In this case, the lines are automatically encoded in utf8, and the files simply copy their bytes. Here strings are form text values, delimiters and other service crap, but files are files that don't even need to be read by a FileReader.

Answer 2

Here's an option right out of the box

const formData = new FormData();
formData.append('file', document.querySelector('input[type=file]').files[0]);

fetch('http:google.com', {
        body:formData,
        'POST',
    });

on the PHP side it is accepted as $_FILES