How to change default text in input type=“file” in reactjs?

Question

I want to change default text on button that is "Choose File" when we use input type="file"

I read through the Change default text in input type="file"?, but my case is in reactjs.

And I was told "React generally doesn't use document.getElementById to get things done. " So is there a better solution?

Thanks so much for all of your help.

Can you show the code you are currently working with? It isn't really clear what you are asking but it is unlikely that `getElementById` will be needed. — Hunter McMillen, Apr 27 '20 at 21:07

Dacre Denny · Answer 1 · 2020-04-27T21:53:29.760

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!

score 1 · Answer 2 · edited Jun 03 '22 at 04:12

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:

And like this:

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)}}
              
            />

D. Rattansingh · Answer 3 · 2023-05-18T19:53:10.013

You don't need react to change the button text, it could be done with CSS and a little bootstrap.

Follow this link and choose option 1 (Using Bootstrap CDN), follow the steps. That way you'll only have to insert a link in your public/index.html file but you won't need to install anything.

Then try the following:

React:

import styles from './TestForm.module.css';

const TestForm=()=>{      
    return(
        <div className={`input-group ${styles.customerFileBtn}`} >
            <label className="input-group-text" htmlFor="inputGroupFile">Browse/Your_New_Text</label>
            <input type="file" className="form-control" id="inputGroupFile" />
        </div>
    )
}

CSS: TestForm.module.css:

.customerFileBtn{
    width: 50%;
    margin:auto;
}

input[type='file']{
    background-color:transparent;
}

.customerFileBtn input[type='file'] {
    padding:6px 0 0 7px;
    &::-webkit-file-upload-button {
        display: none;
    }
    &::file-selector-button {
        display: none;
    }
}

.customerFileBtn label:hover {
    background-color: #dde0e3;
    cursor: pointer;
}

Result:

codesandbox

How to change default text in input type=“file” in reactjs?

3 Answers3