How to use Draft.js WYSWYG with Next.js and Strapi Backend, Edit/Update Saved Article
Introduction This post is in contuation of our previous post: How to use Draft…
January 15, 2022
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
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.
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.
Introduction This post is in contuation of our previous post: How to use Draft…
Introduction In this step-by-step tutorial, we will setup strapi headless CMS…
Introduction Next-auth is a fantastic library for abstracting handling of…
Introduction In your backend and frontend projects, you always need to deal with…
Introduction In this post, we will see: create a test user Authenticate it via…
Introduction In this post, we will do following: create a Next.js project…
Introduction So you have a Django project, and want to run it using docker image…
Introduction It is very important to introduce few process so that your code and…
Introduction In this post, we will see a sample Jenkin Pipeline Groovy script…
Introduction We often require to execute in timed manner, i.e. to specify a max…
Introduction In some of the cases, we need to specify namespace name along with…
Introduction In most of cases, you are not pulling images from docker hub public…