React native upload image file to django backend

Question

Hi i want to post photo to the django backend. I can easily post with postman. But i cant do it with react native. Here is my post request:

handleSubmit(photoUri){
    let formData = new FormData();
    formData.append('file',photoUri);
    formData.append('name', 'a');
       fetch('http://localhost:8000/test/', {
      method: 'POST',
      body:formData,
    }).then(res => res.json())
      .then((data) => {
        console.log(data);
      })
      .catch(err => console.log(err));
  }

In this post django serializer is like that:

FileSerializer(data=<QueryDict: {'file': ['file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Ftez2-1599e0c7-8863-4da6-b20f-5e6e94be9342/Camera/b2116349-cdfb-4309-8d6e-51c9a36be4fb
.jpg'], 'name': ['a']}>):

but with postman it is like this:

FileSerializer(data=<QueryDict: {'name': ['a'], 'file': [<InMemoryUploadedFile: a.jpg (image/jpeg)>]}>):

I think issue is something with InMemoryUploadedFile i cant upload file in this form with react native. How can i do it ?

ZeevhY Org. · Accepted Answer · 2021-04-19 14:47:43Z

1

I understand its late too much to answet this question.

But you can try this:

handleSubmit(photoUri){
    let formData = new FormData();
    const photo_data = { // Edit Here
        uri : image_path_here // Edit Here,
        name : image_name // Edit Here, Image Name with Extension very important
        type : 'image/jpg' // Edit Here
    }
    formData.append('file', photo_data ); // Edit Here
    formData.append('name', 'a');
       fetch('http://localhost:8000/test/', {
      method: 'POST',
      body:formData,
    }).then(res => res.json())
      .then((data) => {
        console.log(data);
      })
      .catch(err => console.log(err));
  }

answered Apr 19, 2021 at 14:47

ZeevhY Org.

3631 gold badge3 silver badges9 bronze badges

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

Comments

Berk Acikel · Accepted Answer · 2020-05-14 21:59:01Z

0

I found the answer first thing is i need to post object in question i am only posting string. Second thing is there is some problem in flipper version 0.33.1 you cant post images. You need to upgrade or you can work around and comment this line in ReactNativeFlipper.java

// builder.addNetworkInterceptor(newFlipperOkhttpInterceptor(networkFlipperPlugin));

for more detailed information look here: https://github.com/facebook/react-native/issues/28551#issuecomment-624347067

Third issue is in android platform you need fix the uri like in here: Photo upload on React Native Android produce Type Error Network Error

I am run into these problems in this question.

answered May 14, 2020 at 21:59

Berk Acikel

214 bronze badges

Collectives™ on Stack Overflow

React native upload image file to django backend

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related