Member-only story

Keep Your Users Constantly Occupied

Uploading Files in React While Keeping The UI Completely In Sync

Now’s the time to make React do great things

jsmanifest
Better Programming
Published in
10 min readJun 13, 2019

Building a file upload component is a very important skill to learn as it allows users to select and send files outside of their local environment.

With that said, this post is putting a heavy focus on the native file api in JavaScript. If you want to know a little more about how the file api works, click here.

At first, building a file upload component can be an awkward concept to grasp especially if you want to customize the look and feel of it. (We can go over custom designing file input components in a future tutorial). But once you get a good understanding of the concepts, it actually isn’t that bad!

I mean, you can just create a file input element, pass in an onChange and call it a day from there. But are you going to take care of your users by presenting them the current state of the process each way? Or are you just going to let them sit there and hope that they see the end of it without any visual updates in between?

What if the user’s internet disconnects? What if the server doesn’t respond with anything? What if file 8 of 14 is big for them? What if the user was…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

jsmanifest
jsmanifest

Written by jsmanifest

Team Lead Front End Developer for a TeleMedicine Company. Follow and Join Me on my Adventures. https://jsmanifest.com

Responses (3)