score:0

I couldn't find way to change it but I used state to hide it and when I upload file it will be visible with file name like below:

enter image description here

And like this:

enter image description here

When you create file input in with react, you use useState to set value so with that value you can fix it like below:

 <input
              className={`${selectedCv ? "text-titleText" : "text-transparent"} mt-2  w-full file:hidden   border border-placeholderText py-2 pl-2 cursor-pointer focus:border-transparent  focus:ring-main 
              block
              font-small
              bg-white bg-clip-padding
              transition
              ease-in-out
              m-0
              focus:border-main focus:outline-none`}
              placeholder=""
              type="file"
              id="resume"
              value={selectedCv}
              onChange={(e) => {setSelectedCv(e.target.value)}}
              
            />

score:7

I don't believe there's a reliable, cross-browser solution for that. You could however do something like this instead:

<label htmlFor="filePicker" style={{ background:"grey", padding:"5px 10px" }}>
My custom choose file label
</label>
<input id="filePicker" style={{visibility:"hidden"}} type={"file"}>

Here the file input element is "paired" with a corresponding label element via the id and for attributes (note the in react, for is instead specified by htmlFor).

This pairing causes user click interaction with the label element to trigger that default click behavior on the input element - which in this case, would cause the OS file selector dialog to open.

This technique gives you control over the label of the file picker, and also allows you to specify styling for the pseudo "label-button" as required.

Hope that helps!


Related Query

More Query from same tag