How can I upload images to s3 in react native? - amazon-web-services

Question

I am trying to upload local images from my react native app (i'm using expo) to an s3 bucket, but nothing seems to work.
I'm am using react-native-aws3 library, but Promise.then never gets called. It doesn't throw any error either.
This is the code:
const options = {
bucket: BUCKET_NAME,
region: REGION,
accessKey: AWS_USER_KEY,
secretKey: AWS_PRIVATE_KEY,
successActionStatus: 201
}
export async function uploadImage(imageUri, imageName, imageType) {
const file = {
uri: imageUri,
name: imageName,
type: "image/" + imageType
}
RNS3.put(file, options).then( (response) => {
console.log("done")
console.log(response)
console.log(response.status)
})
}
This is the Bucket Policy:
{
"Version": "2012-10-17",
"Id": "Policy1648118554991",
"Statement": [
{
"Sid": "Stmt1648118551643",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:PutObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::BUCKET_NAME",
"arn:aws:s3:::BUCKET_NAME/*"
]
}
]
}
This is the IAM user policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": "arn:aws:s3:::BUCKET_NAME/*"
}
]
}
I tried following every tutorial I could find, but nothing seems to work. Do I have to do something else, like server side? or is there something wrong in the policies?

Answer 1

To upload content to an Amazon S3 bucket, use the official AWS SDK for JavaScript. To use this SDK with React, look at this doc topic:
Getting started in React Native
To work with Amazon S3, see:
Amazon S3 examples

Answer 2

code mentioned here works in "react-native": "0.68.2"
your react native camera collects image uri something like this file:///storage/emulated/0/Android/data/com.lobb.agent/files/Pictures/image-e4047ca8-5df9-489d-ac86-2bcdf24cd3436728860500254451478.jpg
following code does these steps
accepts your image uri
convert the image uri in to blob,
makes put request to s3 bucket
const handleImageUpload = async () => {
try {
const resp = await fetch(yourImageURI); //
const imageBody = await resp.blob(); // conv uri to blob
const result = await fetch(yourSignedURL, {
method: 'PUT',
body: imageBody,
});
console.log('result:', result);
} catch (error) {
console.log('error upload :', error);
}
};