Understanding Boundary in Multipart/Form-Data

When dealing with file uploads and form submissions in web development, understanding the role of the boundary in multipart/form-data is crucial. This article explains what the boundary parameter is, how it works in multipart/form-data, and provides examples including script code.

What is Multipart/Form-Data?

multipart/form-data is one of the encoding methods provided by HTML forms to submit data to a server. The three main encoding methods are:

1. application/x-www-form-urlencoded (default)
2. multipart/form-data
3. text/plain

multipart/form-data is typically used when a form includes file uploads, but it can also be used for submitting other types of form data. It allows files to be included in the request body, making it more complex than application/x-www-form-urlencoded, which encodes data similar to query strings.

The Role of Boundary in Multipart/Form-Data

The boundary parameter acts as a marker for each part of the name/value pairs in the multipart/form-data. It is automatically included in the Content-Type header of the HTTP request. Each part of the form data is separated by this boundary string.

Characteristics of Boundary:

• Mandatory: The boundary parameter is required for multipart/form-data and other multipart content types. Without it, the server cannot parse the request payload.
• Arbitrary Value: You can set the boundary parameter to any value, provided it does not exceed 70 bytes and consists only of 7-bit US-ASCII characters.
• Unique Delimiters: The boundary string must not appear within the data, ensuring that each part is correctly delineated.
• Ending Boundary: The final boundary delimiter ends with two additional hyphens to indicate the end of the payload.

Example: File Upload with Boundary in Multipart/Form-Data

const url = myhost + "/rest/api/3/issue/" + issueId + "/attachments";
let fileObj = file.load({ id: '35953'});
let fileContents = fileObj.getContents();
// Prepare the multipart form-data body
const boundary = '----WebKitFormBoundary7MA4YWxkTrZu0gW';
const body = `--${boundary}rnContent-Disposition: form-data; name="file"; filename="${fileObj.name}"rnContent-Type: image/pngrnrn ${fileContents}rn--${boundary}--`;

// Set the necessary headers for the multipart/form-data request
                 
let headers = {};
headers['Authorization'] = '---My Basic token-----';
headers['Accept'] ="application/json";
headers['Content-Type'] = 'multipart/form-data; boundary=' + boundary;
headers['Accept'] = 'application/json';
headers['X-Atlassian-Token'] = 'nocheck';
headers.['Content-Length'] = body.length;
https.post({ url: url, headers: headers, body: body});