Bonus - Breaking the Code

As developers, we should be constantly thinking about how a user may break our program and trying to anticipate those bugs before they occur. In the case of uploading an image I came up with a few ways a user could bring this application down (surely there are more and I would love to hear about it if you come up with one).

1. Uploading too many images and blowing the limits on the free Cloudinary account
2. Uploading an image with the wrong file extension
3. Uploading an image that is too large
4. 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)
5. Uploading an image where the file extension has been intentionally changed and Cloudinary could process it, but the DOM could not render the file (eg. changing a .pdf file to use a .png extension)

Let’s take a quick look at how to manage those breaking user interactions:

You will notice the code in the repo for handling errors is a little different than what I have included above. 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 core workflow in this Medium post and still have access to a more production ready solution when you use the Github repo as your starter.

Takeaways

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

If this tutorial helped you, go ahead and high five the clap button below to help share this with other folks who may also enjoy this post.

Thanks