第二次上传文件不起作用

Question

I am trying to upload an excel file and send to api with reactjs, so far I can successfully send file to api. In my submit function, I also want to reset saved excel file from state when submitted, so I am doing as following

  const [urlImg, setURLImg] = useState("");
  const [excelFile, setExcelFile] = useState();

  function handleOnSubmit(e) {
    e.preventDefault();

    setExcelFile();
    setURLImg("");
  }

But it is not working when I upload for the second time with the same excel file as previous one. I console.log the state but not showing anything, it seems like the whole component is not being rendered when submit with the same excel file. You can see my codesandbox sample here

google drive link to download sample excel

Answer 1

You can use the form's onSubmit event object to reset the file input field using the input's id property.

function handleOnSubmit(e) {
  e.preventDefault();

  e.target["icon-button-file"].value = "";

  setExcelFile();
  setURLImg("");
}