Passing formData to upload image with nodeJS (Multer) -> 'react-native-image-crop-picker'

0
votes

I have currently a problem when i want to uploads files from client mobiles devices to my backend (NodeJS) with MULTER.

I'm using 'react-native-image-crop-picker' to pick the images on the devices (from the library or the camera)

I have used formData to make the response as file to the backend but the req file is still undefined.

My front-end Code:

let response = await ImagePicker.openCamera({
    height: 400,
    width: 400,
    cropping: true,
  });<br>
  let media = {
    uri: response.path,
    type: response.mime,
    name: response.filename,
  };<br>
  let form = new FormData();
  form.append('uploads', media);<br>
  if (form !== null) {<br>
    await Axios({
      method: 'POST',
      url: url,
      data: form,<br>
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })

My backend :

   router.post('/article', upload.single('uploads'), async (req, 
   res) => 
   {<br>
      try {
       console.log(req.file);
 } <br>catch (err) {
   console.log(err.message);<br>
  res.status(500).send('SERVOR ERROR');
 }
  });

front-end

back-end

console.log(req.file) = "UNDEFINED"

1
react-nativemulterform-data
media is not a File(or a Blob) it is just a plain object. – Musa
So how send the file ? – user13130661
RESPONSE from 'react-native-image-crop-picker' => {"cropRect": {"height": 1944, "width": 1944, "x": 0, "y": 324}, "height": 400, "mime": "image/jpeg", "modificationDate": "1607988557000", "path": "file:///storage/emulated/0/Android/data/com.client/files/Pictures/109ddea7-1e04-436d-a7b7-63ba0daafdd1.jpg", "size": 95232, "width": 400} – user13130661
I guess you'll have to read the file from response.path into a Blob and pass that to the FormData object. – Musa
See my response, the problem is the same ... – user13130661

1 Answers

0
votes

I have used to try with fs.readFile :

  let d = {};
  let e = await Fs.readFile(response.path, 'base64');
  let form = new FormData();
  form.append('uploads', e);
  d.uploads = form;
  let config = {'Content-Type': 'multipart/form-data'};
  Axios.post(url, d, config)
    .then((res) => console.log(res))
    .catch((err) => console.error(err));
}

The req.file is still undefined but the req.body shows this :

req.file => undefined
req.body => { uploads: { _parts: [ [Array] ] } }