Send image via post

Question

On facebook, I seem that when selecting an image to put in the post, they sent a request by the POST method to a URL there (which should handle the upload..)

But what struck me is that the content of the post looked like this:

-----------------------------24055831728377 Content-Disposition: form-data; name="fb_dtsg" AQF_UrnMtkOL 
-----------------------------24055831728377 Content-Disposition: form-data; name="source" 8 
-----------------------------24055831728377 Content-Disposition: form-data; name="profile_id"..............

...

ÿØÿà�JFIF��`�`��ÿî�Adobe�d����ÿá]Exif��MM�*����2�������b;�������vGF�������GI�����?����������ê�������i�������}���ç2009:03:12 13:46:42�Corbis���������¿�������Ó����54������54��ê���´��������2008:03:14 13:59:26�2008:03:14 13:59:26���������������)������1������9�������������H������H���ÿØÿà�JFIF������ÿÛ�C� ...

..

and ended with:

-----------------------------24055831728377 Content-Disposition: form-data; name="upload_id" 1024 
-----------------------------24055831728377--

The strange characters there would be what, the code of the image? I’ve never seen this to send by POST an image, how does it work?

Answer 1

When sending a file to the server it is necessary to use an encoding that allows sending binary data along with form data.

Normally a POST without files in the form has a body with the following format:

campo1=1234&campo2=Miguel&campo3=30

This format is identical to the query-string format in the URI.

Note that it would not be possible to send a binary file of this format unless it was transformed into some text format, such as base-64. But this is not the case as base-64 or any other text encoding would undoubtedly increase the size of the request.

For this there is an encoding format that allows the sending of binary data: multipart/form-data.

Coding multipart/form-data

This encoding allows to transmit to the server the files in binary format. It is defined in the protocol HTTP 1.1 section 3.7.2 Multipart Types (rfc1867).

The encoding format consists of generating random separators, and separating each form field with this separator.

See an example of POST using this encoding: (example of this site)

POST /diretorio/arquivo HTTP/1.0
Host: www.dominio.com.br
Content-type: multipart/form-data, boundary=AaB03x
Content-Length: 381

--AaB03x
content-disposition: form-data; name="campo1"

1234
--AaB03x
content-disposition: form-data; name="campo2"

Miguel
--AaB03x
content-disposition: form-data; name="arquivo1"; filename="minha-foto.jpg"
Content-Type: image/jpeg
Content-Transfer-Encoding: binary

ÿØÿà�JFIF��`�`��ÿî�Adobe�d����ÿá]Exif��MM�*����2�������b;�������vGF�������GI�����?������
--AaB03x--

Some rules for content formation:

1. Header Content-type: must be multipart/form-data; boundary=$divisor-aleatorio replacing the random splitter with something really random and with almost 0 chance of repeating itself in the contents of the binary file or in any field sent.

2. Header Content-Length: must have the size of the request, counting from the first divisor (in the previous example is--AaB03x), to the last character of the terminator (``-Aab03x--)

3. For each field or file:

   1. add the splitter
   2. add division headers:
      • content-disposition: form-data
      • name="nome-do-campo-no-html"
      • if it’s file:
        • filename="nome-do-arquivo-sendo-enviado": only if it is file
        • Content-Type: image/jpeg: mime type of file
        • Content-Transfer-Encoding: binary
      • skip a line, and then send the data
      • as soon as it is over there comes another splitter from the next field or the terminator
   3. add terminator

Submitting form with multipart/form-data

In HTML, to indicate that you want to use encoding multipart/form-data, just include in the tag form the attribute enctype="multipart/form-data"

Tag documentation form on MDN

According to MDN documentation, this is necessary when using a input with type="file".