http://xkcd.com/908/

Using Amazon’s S3 service is a cheap and easy way to store files and images for your web applications in the cloud and today I’m going to show you how to do file uploads in React.

Note: The following tutorial assumes that you already have React setup on the front end, an Express server on the backend, and webpack as your file bundler.

Step 1: Install dependencies

npm i -S aws-sdk multer superagent react-dropzone

Step 2: Configure Webpack for Superagent

You need to add the following lines of code to your webpack.config file in order for Superagent to work.

plugins.push(new webpack.DefinePlugin({ "global.GENTLY": false }));

node: {
  __dirname: true,
},

Step 3: Create a React component that will handle file uploads

Step 4: Set up your backend route

Step 5: Celebrate! 🎉

That’s all it takes to upload a file to S3 and you are now on your way to storing all of your web applications files in the cloud.