ReactJS - render file name in text when selected file

Question

Creating app to upload files from local directory, it was a successful for me. Until the part where I start add some styles and features, I've encounter some issues. after creating connection between <input> + <label>.

<input
  id="file"
  type="file"
  name="selectedFile"
  onChange={this.onChange}
/>
<label htmlFor="file">{file}</label>

The goal was to have text render on label tag instead of actual input following onChange event function.

Following ternary conditional with the fileName (from state) and file, they both are set at null as default. Since no file is been selected, the condition is set at false and text "Choose a file" will display on <label>.

render() {
  const { fileName } = this.state;
    let file = null;

    file = fileName 
      ? ( <span>File Selected - {fileName[0]}</span>) 
      : ( <span>Choose a file...</span> );

Anytime user select on <label> painted "Choose a file" text. it triggers onChange function to have file directory pop up at front of browser. Once file is selected from list, the condition becomes true. And should paint actual file name on <label> eg something.jpg...

<label htmlFor="file">{file}</label>

I didn't get any, it wasn't successful for me... However, I've strong suspect it has something to do with this syntax fileName[0]...

<span>File Selected - {fileName[0]}</span>)

I may have it wrong. Any suggestions? Thanks in advance

Here's full syntax...

export default class Form extends Component {
  state = {
     fileName: '',
  };

  onChange = e => {
    switch (e.target.name) {
      case 'fileName':
        this.setState({ fileName: e.target.files[0] });
      break;
      default:
        this.setState({ [e.target.name]: e.target.value });
     }
  };

render(){
   const { fileName } = this.state;
   let file = null;

   file = fileName 
      ? ( <span>File Selected - {fileName[0]}</span>) 
      : ( <span>Choose a file...</span> );

   return(
      <form onSubmit={this.onSubmit}>
         <div>
            <input
               id="file"
               type="file"
               name="selectedFile"
               onChange={this.onChange}
            />
            <label htmlFor="file">{file}</label>
            </div>
        </form>
     );
  }
}

I will say, I spent a whole lot of time trying to understand this code, and in particular the whole Switch/Case block of code. Why is that there? I didn't understand the input onChange event can return id, type, and name. Why does that matter? Well it would allow you to update numerous elements in a single form with a single onChange() function, one form element per case. This is awesome. Thx for sharing... — zipzit
– zipzit, Commented Mar 6, 2020 at 16:07

Dacre Denny · Accepted Answer · 2018-11-01 01:34:58Z

9

If I understand your question correctly, then it seems you're wanting the <label /> to display the filename of the file that was selected by the user?

This can be achieved by using the .name property on the file asscoaited with the input's change event:

class Form extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
       fileName: '',
    };
  }

  onChange = e => {

    switch (e.target.name) {
      // Updated this
      case 'selectedFile':
        if(e.target.files.length > 0) {
            // Accessed .name from file 
            this.setState({ fileName: e.target.files[0].name });
        }
      break;
      default:
        this.setState({ [e.target.name]: e.target.value });
     }
  };

render(){
   const { fileName } = this.state;
   let file = null;

   file = fileName 
      ? ( <span>File Selected - {fileName}</span>) 
      : ( <span>Choose a file...</span> );

   return(
      <form onSubmit={this.onSubmit}>
         <div>
            <input
               id="file"
               type="file"
               name="selectedFile"
               onChange={ (event) => this.onChange(event) }
            /> { /* Updated this to an arrow function */ }
            <label htmlFor="file">{file}</label>
            </div>
        </form>
     );
  }
}

For a working example, see this jsFiddle - hope that helps!

answered Nov 1, 2018 at 1:34

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sirrus Over a year ago

Darce Denny, the .name properties is it -- i have updated from {file} into {file.name} eg -> <label htmlFor="file">{file.name}</label>. Its now able to display file name in text.

Dacre Denny Over a year ago

@sirrus great! - did the jsFiddle I linked to work for you?

sirrus Over a year ago

Yes, JSFiddle you shared worked for me -- this one got light blub lit in my head on .name property

Dacre Denny Over a year ago

@sirrus glad to hear that it helped :-)

Collectives™ on Stack Overflow

ReactJS - render file name in text when selected file

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related