React Native Failed Upload Image

Question

I am struggling from the past 2 days to crack the file/image upload with React Native to MongoDB. I literally read all the related forums but there is no luck. I read couple of forums and they gave a sample example but I wasn't succeeded. Here are the sample codes that I wrote.

Client Side :

const { uri } = await this.camera.takePictureAsync(options);

let formData = new FormData();
formData.append('file', {
  uri: uri.replace("file:///", ""),
  type:'image/jpg', name:'userProfile.jpg',
});

const rawResponse = await fetch('http://192.168.1.5:9000/api/contrats/upload', {
  method: 'POST',
  body: formData,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data; charset=utf-8',
    },
});


const content = await rawResponse.json();

console.log(content);

Server Side

var storage = multer.diskStorage({
  destination: (req, file, cb) => {
    
 
    cb(null, __basedir + '/resources/static/assets/uploads');
    
  },
  filename: (req, file1, cb) => {
    console.log("file : ", file);
    let name = file.originalname || file.name;
    let extension = name.substr((~-name.lastIndexOf(".") >>> 0) + 2);
    let filename = generateId() +"."+ extension;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       nsion;
    cb(null, filename)

  },


});

var upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 5
  }
});

Result

Don’t remove third slash of file prefix. Just replace file:// — OriHero
– OriHero, Commented Dec 7, 2019 at 15:08
@AbdumutalAbdusamatov Please could u help me to solve this issue? — algo tourist
– algo tourist, Commented Dec 7, 2019 at 15:56

harisu · Accepted Answer · 2019-12-07 16:22:06Z

1

Try out the below

      let body = new FormData();
       let filename = uri.split('/').pop();
       body.append('file',  {uri:uri, name:filename, type:'image/jpg', });
       const header = {
           'Accept': 'application/json',
           'content-type': 'multipart/form-data',
         }
           fetch("http://192.168.1.5:9000/api/contrats/upload", {
               method: 'POST',
               headers: header,
               body:body,
           }).then(response => response.json())
            .then(res => console.log(res))
            .catch(err => console.log("err", err)

answered Dec 7, 2019 at 16:22

harisu

1,44410 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

algo tourist Over a year ago

god bless you @harisu, you saved my day. thank you ^_^

Collectives™ on Stack Overflow

React Native Failed Upload Image

Client Side :

Server Side

Result

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Client Side :

Server Side

Result

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related