Recently, I attempted to upload images to S3 from my react native app by following a guide provided by Heroku: https://devcenter.heroku.com/articles/s3-upload-node
In essence, I utilized the aws-sdk on my express.js backend to generate pre-signed requests for uploading images to S3 from react native.
Initially, everything was working smoothly. However, when I decided to convert XMLHttpRequests into fetch requests, which are more favored in react native, an issue arose. Despite successfully uploading files to S3, clicking on the image links would only display an empty square instead of the actual image:
Empty square shown instead of image
Upon closer inspection, it appears that the code conversion below might be the root cause:
Original Code:
_uploadFile(file, signedRequest, url){
const xhr = new XMLHttpRequest();
xhr.open('PUT', signedRequest);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if(xhr.status === 200){
console.log("UPLOAD DONE");
} else {
alert('ERROR UPLOADING');
}
}
};
xhr.send(file);
}
Updated Code:
_uploadFile(file, signedRequest, url) {
let option = {
method: "PUT",
headers: {
"Content-Type": "image/jpeg",
},
body: JSON.stringify(file)
}
fetch(signedRequest, option)
.then(res => console.log("UPLOAD DONE"))
.catch(err => console.log("ERROR UPLOADING: ", err))
}
The file object being uploaded looks as follows:
{
name: "profileImage",
type: "image/jpeg",
uri: 'data:image/jpeg;base64,' + response.data, //just a base64 image string
isStatic: true
}
If anyone has insights into why this issue may be occurring or has encountered similar challenges, I would greatly appreciate your input! Thank you!