I'm trying to upload an image from my app to API, but it didn't responded by the server, but another data which is text is sent successfully, can anyone help me?

Response from the image picker

{"fileName": "rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "fileSize": 82214, "height": 800, "type": "image/jpeg", "uri": "content://.talikasih.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "width": 379}

and this is the data

const datas = new FormData();
datas.append('images', payload.image)

Here is the axios

axios({
      method: 'POST',
      url: API_NO_PARAM_CONFIG.createCampaign,
      headers: {
        Authorization: `Bearer ${e}`,
      },
      data: {
        datas,
      },
    })

I'm trying to upload an image from my app to API, but it didn't responded by the server, but another data which is text is sent successfully, can anyone help me?

Response from the image picker

{"fileName": "rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "fileSize": 82214, "height": 800, "type": "image/jpeg", "uri": "content://.talikasih.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_62670a6c-c6a8-47a6-ae8f-2696455d141b.jpg", "width": 379}

and this is the data

const datas = new FormData();
datas.append('images', payload.image)

Here is the axios

axios({
      method: 'POST',
      url: API_NO_PARAM_CONFIG.createCampaign,
      headers: {
        Authorization: `Bearer ${e}`,
      },
      data: {
        datas,
      },
    })

• javascript
• react-native
• axios

1 Answer 1

Here is the solution. First save the selected image in one of your state variable. For example create a state variable called "selectedImage" as below:

const [selectedImage, setSelectedImage] = useState(null);

Now, when you select image set selected image in your state variable like this:

    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.uri) {
        setSelectedImage(response);
      }
    });

Now create FormData as below:

  const datas = new FormData();

  datas.append('images', {
    name: selectedImage.fileName,
    type: selectedImage.type,
    uri:
      Platform.OS === 'android' ? selectedImage.uri : selectedImage.uri.replace('file://', ''),
  });

And pass as below :

axios({
  method: "POST",
  url: API_NO_PARAM_CONFIG.createCampaign,
  headers: {
    Authorization: `Bearer ${e}`,
    "Content-Type": "multipart/form-data", // add this
  },
  datas, //pass datas directly
});