how to post an image from react native to django

Issue

I'ive been trying to post an image file from react-native but i can't seem to get it right

this is the code I tried:

const pickImage = async () => {
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images, 
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
          });
      
          if (!result.canceled){
            delete result.cancelled;
            setImage(result.assets[0].uri)
          }
      };

and this is the fetch request:

const handleSubmit = (name, description, image, email, phone) => {
        let uri = image.replace("///", "//")
        var myHeaders = new Headers();
        myHeaders.append("Authorization", `Bearer ${userInfo.access_token}`);
        myHeaders.append("Content-Type", "multipart/form-data");

        var formdata = new FormData();
        formdata.append("name", name);
        formdata.append("description", description);
        formdata.append("photo", uri, uri.split("/").pop());
        formdata.append("phone", phone);
        formdata.append("email", email);

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: formdata,
            redirect: 'follow'
          };

        fetch(`${Url.base}/api/realtor/create-profile`, requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
    }

this is the error i keep getting:

{"photo":["The submitted data was not a file. Check the encoding type on the form."]}

Solution

A file object should have uri, name and type fields, something like this:

const formData = new FormData();
formData.append(
  'photo',
  {
    uri: <uri>,
    name: <name>,
    type: <type>
  }
);

Answered By - user18309290