Request Entity Too Large(413) - Uploading File with Formdata with Axios and Custom header

Introduction

I was trying to upload images to my backend using rest APIs. I was using form-data library with axios, so that I can pass authorization header as well.

I was getting error: Request Entity Too Large, with http Status of 413.

Earlier Code was:

const FormData = require("form-data");

const filepath = 'my-filepath';
let fileToUpload = new FormData();
fileToUpload.append("files", fs.createReadStream(filepath));

await axios.post(
    `${this._props.host}/upload`,
    fileToUpload,
    {
        headers: {
            Authorization: `Bearer ${this._jwt}`
        },
    }
);

Error:

Request failed with status code 413

Solution

You need to pass a header Content-Type with value of multipart/form-data; and a unique boundary. When using form-data library. It also gives you a method: getHeaders().

The code becomes:

const FormData = require("form-data");

const filepath = 'my-filepath';
let fileToUpload = new FormData();
fileToUpload.append("files", fs.createReadStream(filepath));

await axios.post(
    `${this._props.host}/upload`,
    fileToUpload,
    {
        headers: {
            ...fileToUpload.getHeaders(),
            Authorization: `Bearer ${this._jwt}`
        },
    }
);

If you print fileToUpload.getHeaders(), you will get

'content-type': 'multipart/form-data; boundary=--------------------------151840689896304164188529'

And, it works.

What is Unique Boundary

In simple terms, you know that the server knows that multiple parameters are separated by an ampersand (&) character. And, if user need to pass the ampersand (&) character in the request parameters, then it have to be encoded.

But, how the server will know when to read the file data and when to stop (start and end) in the case of multipart/form-data.

It has to be similar to ampersand philosophy or contract.

This unique boundary is used for that purpose. It is to tell the server how to split the data it receives in multipart/form-data. So, what is unique about it. This value has to be unique in the request. i.e. It should not come within the content of the request or the payload.