On the site (written in React), in one of the fields it is possible for the user to select a file from their computer and accordingly see the path (file name). Below is a visual example to get you started.
before upload:
after upload:
I implemented this field using HTML input with type="file"…
<div className="inline-flex w-full justify-between">
<input
id="fileInput"
onChange={chooceFile}
type="file"
className={clsxm(
'w-full text-sm',
'text-[#FFFFFF] file:float-right file:mr-0 file:text-[#FFFFFF]',
'file:bg-[grey]',
'file:px-3 file:text-xs',
'file:font-medium '
)}
/>
</div>
…and with your help I would like to customize this field. In this regard, I have two related questions:
- How to change the default label on the button from "Choose File" to "Any text"
- How to change the default label when no file is selected from "No file chosen" to "Please, choice file"
2
Answers
The easiest way to do this is to simply overlay the input over your visualisation of it, since the input does nothing but select a file and display that feedback. You can easily mimick this behaviour as such in pure HTML, CSS and a little bit of javascript:
Here’s how to do it in React using tailwind