React Native Node JS - Error: Multipart: Boundary not found

React Native Node JS - Error: Multipart: Boundary not found

Post by: Niraj Dhungana

Posted on: Nov 12, 2021

#React Native# Node JS

If you are trying to upload an image or media file from your react native app to node express backend, using multer. This “Error: Multipart: Boundary not found” is common. So in this small post I will share my experience with you guys how you can fix it.

Normally we use JSON data to upload or retrieve data from the server. But when we want to work with files we can not use JSON format at this time we need to upload data as the format of form-data.

Here to show you guys the main cause of the problem I will use the example of image file upload. To upload images to the node server we can use multer at our backend server to handle file upload.

If we want to upload images from web frameworks like React or even plain HTML CSS. We can generate a new FormData and append the field and the value like below.

1
2
3
4
5
const formData = new FormData()
// formData.append(fieldName, file)

// Example code
formData.append('profileImage', files[0].file)

But with react native it works a little bit differently. Here we also need to specify the boundary of our file (data), like file name, type and url like below.

1
2
3
4
5
6
7
8
9
10
const formData = new FormData()

// formData.append('profileImage',{ name, uri, type})

// Example code
formData.append('profileImage',{ 
        name: imgName,
        uri: imgUri,
        type: 'image/jpeg'
})

Also if you want to see the complete way to upload image from your react native app to your node js server the here the video solution.

Watch Video

I hope it will solve your problem, best of luck.