Upload files to S3 buckets from react

Disclaimer - When uploading files to s3 directly from front end, your AWS credentials are exposed in the network tab. Refrain from uploading files to protected S3 buckets directly from FE. Always use a server to upload files.

You need to install aws-sdk npm package in order to upload files to s3 buckets.

npm install aws-sdk --save

Make sure the bucket has following policy

<?xml version="1.0" encoding="UTF-8"?>
 <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <ExposeHeader>ETag</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

The ETag header must be exposed or bigger uploads will not complete.

---

Let's write some React
import AWS from 'aws-sdk'

in the component constructor set the AWS access key and the secret keys. You get them straight from the aws console.

AWS.config.update({
  accessKeyId: AWSAccessKeyId,
  secretAccessKey: AWSSecretKey
})

Create the bucket in the constructor as well
Always double check bucket's name and region.

this.myBucket = new AWS.S3({
  params: { Bucket: 'video-bucket-xyz'},
  region: 'ap-south-1',
})

Now when ever you want to upload a file to the bucket call the following function and pass the selected file as function argument.

uploadFile = (file) => {
  const params = {
    ACL: 'public-read',
    Key: file.name,
    ContentType: file.type,
    Body: file,
  }
  this.myBucket.putObject(params)
    .on('httpUploadProgress', (evt) => {
      // that's how you can keep track of your upload progress
      this.setState({
        progress: Math.round((evt.loaded / evt.total) * 100),
      })
    })
    .send((err) => {
       if (err) {
         // handle the error here
       }
    })
}

you can read more about putObject here.

---

References
aws-sdk

Comments

[Saltaformajo]

Your secret key is publicly available, isn't it?

[Dayzen]

I agree with you

[Amolo]

Is it really a good practice to leave the Access and Secret Keys public on the front-end?

[Mohit Kumar Yadav]

I think it's not a good practice.

[Amolo]

Then you should probably put a disclaimer at the beginning.

[Mohit Kumar Yadav]

ohh, yeah sorry, I forgot. Thank you for pointing out 😊.

[Andrew Baisden]

You also forgot to add syntax highlighting to your code blocks many people miss that on here 😄

[Mohit Kumar Yadav]

Hey thank you, didn't know about that 😊.

[Asher Mitilinakis]

This is so helpful thank you! One question I have is if you wanted to ensure that the files go into a sub-folder within your bucket, do you know how best to go about this? I've tried entering some further params into the myBucket variable but have been unsuccessful.

Many thanks!

[Odukoya Jesuseyitan]

When you want the files to go to a subfolder, You should add the location before the file name in the key and separate each sub-folder by a forward slash '/'.

For example: if I want to save to the 'profiles' folder inside 'images' in my bucket,
My key is going to be: images/profiles/file.name

const params = {
    ACL: 'public-read',
    Key: `images/profiles/${file.name}`,
    ContentType: file.type,
    Body: file,
  }

And yeah do this on the backend to avoid exposing your keys.

[Asher Mitilinakis]

Amazing, I managed to figure this out in the end. Thanks for your help too! :)

[Abarajithan]

To upload large files (1-10GB) from react into s3, can we automatically break the file into pieces, send and reassemble into one file? With same API?

[Mohit Kumar Yadav]

hey, when you do putObject it already breaks the file into pieces, you need not to worry.

[Ayomiku Olatunji John]

Please how can i get the url of the uploaded file?