A jpeg image uploaded from an iPhone to S3 is not readable. But works on photoshop

Question

I'm trying to upload a jpeg image from an iOS device to S3 using a presigned url. Here's what I'm doing:

const file = {
  uri: imageURL,
  type: 'image/jpeg'
};

const formData = new FormData();
formData.append('photo', file);
formData.append('Content-Type', 'image/jpeg');

const response = await axios({
  method: 'PUT',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  url: s3PreSignedURL,
  data: formData
});

(The app is in react native and I use react-native-camera to take the photo.)

The problem is the image gets uploaded. When I download it and try to view on my mac it says The file could not be opened. But if I open it in Photoshop it works. Any idea what's going on?

You can find a sample image here: https://s3-ap-southeast-1.amazonaws.com/eyesnapdev/scans/1509856619481-71809992-b818-4637-93f1-9a75b6588c2c.jpg

Answer 1

Seems you aren't using formData to send the image, rather it should be like this:

const file = {
  uri: imageURL,
  type: 'image/jpeg'
};

const formData = new FormData();
formData.append('photo', file);
formData.append('Content-Type', 'image/jpeg');

const response = await axios({
  method: 'PUT',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  url: s3PreSignedURL,
  data: formData // not **file**
});