'Multer Can't Identify Files sent by react native

I am using https://github.com/react-native-cameraroll/react-native-cameraroll for getting users images and videos from there device Then user selects the Image/Video and i get this Object when user selects the file:

image: {object} : An object with the following shape:
      uri: {string}
      filename: {string | null} : Only set if the include parameter contains filename
      height: {number | null} : Only set if the include parameter contains imageSize
      width: {number | null} : Only set if the include parameter contains imageSize
      fileSize: {number | null} : Only set if the include parameter contains fileSize
      playableDuration: {number | null} : Only set for videos if the include parameter contains playableDuration. Will be null for images.

Then i am appending the selected files like this to FormData

for (var i = 0; i < selectedFiles.length; i++) {

const photo = selectedFiles[i];
formData.append('multimedia', {
  name: photo.fileName,
  type: photo.type,
  uri:  Platform.OS === 'android' ? photo.uri : photo.uri.replace('file://', ''),
}); }



const headers = {
      'Content-Type': 'multipart/form-data',
      'Access-Control-Allow-Origin': '*',
       IdToken: 'xxxxxxxx',
       Authorization: 'abcd',
       };
   
    const uri = TRANSCODING_SERVICE_URL;
    axios
      .post(uri, formData, {
        headers: headers,
      })
      .then((response) => { console.log(response);}).catch((err)=> console.log(err));

After hitting this Request i got to see that my transcoding api is not getting any multimedia from front end

But when i send a file through Postman or Thunder Client...It's working

It also works in React/HTML form but not in React Native



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source