15

I tried using a hack described in various locations which uses:

document.body.onfocus = checkOnCancel();

An example:

var fileSelectEle = document.getElementById('fileinput');

fileSelectEle.onclick = charge;

function charge()
{
    document.body.onfocus = checkOnCancel;
}

function checkOnCancel()
{
    alert("FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length);
    if(fileSelectEle.value.length == 0) alert('You clicked cancel!')
    else alert('You selected a file!');
    document.body.onfocus = null;
}

Is there something wrong here? Because fileSelectedEle.value always returns the previous execution value and NOT the one selected by the user. Is this the expected behavior of input file? How to resolve this to read the actual file selected?

http://jsfiddle.net/smV9c/2/

You can reproduce the error by:

Step 1: SelectFile - some select some file (and notice the output)

Step 2: SelectFile - press cancel (and notice the output)

2
  • Do you mean document.body.onfocus = checkOnCancel;? (No function call.)
    – Scimonster
    Apr 6, 2014 at 20:06
  • @Scimonster - No, i mean document.body.onfocus = checkOnCancel(); (with function call)
    – SamSharma
    Apr 8, 2014 at 6:29

5 Answers 5

15

One solution is to use the onchange event of the input.

var fileSelectEle = document.getElementById('fileinput');

fileSelectEle.onchange = function ()
{
  if(fileSelectEle.value.length == 0) {
    alert('You clicked cancel - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length);
  } else {
    alert('You selected a file - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length);
  }
}

This responds correctly to changes in the selected filename, as you can test here: http://jsfiddle.net/munderwood/6h2r7/1/

The only potential difference in behaviour from the way you were trying to do it, is that if you cancel right away, or twice in a row, or select the same file twice in a row, then the event won't fire. However, every time the filename actually changes, you'll detect it correctly.

I don't know for sure why your original attempt didn't work, although my best guess is that it's a timing issue with the onfocus event firing asynchronously, and before the input control's properties have finished updating.

UPDATE: To determine what the user has selected every time they close the file dialog, even if nothing has changed, the timing issue can be skirted by adding a brief delay between receiving focus again, and checking the value of the file input. Instead of calling checkOnCancel immediately upon receiving focus, the following version of charge causes it to be called a tenth of a second later.

function charge() {
  document.body.onfocus = function () { setTimeout(checkOnCancel, 100); };
}

Here's a working version: http://jsfiddle.net/munderwood/6h2r7/2/.

5
  • The purpose of using onclick is to capture cancel events and cases when the same file is selected twice in a row. Is there any solution for the timing issue? i.e. to force the values to be updated?
    – SamSharma
    Apr 8, 2014 at 6:34
  • Really good idea to listen when the focus is returned to the body ;)
    – QuarK
    Nov 11, 2014 at 9:50
  • One probleme with this, if you mouseover the body, when the box is still opened the alert pop's up, but any way seem's the best solution so far Jul 29, 2015 at 23:13
  • If the body was already the "activeElement" of the document this won't work. But what you can do though is to use the "mouseover" event and apply the same logic!
    – cSn
    Mar 2, 2017 at 17:53
  • 3
    This solution only works if the selected file is completely read by the browser before the setTimeOut function fires - larger files require more time so the checkOnCancel function will give an incorrect response if the setTimeOut fires too early. You can easily increase the timeout period but that begs the question: How long is long enough? Nov 27, 2017 at 12:51
2

You can hook into the window.focus event which gets fired when they cancel window's file select box. Then check to see if it actually has a file selected.

1
  • This was the right approach. Worked perfectly for me.
    – Besworks
    May 15, 2021 at 19:58
1

//This code works in chrome for file selection try it

     <--write this line in HTML code-->
     <input type='file' id='theFile' onclick="initialize()" />  
    var theFile = document.getElementById('theFile');
    function initialize() {
        document.body.onfocus = checkIt;
        console.log('initializing');
    }

    function checkIt() {
        setTimeout(function() {
            theFile = document.getElementById('theFile');
            if (theFile.value.length) {
                alert('Files Loaded');
            } else {
                alert('Cancel clicked');
            }
            document.body.onfocus = null;
            console.log('checked');
        }, 500);
    }
1

It gets tricky to handle all of the various ways that a user can cancel file input.

  • On most browsers, the file picker immediately opens and takes the user out of the browser. We can use the window.focus event to detect when they come back without selecting anything to detect cancellation
  • On ios browsers, the user first sees an ios modal that lets them pick between camera -vs- gallery. User's can cancel from here by clicking away from the modal. So, we can use the window.touchend to detect this
  • there are likely other browsers and cases that act differently on cancellation, that this hasn't caught yet, too

Implementation wise, you can use addEventListener to make sure that you dont replace other event listeners that may already be on the window - and to easily clean up the event listener after it fires. For example:

window.addEventListener('focus', () => console.log('no file selected'), { once: true });

Here is an example of how you can use this to get images programatically, handling the considerations listed above (typescript):

/**
 * opens the user OS's native file picker, returning the selected images. gracefully handles cancellation
 */
export const getImageFilesFromUser = async ({ multiple = true }: { multiple?: boolean } = {}) =>
  new Promise<File[]>((resolve) => {
    // define the input element that we'll use to trigger the input ui
    const fileInput = document.createElement('input');
    fileInput.setAttribute('style', 'visibility: hidden'); // make the input invisible
    let inputIsAttached = false;
    const addInputToDom = () => {
      document.body.appendChild(fileInput); // required for IOS to actually fire the onchange event; https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only
      inputIsAttached = true;
    };
    const removeInputFromDom = () => {
      if (inputIsAttached) document.body.removeChild(fileInput);
      inputIsAttached = false;
    };

    // define what type of files we want the user to pick
    fileInput.type = 'file';
    fileInput.multiple = multiple;
    fileInput.accept = 'image/*';

    // add our event listeners to handle selection and canceling
    const onCancelListener = async () => {
      await sleep(50); // wait a beat, so that if onchange is firing simultaneously, it takes precedent
      resolve([]);
      removeInputFromDom();
    };
    fileInput.onchange = (event: any) => {
      window.removeEventListener('focus', onCancelListener); // remove the event listener since we dont need it anymore, to cleanup resources
      window.removeEventListener('touchend', onCancelListener); // remove the event listener since we dont need it anymore, to cleanup resources
      resolve([...(event.target!.files as FileList)]); // and resolve the files that the user picked
      removeInputFromDom();
    };
    window.addEventListener('focus', onCancelListener, { once: true }); // detect when the window is refocused without file being selected first, which is a sign that user canceled (e.g., user left window into the file system's file picker)
    window.addEventListener('touchend', onCancelListener, { once: true }); // detect when the window is touched without a file being selected, which is a sign that user canceled (e.g., user did not leave window - but instead canceled the modal that lets you choose where to get photo from on ios)

    // and trigger the file selection ui
    addInputToDom();
    fileInput.click();
  });
0

Is there something wrong here? Because fileSelectedEle.value always returns the previous execution value and NOT the one selected by the user. Is this the expected behavior of input file? How to resolve this to read the actual file selected?

There's nothing wrong, this is expected behaviour. If the user cancels the file selection process, then it's as if they never started it. So the previous value is left in place.

3
  • I get the previous execution value even when the user selects a file instead of a cancel - jsfiddle.net/smV9c/2
    – SamSharma
    Apr 8, 2014 at 6:32
  • You can get the selected files by accessing the file list $(':file')[0].files Jul 29, 2015 at 23:15
  • Strange "expected behaviour". When using zenity on linux desktop I also get a return value when I cancel a window.
    – domih
    Oct 7, 2016 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.