CODEWITHSUNDEEP
reactjs
leafend617
leafend617

Reputation: 203

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

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.

Upvotes: 12

Views: 19321

Answers (4)

Ateeb Asif
Ateeb Asif

Reputation: 174

In order to change the default input type file's text you need to use label with the input while the label having htmlFor="" attribute value as the same for the input id="" value, and then you need to use styles to hide the original input element that could be this "style={{ display: "none" }}". So after this when you will click on the label it will work just like normal input type file. But now you will have to display the text that you want to show inside the label or you can style the label as a button so the user can know it's something and after selecting a file you can display the file's name using a state so it will be something like this.

 import React, { useState } from "react";

 const CustomFileInput = () => {
 const [file, setFile] = useState(null);

 const onFileChange = (e) => {
   setFile(e.target.files[0]);
 };

 return (
    <div>
     <div>
      <label htmlFor="input-file">Select a File</label>

      {file?.name && <p>{file?.name} is selected</p>}
     </div>

     <input
      type="file"
      id="input-file"
      onChange={onFileChange}
      style={{ display: "none" }}
      />
   </div>
  );
 };

export default CustomFileInput;

Upvotes: 0

D. Rattansingh
D. Rattansingh

Reputation: 1669

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:

enter image description here

codesandbox

Upvotes: 0

Marhamat Baghirov
Marhamat Baghirov

Reputation: 21

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

Upvotes: 2

Dacre Denny
Dacre Denny

Reputation: 30360

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!

Upvotes: 18

Related Questions