I'm using Amazon S3 service for uploading image through my react native app. I used the signed url sent from amazon to perform upload, so it works like that :
The issue here is that the file (jpeg image) is broken after the upload in amazon S3. So the upload works fine but there is no way I can open the image. I tried with Insomnia and it works just fine to open the image so it has to be related to my formData body that I sent through my react-native app.
Here's the code of of my component inside react native :
const result = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
});
if (!result.cancelled) {
const resizeResult = await ImageManipulator.manipulateAsync(
result.uri,
[{ resize: { height: 400, width: 400 } }],
{ format: "jpeg", compress: 0.8 }
);
const formData = new FormData();
formData.append("putObject", {
uri: resizeResult.uri,
name: `${infoUser.id}`, // the name here shouldn't matter as it's already defined in the query (but I use the same that has be signed)
type: "image/jpeg",
});
const config = {
headers: {
"Content-Type": "image/jpeg", // I also tried : "multipart/form-data"
},
};
// results.data is the signed url
axios.put(results.data, formData, config);
.then((res) => console.log(res))
.catch((e) => console.log(e.response));
The signature url looks like this :
https://bucketname.s3.eu-west-3.amazonaws.com/profile.jpg?Content-Type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASUE*******7%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20210917T094406Z&X-Amz-Expires=900&X-Amz-Signature=a6828c1669*********ffe641b4a&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read
I was using exactly the same formData object to send images to my server before using amazon s3 and it was working just fine.
Thank you
Well after many trials, I successfully uploaded my images to Amazon S3 but I don't really know how that works.
So instead of using
const formData = new FormData();
I just pass the object resizeResult as my body request.
The request looks like this :
await fetch(results.data, {
method: "PUT",
body: resizeResult,
})
.then(() => console.log("success ?"))
.catch((err) => {
console.log(err);
});
where the resizeResult is
Object {
"height": 2112,
"uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540yoann84%252FoneTribe/ImageManipulator/95843dca-e89a-4cec-977b-cd2177d71f57.jpeg",
"width": 400,
}