CODEWITHSUNDEEP
djangoreact-nativedjango-rest-framework
Berk Acikel
Berk Acikel

Reputation: 21

React native upload image file to django backend

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 ?

Upvotes: 1

Views: 1134

Answers (2)

ZeevhY Org.
ZeevhY Org.

Reputation: 365

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));
  }

Upvotes: 1

Berk Acikel
Berk Acikel

Reputation: 21

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.

Upvotes: 0

Related Questions