how get get file name in file chooser in react?

Question

could you please tell me how get get file name in file chooser in react ? I am trying to set value in input field after choosing file from file chooser here is my code https://stackblitz.com/edit/react-d4kp1d?file=bulk.js I tried like this

<input
        id="file_input_file"
        className="none"
        type="file"
        ref={inputRef }
        onChange={(e)=>{
          console.log('---')
          console.log(inputRef.current[0].files[0].name)

        }}
      />

it gives me undefined

Answer 1

You can get selected file name without using ref

  function handleChange(event) {
    console.log(`Selected file - ${event.target.files[0].name}`);
  }

  <input type="file" onChange={handleChange} />

Answer 2

you can use onChange handler

const changeHandler=(e)=>{
    if (e.target.files.length > 0) {
     let filename = e.target.files[0].name;
      console.log(filename)
    }
  }
<input type="file" onChange={changeHandler}/>