What would you say are the two most difficult things to do in front-end programming for you? State management? Data integrity? Those are valid choices, and there's plenty more that you could add, but for me -- the answer would be React upload file to S3.
Most devs know that nothing about S3 is easy. The pricing model is ambiguous at best and the integration can be an entire nightmare in and of itself. That's still only half of the problem. What about the file upload? The input? Everyone expects drag and drop uploads these days but that's not really an easy thing to build, and again, only half of the problem.
That's where Simple File Upload comes in. Simple File Upload makes react file uploads easy so that you can get to building the parts you love!
Today we're going to build a quick file uploader with built-in S3 uploads using the React framework.
We're going to keep this pretty barebones. We'll write some CSS, but the main feature we'll be focusing on is how simple it is to get the Simple File Uploader into your project and working!
I have a folder on my desktop where I keep all of my projects, so we'll start by cd-ing into that directory and running `npx create-react-app simple-file-uploader` in the terminal.
From there we're going to install Simple File Upload. They have a React package for it, so we'll just `npm install react-simple-file-upload`, and voila- we have it ready to use.
Simple File Upload is a paid solution, so you'll have to create an account and get an API key- which we'll use later in the project. Once we have all of that ready then we can jump into the code!
Now let's get our local server running. In your terminal you want to `cd YOUR_PROJECT_NAME` and then run `npm run start`. Boom! Let's go!
First things first. Let's jump over to our App.js file and get rid of the react boilerplate. Strip it all of the way down until it looks like this.
.png)
This gives us a clean base to work from and now we can get started building.
I always like to come up with a definition of done list when I'm building out projects or features. This is simply a quick list of key functionality we want to ensure exists. In this app, we want to be able to drop images into our Simple File Uploader and have them render in the grid below.
Our Definition of Done could look something like this:
We'll refer back to this as we build. Let's start by giving it a quick "website" feel with some content in the header.
.png)
From here, let's get our Simple File Upload widget into the UI. We'll import the SimpleFileUpload package into the project. To do that, we'll add `import SimpleFileUpload from react-simple-file-upload' back in our App.js file.
And we'll go ahead and place the widget in the markup as well. Let's put in a `main` tag to use as a wrapper for the uploader and our grid.
One very important thing to note about the upload widget is the onSuccess attribute available. This is where you'll call the function you want to happen when a file is successfully uploaded.
This is also where you'll receive access to the S3 generated URL for your asset. This is where you could push that URL to an array, write it to a database, package it up in an email- the sky's the limit.
.png)
You're probably seeing an error right now. Your project is probably yelling at you because `handleUpload` doesn't exist. Let's fix that.
Let's create that function just before your return statement. To quickly check that our uploader is working, we can just quickly console the URL.
.png)
Now… upload a file! Did it work?! Sweet! So at this point, our upload widget is functioning and we just need to build out our UI a little more.
So in very little code, we've got a working drag and drop uploader connected straight to Amazon S3 buckets. Isn't that wild? That simple. That quick. You can also customize the upload widget at anytime on your Simple File Upload developer dashboard.
So now your file should be looking something like this.
Let's check our Definition of Done and see where we stand:
Looks like we're almost done! All that's left is to get our uploaded images into a grid!
Since we're not using a database in this project, the easiest way to accomplish this will be to store the image URLs in hook and have our UI display them all.
Our next step is to add `import { useState } from 'react'` at the top of our file. After that, we'll create the hook just below the line `function App() {`.
We'll just call this uploadedImages. `const \[uploadedImages, setUploadedImages] = useState(\[])`.
Now that we have that in place, we can change our `handleUpload()` to set the images in our hook rather than just logging them out.
.png)
From there, we just need our front-end to map through the images and display them!
Add this code just below your `.upload-wrapper div`.
.png)
There you go! We're now using Simple File Upload to send images straight to S3 and displaying them in a grid!
The last step is to dress this up just a little bit. Move over to your App.css file and add the code below.
.png)
You, my friend, just uploaded images to Amazon S3 in 6 minutes (according to this article's read time). React upload file to S3 is easy with Simple File Upload, so you can focus on building the fun parts of your app! Try Simple File Upload today for free!
