React-native node.js showing Error: Multipart: Boundary not found while uploading image using react-native-image-picker

While Uploading image , It is showing Error: Multipart: Boundary not found on node js server console

here is my react native code

    const createFormData = async (photo, body) => {
  const data = new FormData();
   console.log("photoooooooooooo",photo.fileName);

  data.append("photo", {
    name: photo.fileName,
    type: photo.type,
    uri:
      Platform.OS === "android" ? photo.uri : photo.uri.replace("file://", "")
  });

  Object.keys(body).forEach(key => {
    data.append(key, body[key]);
  });
  console.log("datatyeeeeeeeeeeeeee",data);
  return data;
};


  const chooseFile = async() => {
    var options = {
      title: 'Select Image',
      customButtons: [
        { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
      ],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
        alert(response.customButton);
      } else {
        let source = response;
        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };
        setfilePath(source);
        // postImage(source);
        handleUploadPhoto(source);

      }
    });
  };

   const handleUploadPhoto = async (filePath) => {


  fetch("http://192.168.43.118:3000/updateImageprofile2", {
    method: "POST",
    body: createFormData(filePath, { userId: "123"}),
     headers: {
        Accept: 'application/json',
        // 'Content-Type': 'image/jpeg',
        'Content-Type': 'multipart/form-data',
        // 'Content-Type': 'application/octet-stream'
      },
  })
    .then(response => response.json())
    .then(response => {
      console.log("upload succes", response);
      alert("Upload success!");
      // this.setState({ photo: null });
    })
    .catch(error => {
      console.log("upload error", error);
      alert("Upload failed!");
    });
};

and backend node js

 router.post("/updateImageprofile2", upload.single('photo'), (req, res,next) => {

console.log("I am in");
console.log('files', req.files)
 console.log('file', req.file)
console.log('body', req.body)
res.status(200).json({
  message: 'success!',
})

});

but on the node js console it is showing

Error: Multipart: Boundary not found
at new Multipart (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\types\multipart.js:58:11)
at Multipart (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\types\multipart.js:26:12)
at Busboy.parseHeaders (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\main.js:71:22)
at new Busboy (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\main.js:22:10)
at multerMiddleware (C:\react\udemy_react\start\emb\auth_server2\node_modules\multer\lib\make-middleware.js:33:16)
at Layer.handle [as handle_request] (C:\react\udemy_react\start\emb\auth_server2\node_modules\express\lib\router\layer.js:95:5)

So there is a button which I click then choosefile function calls and after choosing files it goes to handlephoto function where the body part formdata create or append the image data into body then send the data to node js server where I am trying to upload image on upload folder but it is not happening. Please help me , I am trying it since morning and its evening

TL;DR Try omitting the Content-Type header. If it's not set, the browser will set it for you and it'll also configure the boundary.

The referenced boundary is the boundary you must provide alongside multipart/form-data. In your example it has not been provided.

When sending a request with content of type multipart/form-data you must provide the boundary value.

POST /test HTTP/1.1
Host: foo.example
Content-Type: multipart/form-data;boundary="boundary"

--boundary
Content-Disposition: form-data; name="field1"

value1
--boundary
Content-Disposition: form-data; name="field2"; filename="example.txt"

value2
--boundary--

MDN: HTTP POST Method

In your post request, you are providing this content type without a boundary, which results in an error when the content is parsed.

However, often the easiest solution is to omit this header entirely. In this case the browser will configure this header for you--it'll also manage the boundary for you.

Recommended topics

Hot tags