javascript - Display file name for custom input file using Reactjs - Stack Overflow

admin管理员组

文章数量:1330564

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"
                  ponent="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"
                  ponent="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 ?

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"
                  ponent="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"
                  ponent="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 ?

• javascript
• reactjs

Share Improve this question Follow edited Feb 12, 2020 at 8:56 leyh asked Feb 10, 2020 at 13:33 leyhleyh 26122 gold badges44 silver badges1313 bronze badges 2

• Are you looking to display the selected file name? – Shmili Breuer Commented Feb 10, 2020 at 14:32
• 1 Yes, if I remove the style={{display: "none"}} I can display it but if I do that my custom button is useless – leyh Commented Feb 10, 2020 at 14:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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"
        ponent="span"
        endIcon={<GetAppIcon />}
    >Importer STL*
    </Button>
</label>

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

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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

本文标签： javascriptDisplay file name for custom input file using ReactjsStack Overflow