Send Image Files in an API POST request

API(Application Programming Interface), it technically refers to a robust set of procedures, tools, and protocols that permit the interaction between web applications. It is an intermediary that delivers a client’s request to the server and then returns a response to the client.

First we will look at what is MIME type❓️A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) is a standard that indicates the nature and format of a document, file, or assortment of bytes. The simplest MIME type consists of a type and a sub-type and An optional parameter can be added to provide additional details:(type/subtype;parameter=value)

There are two classes of type: discrete and multipart. Discrete types are types which represent a single file or medium, such as a single text or music file, or a single video. A multipart type is one which represents a document that’s comprised of multiple component parts.

• Discrete Types: application, audio, font, image,model, text, video etc
• Multipart types: Mainly 2 types as message(ex: message/partial),multipart(ex:multipart/form-data)

When we need to send an Image file to an API request there are many options. I will explain some of those methods to send an Image by using the postman.

Option 1: Direct File Upload , From this method you can select form-data and set the type to file. Then select an image file by clicking on the button shown in the value column.

The content type is automatically detect by postman but if you want you can set it with a relevant MIME type.(image/gif, image/jpg, image/png ..etc.)

Option 2: Send as a Base64 String, In this method you can send the base64 string as a JSON string with the requests. Base64 is a way to encode binary data into an ASCII character format by translating it into a radix-64 representation. I recommend you that never use Base64 for large file/data upload to server because it’s convert whole data and post it to server.

ex:

Option 3 : By using Multipart

How to send a post request if you have more than one file? How to send a very large file in a post request? The answer is using the multipart content-type.

Let’s look at how we can send image files by using multipart. Multipart is a way to upload file/data to server in the form of part which are in bytes. Multipart/form-data is applied to a form though, so you can send everything in a multi-part form, including “regular” data also.

If you need to send a JSON file containing meta data along with the image file you can use this method. In the case of sending large files you can divide the file into multiple parts and send it as below.

Ex: Here you can see how to send a jpeg file along with a plain text file. The content-type is stated as multipart/form-data and it’s boundary parameter is set to a value ‘Boundary_2_bHash_bTimestamp’. When sending the request this boundary value is added to the start of the full content, end of the full content and end of each part of files included in the request (seen in the request below)

POST /platform/memories/memories
Content-Type: multipart/form-data; boundary=Boundary_2_bHash_bTimestamp
Authorization: Bearer YOUR_ACCESS_TOKEN_HERE
MIME-Version: 1.0
--Boundary_2_bHash_bTimestamp
Content-Type: text/plain
Content-Disposition: form-data; name="title"
Missionary Portrait
--Boundary_2_bHash_bTimestamp
Content-Type: image/jpeg
Content-Disposition: form-data; filename="alma-mission.jpg"; name="artifact"
...(binary bytes of the image)...
--Boundary_2_bHash_bTimestamp--

How we can do this with postman? You just need to add your files to the form-data. Thank to postman we don’t need to set content types, the content-types and boundary is automatically detect by postman.

ex:

Base64 image vs Multipart request:

Base64 image

• Base64 converts your data to an ASCII representation of the binary data.
• Base64 increases the size of the data transferred by 33%.
• Base64 image representation can be directly placed within html to render an image.

Multipart request

• Multipart/form-data is the standard way of transferring binary data in HTTP requests.It allows you to use specific encoding / content types for each part you’d like to transfer.
• Binary takes up less space. And benefits from greater network effects and standardization. E.g. if you want to use amazon simple secure storage S3 you have to store a binary file. You can’t store a string you would need a key/value store e.g. redis.

It’s easier to send these requests by using postman. Also you can send these requests by using the Curl. I thank you all for reading this article and if you have anything to improve on it please leave me a comment.😊️