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.
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 waiting for the upload process to finish for 10 minutes and wanted to see how far it has gotten from there? Or which files have already been uploaded?
You have to keep the user consistently updated with what’s going on in the background if you want the UX to stay consistent. A professional, consistent user interface helps to establish trust with your app in a technological point of view. If you plan on having an app where users sign up and pay for some service of yours, they have to trust the technology that you are offering them and that your technology is better than everyone else. You’re developing in React, you have all the power to go up and beyond!