Use a button to upload files on your React App (with bootstrap)
If you’re here, you’re probably having problems customizing the input[type=file] tag to match your designs. It would be much easier if it were a button instead.
In this tutorial, we’ll be looking just at that. This one, in particular, is done using bootstrap, so for the rest of the tutorial, I’ll assume you have bootstrap installed.
This is where you might be at right now, where any attempt at customizing the input tag changes the label but not the ‘Choose File’ button. Moreover, the button’s display is different depending on what browser you open it in, which is troublesome if you want a consistent design.
Let’s start with the display. We can hide the input field and add a button instead. Using bootstrap, we can add ‘d-none’ to the className of the input tag.
Note this will also remove the label that displays the file name after upload. At the end of the tutorial, I will show you how to display the file name.
Running this bit of code should give us what we are after in terms of look and feel.
I added a label as well to make it obvious what the button is for. Now that we replaced the input field with the button let's transfer the functionality over as well. You can do this in two ways, which I’ll show below, and you can choose the way you prefer to do it.
1. Using ref
Create a ref, inputRef using the useRef hook, and plug it into the input field's ref attribute. Then, we can trigger the input field’s click function when the user clicks on the button.
2. Using the id property
We start by adding the id attribute to the input field and then call the document.getElementbyId when the component renders to get access to the input field. Then we can invoke the input field’s click method when we click on the button using the button’s onClick method.
Using ref is the simpler approach, but there might be times where you would prefer to use the id attribute. Whatever method you decide now, you should be able to upload files into your React application.
The only problem we have now is that we have no feedback from the app that the file has been uploaded. Before, we had a label that displayed the file name, but we removed that.
Fixing this is easy as all the information relating to the file we just uploaded now sits in the ref object (inputRef/inputFile) that we created before. This allows us to make our upload button more custom.
Let’s say the client wants the button to change to green after the user uploads the file and display a success message (or better, the file name) inside the button.
To achieve this functionality, we will create a state variable, uploadedFileName, which is initially set to null. Using the onChange attribute of the input field, we can set the state to the file name every time we upload it. Then, we can access the file name from the files array (files[0] since we are uploading a single file) inside inputRef.current. We will use some ES6 magic work to display the file name when the user uploads the file or display “Upload” if the state variable is null. Lastly, we can apply the same syntax inside the className attribute of the button to change its color to green after the user uploads the file.
If you implement the id approach before, the only difference is how you access the files array, which you can get directly from inputFile, so your handleDisplayFileName function will look like this:
// UploadButtonByID.tsx
const handleDisplayFileDetails = () => { inputFile?.files && setUploadedFileName(inputFile.files[0].name);};
If you followed everything, we have a perfectly working customizable upload file button. You can find all the code in the GitHub link here => https://github.com/shresthaprince/reactdemouploadfilebtn.git.
The files array holds other information about the file apart from ‘name,’ which can be useful for other use cases. For example, we can use the size attribute if we want to set limits on the file size users can upload. We can use the type attribute to display icons next to the button, depending on the type of file the user uploaded.
📷image.png // 🗎 document.docx
