Promise-based File Picker in Javascript

filepicker.js

// opens file dialog waits till user selects file and return dataurl of uploaded file

async function pick() {
  var filepicker = document.createElement("input");
  filepicker.setAttribute("type","file");
  filepicker.click();
  return new Promise((resolve,reject) => {
  	filepicker.addEventListener("change", e => {
  	  var reader = new FileReader();
      reader.addEventListener('load', file => resolve(file.target.result));
      reader.readAsDataURL(e.target.files[0]);
  	});
  });
}

// Only call this function on a user event

window.onclick = async function() {
  var file = await pick();
  console.log(file);
}

There is no reject, and the cancellation will wait indefinitely。

@CongAn yeah, that's a bug, will fix

@CongAn yeah, that's a bug, will fix

I found an answer. Maybe I can add the following code to solve it, but in fact, there is no way to know whether the user has clicked the Cancel button.

// ……
filepicker.addEventListener('change', () => {
  // ……
  filepicker = undefined
})
 // ……
window.addEventListener('focus', () => {
  setTimeout(() => {
    if (filepicker) {
      filepicker= undefined
      reject(new Error('File deselected!'))
    }
  }, 300)
}, { once: true })

@CongAn oh, that's a good solution, thanks