Uploading files using HTTP Multipart requests

  • The multipart/form-data standard allows sending binary data and text in a single HTTP request by using boundaries.
  • Unlike Base64 or URL-encoding, this method is much more efficient by avoiding an increase in file size.
  • The correct implementation requires letting the HTTP client handle the Content-Type to ensure automatic generation of the separator boundary.

Uploading files using HTTP Multipart requests

If you've ever struggled with an API trying to upload an image, audio, or any document, you know it's not as simple as sending regular text. uploading files using HTTP requests It is a fundamental pillar for any developer working with AI services, cloud storage or ticketing systems, but if you don't understand what's going on under the hood, you're very likely to encounter frustrating server errors.

For everything to run smoothly, it's vital to understand that binary data doesn't work well with traditional text formats. That's why the standard exists. multipart/form-data, a solution designed to package different types of content into a single submission, allowing the server to know exactly where a text field ends and where the byte stream of a file begins.

What exactly is multipart/form-data and how does it work?

Basically, it's a content type that allows you to submit form data that mixes text and binary files. Unlike application/x-www-form-urlencoded, which is the standard for simple text fields, the multipart format divides the request body into independent parts.

The secret to this whole process is what is called BoundaryThis is a unique, random string of characters that acts as a boundary. The server uses this identifier to separate each block of data. If you try to configure the header Content-Type Manually parsing without including this boundary will cause the server to freeze and return a 400 error, as it will not know how to parse the information.

Comparison of coding methods

It's common to wonder whether to use JSON with Base64 or multipart encoding. Here's why multipart encoding usually wins:

  • application/x-www-form-urlencoded: It only works for simple key-value pairs. Attempting to upload a binary file here is virtually impossible due to the need for URL escaping, which makes it extremely inefficient.
  • application/json con Base64: It's possible, but it comes at a cost. Converting a file to Base64 increases its size by approximately [amount missing]. 33 %This results in higher bandwidth consumption and increased CPU load for the server.
  • multipart/form-data: It's the native option for files. It allows you to send them. binary data directly without strange encodings, being the fastest and lightest way.
Nextcloud Google Photos
Related article:
Create your personal cloud with Nextcloud and forget about Google Photos

Practical implementation with Curl

Curl is the Swiss tool for testing APIs and its parameter -F It's the fastest way to execute multipart requests. When using -FCurl does the dirty work for you: it establishes the POST method, configures the Content-Type, and generates a unique boundary automatically.

To submit a text field, simply use -F "clave=valor"If you want to upload a local file, you should use the @ symbol: -F "campo=@/ruta/al/archivo.jpg". you can even specify the MIME type manually if the API is very demanding, adding ;type=image/jpeg at the end of the file path.

Code examples in various languages

Depending on the environment, the way to implement it varies, but the logic is the same: don't force the content header if the library already handles it.

Python with the Requests library

In Python, the library requests This makes it a piece of cake. You just need to define one dictionary for text data and another for files. Files must be passed as a tuple containing the filename, the object opened in binary read mode (rb) And the MIME content type.

A key point here is that, when passing the parameters data y files simultaneously, the bookstore automatically configures the boundarypreventing the request from arriving corrupted at the server.

Share large files OneDrive
Related article:
Guide to transferring large files with OneDrive between Android and PC

JavaScript and Node.js

In the browser, we use the object FormDataWe simply add the fields with append() and we pass the object to body of the function fetch. It's crucial Do NOT manually set the Content-TypeIf you do this, you will delete the boundary that the browser generates by default and the load will fail.

In Node.js, the situation is similar, but we usually use the module form-data y axiosIn this case, it is necessary to call form.getHeaders() to include the correct headings in the request.

Real-world examples: From Sora 2 to Google Drive

Different services implement this standard in slightly different ways. For example, the API of Sora 2 It requires that the resolution of the uploaded image exactly matches the video size parameter to avoid processing errors.

On the other hand, the API of Google Drive It offers three upload levels. Single upload is for small files without metadata. Multipart upload allows you to send metadata in JSON and the file in a single request (following RFC 2387). For large files, Google recommends the resumable chargesimilar to how the compressed file transferswhich allows you to recover the upload if the connection is interrupted, avoiding starting from scratch.

Error management and optimization

If you receive a 413 error (Payload Too Large), it means the file exceeds the limit configured on the server (such as the default 1 MB limit in Nginx). To fix this, you can compress the files or implement a chunked upload.

Another common issue is error 400 when the boundary is missing. Always remember that the boundary must be a unique string that does not appear in the body of the message to avoid confusing the server parser. To debug these errors, use curl -v It is the best option, as it allows you to see exactly how the request has been structured before it leaves your machine.

Ultimately, mastering the transmission of binary data using this protocol allows for the efficient integration of complex AI and storage services. The key lies in... use the right tools such as FormData or the Requests library, always delegating boundary management to the HTTP client to ensure that communication with the API is smooth and without parsing errors.

Turn your mobile phone into a local server
Related article:
How to use your mobile phone as a secure file server at home

Add as preferred source