Uploading image files to AmazonS3 using ReactJs

Question

I am fairly new to web development (currently enrolled in a bootcamp) and have struggled finding the needed resources to incorporate uploading to Amazon S3 in my project. I apologize for the vagueness ahead of time.

I currently have a react app that is pulling images from my AmazonS3 account but I am intending to give the user the ability to upload to my bucket and use/view the images on my website.

I have tried watching tutorials and looking at various GitHub Repo's to identify what I am missing but have been unable to locate a tutorial that involves React, JSX and Javascript. (I've seen jquery, PHP, etc). Ultimately, I know this task is difficult and I am willing to put in the work but felt the need to ask if anyone knows of a useful resource that can help me?

I've tried using the 'aws-nodejs-sample' repo, 'themetoerchef/uploading-with-react' repo, watched a youTube tutorial, I've looked into FineUploader and have read the react-S3-uploader npm files but am unable to connect the dots. Additionally, I've included my AWS access keys in my .env file and tried making query strings to access the S3 bucket.

Is there a better way to go about this or are there other ways to upload with react that may be useful outside of S3?

This question is off topic. Please add more code specific issues in Stackoverflow. — Shanika Ediriweera
– Shanika Ediriweera, Commented Oct 8, 2018 at 1:51
Do you want to upload images directly from React app or do you have a backend server (like node.js) ? — Shanika Ediriweera
– Shanika Ediriweera, Commented Oct 8, 2018 at 1:53

Ossaija Thankgod · Accepted Answer · 2018-01-17 17:17:35Z

3

To upload to s3 from the browser you need to get a signedUrl from an aws sdk which is how aws verifies your identity. In my last application I used skd for nodejs to generate the signedUrl and pass it to my front end application to use in pushing files to s3. You don't have to go that route there is an sdk that can be used by javascript within the browser.

Check this aws link for more

answered Jan 17, 2018 at 17:17

Ossaija Thankgod

4545 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

B-eck37 Over a year ago

Thanks for the link! I've attempted following their guides but it's above my comprehension. I've also followed their sample instructions, I just haven't made any progress.

Ossaija Thankgod Over a year ago

Hey @B-eck37, I would like to provide more help, but I have to understand your context of this problem. Can describe how you are doing it and share code you have already

Rohan Dhar Over a year ago

What problem are you exactly facing in the process?

Amit mishra · Accepted Answer · 2020-02-13 14:15:20Z

2

Go to your project directory and run

npm install --save react-aws-s3

https://www.npmjs.com/package/react-aws-s3 And add the code in your component as per the NPM document

import S3 from 'react-aws-s3';
const config = {
    bucketName: 'myBucket',
    dirName: 'media', /* optional */
    region: 'eu-west-1',
    accessKeyId: 'JAJHAFJFHJDFJSDHFSDHFJKDSF',
    secretAccessKey: 'jhsdf99845fd98qwed42ebdyeqwd-3r98f373f=qwrq3rfr3rf',
    s3Url: 'https:/your-custom-s3-url.com/', /* optional */
}
 
const ReactS3Client = new S3(config);
/*  Notice that if you don't provide a dirName, the file will be automatically uploaded to the root of your bucket */
 
/* This is optional */
const newFileName = 'test-file';
 
ReactS3Client
    .uploadFile(file, newFileName)
    .then(data => console.log(data))
    .catch(err => console.error(err))
 
  /**
   * {
   *   Response: {
   *     bucket: "myBucket",
   *     key: "image/test-image.jpg",
   *     location: "https://myBucket.s3.amazonaws.com/media/test-file.jpg"
   *   }
   * }
   */
});

Now its everything is done, make sure to load your keys and secrets from Process ENV.

NOTE: Please don't forget to add the CORS policy on the AWS bucket if you see corse error, see here the detailed example.

thanks

edited Feb 13, 2020 at 14:15

answered Oct 16, 2019 at 13:09

Amit mishra

4171 gold badge7 silver badges16 bronze badges

6 Comments

Trect Over a year ago

The code that you just wrote above does not work. I just found out it was written by you. Do put up a disclaimer! SO is not for self promotion

Amit mishra Over a year ago

@Tessaracter, This should work now when you update the new version, I see a dependency update notifications and that was fixed on the latest version of npm.

sumanth shetty Over a year ago

@Amitmishra Could you help me out with this stackoverflow.com/questions/63461863/…

lime_ajinomoto Over a year ago

@Amitmishra been trying to make react-aws-s3 work in my project but somehow just couldn't get the CORS to work, kept getting 400 (Bad Request) when trying to upload, even when the bucket is already public. Could you please show a detailed example of how you configured the CORS settings?

lime_ajinomoto Over a year ago

@Amitmishra I forgot what I did but managed to resolve it & make it work in the end. Appreciate you taking the time to get back to me.

|

Collectives™ on Stack Overflow

Uploading image files to AmazonS3 using ReactJs

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related