2 October 2019

Get file name from file input and save it into state. You might need to use this when you hide your html file input and use button or some other element to trigger the click on the file input.

Source code viewer
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. class MyComponent extends React.PureComponent {
  5.   constructor(props) {
  6.     super(props);
  7.     this.state = {
  8.       fileName: '',
  9.     };
  10.   }
  11.  
  12.   render() {
  13.     return <>
  14.         <span>{this.state.fileName}</span><br />
  15.         <input type="file" onChange={(e) => {
  16.           e.preventDefault();
  17.           this.setState({ fileName: e.target.files[0].name });
  18.         }} />
  19.     </>;
  20.   }
  21. }
Programming Language: ECMAScript