Question 232675 in Html Question posted in
Some basic documentation can be found here.

Html – querySelector() behavior with input file type

so i have an <input type="file" id="image">. I use querySelector to get it, let’s say:

const selectImg = document.querySelector("#image");

Then i add an input listener to it:

image.addEventListener("input", () =>{
let isFileExists = image.files.length;
console.log(isFileExists);
});

The first time i select a file, it works fine, the console prints out 1. But then, if i open the input file again, but not select anything and click "Cancel", the console prints out 0, even when the input file already had a file in it.

Can anyone explain it to me?

Tags:

2

Answers


  1. 0

    You can use ‘change’ event:

    image.addEventListener("change", () =>{
  let isFileExists = image.files.length;
  console.log(isFileExists);
});
    Login or Signup to reply.
  2. 0

    The specs have this to say on the matter:

    If element‘s type attribute is in the File Upload state, then run these steps in parallel:

    • Optionally, wait until any prior execution of this algorithm has terminated.

    • Display a prompt to the user requesting that the user specify some files. If the multiple attribute is not set on element, there must be no more than one file selected; otherwise, any number may be selected. Files can be from the filesystem or created on the fly, e.g., a picture taken from a camera connected to the user’s device.

    • Wait for the user to have made their selection.

    • If the user dismissed the prompt without changing their selection, then queue an element task on the user interaction task source given element to fire an event named cancel at element, with the `bubbles attribute initialized to true.

    • Otherwise, update the file selection for element.

    [Note]
    As with all user interface specifications, user agents have a good deal of freedom in how they interpret these requirements. The above text implies that a user either dismisses the prompt or changes their selection; exactly one of these will be true. But the mapping of these possibilities to specific user interface elements is not mandated by the standard. For example, a user agent might interpret clicking the "Cancel" button when files were previously selected as a change of selection to select zero files, thus firing input and change. Or it might interpret such a click as a dismissal that leaves the selection unchanged, thus firing cancel. Similarly, it’s up to the user agent whether re-selecting the same files counts as were previously selected counts as a dismissal, or as a change of selection.

    (Note that update the file selection is where both input and change events are fired).

    So it seems that on your system, the input is cleared when you click "Cancel" in the prompt, as is allowed per the note. However beware that not all users will have this behavior, for instance on my macOS system I get

    Action Chrome Safari Firefox
    Click "Cancel" when file selected Clears the selection Fire cancel event Fire cancel event
    Select same file Fire cancel event Fire input + change event Fire cancel event
    Click "Cancel" when no file selected Fire cancel event Fire cancel event Fire cancel event

    As you can see, it’s a mess, but by listening at the cancel event, you can yourself clear the input (input.value = null) and get a relatively standard behavior.

    But if the input selection is not cleared visually, and the input event fires, that would be a browser bug and you may want to report it to your browser’s vendor.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search