Vue - hidden file input - listen for cancel

Question

I am using an hidden file input that I am triggering using Vue

    <input
        ref="uploader"
        class="d-none"
        type="file"
        @change="onFileChanged"
        @cancel="closeWizard"
    >

this section of code is triggered by this method:

  window.addEventListener('focus', () => {
    this.isSelecting = false;
  }, { once: true });

  // Trigger click on the FileInput
  this.$refs.uploader.click();

It works almost perfect, I can access the file in the onFileChanged method. However, I would like to catch a cancel event so that I can close the wizard in which the file dialog resides. Unfortunately,

@cancel="closeWizard"

does not work, any ideas how to catch the cancel?

Answer 1

I fixed it by adapting some of my own code:

handleFileImport() {
  console.log('handleFileImport');
  this.isSelecting = true;

  // After obtaining the focus when closing the FilePicker, return the button state to normal
  window.addEventListener('focus', () => {
    this.isSelecting = false;

    setTimeout(() => {
      console.log('selected file', this.selectedFile);
      if (this.selectedFile == null) {
        this.$emit('close_wizard', true);
      }
    }, 500);
  }, { once: true });

  // Trigger click on the FileInput
  this.$refs.uploader.click();
},

and the hidden input

    <!-- Create a File Input that will be hidden but triggered with JavaScript -->
    <input
        ref="uploader"
        class="d-none"
        type="file"
        @change="onFileChanged"
    >

If no selected file is set, an emit is generated using this line: this.$emit('close_wizard', true);

and the wizard that holds the file input is closed