React file upload still uploads the file despite limit being set

August 17, 2022

I’m probably missing something obvious but:

<input id="uploadFile" type="file" onChange={chooseFile} />

  const chooseFile = (e) => {
    e.preventDefault()
    const file = e.target.files[0]
    if (file.size > 2e6) {
      window.alert("Please upload a file smaller than 2 MB")
      e.target.file = ""
      return false
    }
  }

but once I confirm the ok in the window.alert the file name still appears next to Choose File? so it’s being uploaded to the input still. how do I prevent this?

>Solution :

Empty the value property of the input. For that change e.target.file = "" to e.target.value = "". Here is your hole code:

const chooseFile = (e) => {
    e.preventDefault()
    const file = e.target.files[0]
    if (file.size > 2e6) {
      window.alert("Please upload a file smaller than 2 MB")
      e.target.value = ""
      return false
    }
  }