Use Uppy React to Upload to Google

April 11, 2022 Post a Comment

Uncomplicated Image Upload with React

At the coding bootcamp where I teach, "How do I upload images with React?" is a question that comes up repeatedly. As with any programming problem there are a million ways to reach this issue with various tradeoffs.

Below is a way that I feel accounts for many possible scenarios you lot might encounter while maintaining a streamlined codebase.

Before we get besides far, here is a demo of what nosotros are going to be building today. And the Github repo if y'all want to skip ahead.

Presentation (aka dumb) Components

This project is bootstrapped with Create React App. I am bold you already take some feel with CRA. If not, here is a not bad tutorial.

The awarding has 3 possible states nosotros need to account for:

Loading state where the images are being uploaded
Images country where there are images to display
Initial land where there are buttons to push button to kickoff the process

We are going to set up each of those states in their own presentation component. First things get-go, Spinner.js.

Non a lot to this one, information technology shows while the images are uploading. Let's move on to Images.js which renders when there are images to evidence.

A footling more interesting here, nosotros are passing in the images equally a prop and so mapping over those images to produce the required jsx. But this is still pretty bland. Lets accept a peek at our last presentation component, Buttons.js, and and so nosotros can motion into the existent action.

Although at that place is a ton of overlap of code between the 2 buttons, it just didn't make sense (to me) to suspension the differences out to an Array of Objects and so map over that. If at that place was an boosted button, I probably would have.

Hither we are setting up our ii buttons to either upload a single image file or multiple images. Nevertheless no big surprises. Its time to motion on to the meat of this project in the App.js file.

App.js

This is were the client starts to come up live. We have a couple of methods on the App class to help usa manage the paradigm upload workflow, onChange and removeImage.

This the core of the project then lets break information technology down a footling bit.

onChange — This is where the real activeness happens. Nosotros are extracting the files to exist uploaded out of the DOM and shipping them off to our server in a fetch request. It also allows u.s. to update the state of our application to bear witness that something is happening (spinner) or show the images when they come back successfully.

removeImage — This allows us to pull images off the DOM and put the application back in the land where nosotros tin can upload more images. Its as well helpful to deal with errors that happen in the awarding. More on that below.

Thats information technology! We are now prepare to move on to writing our server.

Server

The easiest style to get started with storing images is to have a third party host the images and we just apply a string url reference to that image to display information technology in the awarding. Cloudinary is a great service that provides a generous corporeality of storage and transfer on their free program. Go ahead and sign up to get your api keys.

Afterwards signing up for Cloudinary we need to plug those keys into a .env file on the server. If you need a picayune help with that, please read this.

All set up? Time to get into the server code.

And that is it! Because we have put our images into an Array on the client side (even if it is just a single image) we can use the same endpoint to procedure them on the server.

If yous wanted to suspension it into two carve up endpoints, the unmarried upload route could look something like this.

The class information comes in an Object with keys that will vary by the blazon of file that was uploaded, so we need to put a piddling ugly with the double Object.values to get down to the path of the single file. Just it is still pretty outgoing.

And that is all for the server!

Bonus - Breaking the Code

Every bit developers, we should be constantly thinking nigh how a user may break our program and trying to anticipate those bugs earlier they occur. In the example of uploading an image I came up with a few ways a user could bring this application downward (with a big hat tip to @jasont_10452 for his expert skills as a professional person application breaker).

Uploading besides many images and blowing the limits on the free Cloudinary account
Uploading an image with the wrong file extension
Uploading an paradigm that is too large
Uploading an image where the file extension has been intentionally changed and Cloudinary could not process it. (eg. changing a .js file to a .jpeg extension)
Uploading an prototype where the file extension has been intentionally changed and Cloudinary could process information technology, but the DOM could not return the file (eg. irresolute a .pdf file to apply a .png extension)

Let'south take a quick wait at how to manage those breaking user interactions:

Yous will notice the code in the repo for handling errors is a little unlike than what I take included in a higher place. It is more robust in how it manages negative outcomes (for example, using a toast component to provide feedback to the user).

This is intentional, so we can focus on the cadre workflow in this Medium postal service and however have access to a more production set up solution when yous utilise the Github repo equally your starter.

Takeaways

I hope this helped you get your head wrapped around uploading images (and handling errors) with React. Would honey to hear if yous have a different approach to the problem or a fashion to improve this solution.

If this tutorial helped you, go ahead and high +5 (✋) the clap button beneath to help share this with other folks who may also bask this post.

Thanks

✉️ Subscribe to CodeBurst'south once-weekly Email Blast , 🐦 Follow CodeBurst on Twitter , view 🗺️ The 2018 Web Programmer Roadmap , and 🕸️ Learn Full Stack Web Development .