How to post an image with form-data in Rest Client for VSCode

Question

The documentation for the VSCode Rest Client is lacking good explinations. Here is what they give as an example.

POST https://api.example.com/user/upload
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="image"; filename="1.png"
Content-Type: image/png

< ./1.png
------WebKitFormBoundary7MA4YWxkTrZu0gW--

Not sure what the < is for nor the title?

Assurbanipal

Answer 1

For the boundary part, I recomend read this post.

< It´s a symbol to indicate input stream, the file you want to send needs to be in the same directory as the .rest file that the restclient extension uses.

Quick response: boundary is to define where each pair of fields passed in the form is begins and ends. In your example there are two form fields, text="title" and image=1.png the bytes image sequence.

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="image"; filename="1.png"
Content-Type: image/png

< ./1.png
------WebKitFormBoundary7MA4YWxkTrZu0gW--

Other data such as filename="1.png" or Content-Type: image/png indicate additional information that the form loads by default when you select an image with a file type input.

Another example for a field description.

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="description"

All text of description.
------WebKitFormBoundary7MA4YWxkTrZu0gW

Erlina

Answer 2

this 👇 "Rest Client" snippet works for me (solution from here).

*Note the boundry=MfnBoundry does not use a delimiter, while --MfnBoundry is used to open it, and --MfnBoundry-- is used to close it.

POST http://localhost:3000/api/upload HTTP/1.1
Content-Type: multipart/form-data; boundary=MfnBoundry

--MfnBoundry
Content-Disposition: form-data; name="files"; filename="test.txt"
Content-Type: text/plain

< ./test.txt
--MfnBoundry--

Sylvestersylvia