What I learnt creating a custom File Upload Button

In handling your form, not all the data will be in the form of a string. You might need to send data such as images in various file formats and even multimedia files to the backend and that is where the file upload button comes in handy.
The regular file upload button does the job but the challenge is that it tends to disconnect from the UI and this can be a quite a challenge.
The code snippet shows a typical file upload button styled with tailwindCSS

<div className="border w-full border-[#ADADAD] rounded-lg">
        <input
            type="file"
            placeholder="choose image"
            className="w-full h-full"
            onChange={handleImage}
            accept="image/png, image/jpg, image/gif, image/jpeg"
          />
        </div>

From the image, the file upload button is just bland and does not go with the theme of the UI.

To design a custom file upload button we need to do the following:

1. Make the container div tag of the file upload component to have a relative positioning. The essence of this is so that we can apply absolute positioning to the file upload button with reference to its containing div.
2. Apply an absolute positioning to the file upload button.
3. Style the file upload button by adjusting its width and height to covers the entire div component.
4. Add an opacity of 0 to the file upload button so that the file is not visible but is present on the UI. 5.Add a span tag and a regular button with the appropriate styling you need. This is what is now visible on your UI.
5. So this creates an illusion to the user that the styled button is what is doing the file upload work whereas in the real sense, the traditional file upload button is still doing its work.

The image below shows how the new file upload UI will look like

The code snippet below shows the code for the custom file upload UI.

<div className="relative border w-full border-[#ADADAD] rounded-lg  mt-3 mb-6 h-12">
          <input
            type="file"
            placeholder="choose image"
            className="opacity-0 absolute top-0 left-0 w-full h-full"
            onChange={handleImage}
            accept="image/png, image/jpg, image/gif, image/jpeg"
          />
          <span
            className=" text-center w-[70%] inline-block"
            name="file-text"
            id="file-text"
          >
            {fileName}
          </span>
          <button
            type="button"
            name="attach-button"
            id="attach-button"
            className="w-[30%] h-full border bg-[#2F63AA] text-white cursor-pointer font-roboto sm:text-[18px]"
          >
            Attach File
          </button>
        </div> 

One interesting experience I had is that an element with absolute positioning always stays on top no matter the z-index value of the elements around it. I also did not discuss the react code responsible for making the file upload button interactive as I wish to restrict myself to the Html and CSS.

Congrats, you now have a custom file upload button.