Display file name for custom input file using Reactjs

Question

I have a custom input for files but the choosen file is not displayed and I don't know how to display it.

My code

              <input
                type="file"
                name="file"
                id="file-upload"
                onChange={this.handleselectedFile}
                style={{ display: "none" }}
              />
              <label className={classes.uploadButton} htmlFor="file-upload">
                <Button
                  variant="contained"
                  color="primary"
                  component="span"
                  endIcon={<GetAppIcon />}
                >
                  Importer STL*
                </Button>
              </label>

handleselectedFile function :

  handleselectedFile = event => {
    this.setState({
      selectedFile: event.target.files[0]
    });
  };

I want to display the choosen file just after the upload button without using CSS file if possible. I think I can do it using only javascript/react but I don't know how.

EDIT for multiple files

handleselectedFile function :

  handleselectedFile = event => {
    this.setState({
      selectedFile: event.target.files,
      selectedFileName: event.target.files.name
    });
  };

Seletected files button

              <input
                type="file"
                name="file"
                id="file-upload"
                onChange={this.handleselectedFile}
                style={{ display: "none" }}
                multiple
              />
              <label className={classes.uploadButton} htmlFor="file-upload">
                <Button
                  variant="contained"
                  color="primary"
                  component="span"
                  endIcon={<GetAppIcon />}
                >
                  Importer STL*
                </Button>
              </label>
              <span className={classes.selectedFileName}>
                {this.state.selectedFileName}
              </span>

How can I display the files name or display the number of files selected as the original input ?

Yes, if I remove the style={{display: "none"}} I can display it but if I do that my custom button is useless — leyh
– leyh, Commented Feb 10, 2020 at 14:37

Shmili Breuer · Accepted Answer · 2020-02-10 14:45:57Z

3

You can save the file name in the handleselectedFile event like this:

handleselectedFile = event => {
    this.setState({
        selectedFile: event.target.files[0]
        //**** added line below ****//
        selectedFileName: event.target.files[0].name
    });
};

And use it in your JSX like this:

<input
    type="file"
    name="file"
    id="file-upload"
    onChange={this.handleselectedFile}
    style={{ display: "none" }}
/>
<label className={classes.uploadButton} htmlFor="file-upload">
    <Button
        variant="contained"
        color="primary"
        component="span"
        endIcon={<GetAppIcon />}
    >Importer STL*
    </Button>
</label>

//**** added line below ****//
<p>{this.state.selectedFileName}</p>

answered Feb 10, 2020 at 14:45

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

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

1 Comment

leyh Over a year ago

I have edited my question, if you can help me for display multiple files name

Elham.NE · Accepted Answer · 2021-06-28 14:50:25Z

To get multiple files' names and the length you just need to convert input result event.target.files to an array; then show it using map() function. MDN doc about map()
In the following snippet you can see I do the convert by Array.from(). MDN doc about Array.from()

I didn't use custom label and button for the snippet to be simple; you just add it for yourself.

TIP: To hide input tag you can simply use hidden attribute instead of style={{ display: "none" }}.

class FileInput extends React.Component {
  state = {selectedFiles: []};
  
  handleSelectedFile = (event) => {
    //***Convert file input result to an array, then store it in state.
    this.setState({ selectedFiles: Array.from(event.target.files) })
  }

  render() {
    return (
      <div>
        <input
          type="file"
          name="file"
          id="file-upload"
          multiple
          onChange={this.handleSelectedFile}
        />
        
        {/****Show names of selected files and number of them.*/}
        <p><b>{this.state.selectedFiles.length} file(s) selected</b></p>
        {this.state.selectedFiles.map((file) => (
          <p key={file.name}>
            {file.name}
          </p>
        ))}
        
      </div>
    )
  }
}

ReactDOM.render(<FileInput />, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Collectives™ on Stack Overflow

Display file name for custom input file using Reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related