2

I got a postman collection like this

postman headerHeader Image

postman bodyBody

Here is my upload logic. I am using react-native-image-picker to access the photo library

Form making logic

const createFormData = (photo, body = {}) => {
  const data = new FormData();

  data.append('files', {
    files: photo.assets[0].fileName,
    type: photo.assets[0].type,
    uri:
      Platform.OS === 'ios'
        ? photo.assets[0].uri.replace('file://', '')
        : photo.assets[0].uri,
  }); 

  return data;
};

upload logic

const handleUploadPhoto = () => {
    createFormData(photo);
    axios
      .post(
        'userapi/UpdateUserProfileImage',
        {
          body: createFormData(photo),
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': '...'
          },
        },
      )
      .then(response => {
        console.log('response', response.data);
      })
      .catch(error => {
        console.log('error', error);
      });
  };

I am always getting 500 error

Kerry
  • 384
  • 3
  • 25
  • You forgot to describe the error you get. It seems lioke in "files" object "name" property is missing. Here is a solution: https://stackoverflow.com/questions/29489502/how-to-upload-file-to-server-using-react-native – Mihályi Zoltán Mar 24 '22 at 11:16
  • just a note, but this implementation of file upload seems vulnerable to path traversal. – Josef Korbel Mar 30 '22 at 13:57
  • If you are adding an image change content type to multipart/form-data – raw_hitt Mar 30 '22 at 19:16

1 Answers1

1

in header try "Content-Type": "multipart/form-data" because you are sending an file not json object

Ahmed Khalil
  • 26
  • 1