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

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!

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

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

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;