1

I am trying to append the photo taken by the user from ImagePicker.launchCameraAsync()

I need to send the file itself not a base64 version of it and I am using expo with react native so react-native-fs doesn't work with me

I can get the path of the taken photo and the some other properties of it but not the image itself

A snippet of the code I am using to get the image is:

let permission = await ImagePicker.requestCameraPermissionsAsync();
    if (permission.granted === false) {
      alert("Camera access is required for single upload");
      return;
    }
    const takenImage = await ImagePicker.launchCameraAsync();
    if (takenImage.cancelled === true) {
      alert("No images were taken");
      return;
    }

    let data = new FormData();

And the request is

await axios
      .post("A link here", data, {
        withCredentials: true,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => console.log(err.response));

So any ideas how can i do this trick?

ahmed nasser
  • 11
  • 1

1 Answers1

0

you can use this code to append image to form data

let formdata = new FormData();
formdata.append('Name of the key from backend', {
    uri: 'file path of image',
    type: 'image type e.g jpeg/png etc',
    name: 'image name',
    });

After that send request like this

let axiosConfig = {headers:{}}
axios.post(URL, formdata, axiosConfig)
Ali Amjad Hassan
  • 39
  • 6
  • Thanks for replaying. The backend code is designed to get a File in the FormData. Sending the path, type and the name return with response of 400 and a message from the server "There was an error parsing the body". So I need to send the file itsetlf in the form data not the path of it. – ahmed nasser May 22 '22 at 23:07