Invoke the upload dialog from Vue.js component

In my previous tutorial I've outlined how to build a Vue.js component to allow users to drag&drop files on the browser window.

Now, I want to add a little feature more to those components, the possibility to invoke the upload dialog box by clicking or tapping some link.

The input selector

There is only one way to show the upload dialog in the browser. We need an <input type="file" /> tag which produces a default form button, not really sexy from UI point of view.

But we can hide it and use a placeholder instead, that can be styled as we prefer with CSS:

<label for="uploadmyfile">
  <p>Open the Upload dialog</p>
</label>
<input type="file" id="uploadmyfile" />

<style>
  #uploadmyfile{
    display:none;
  }
  p{
    color:red;
  }
</style>

The JS add-on

The input selector is responsible to open the dialog window and call a function once the user choose something. Here a minimal component in Vue.js that does the job:

<template>
    <div>
        <label for="uploadmyfile">
            <p>Open the Upload dialog</p>
        </label>
        <input type="file" id="uploadmyfile" @change="requestUploadFile" />
    </div>
</template>


<script>
export default {
    methods:{
        requestUploadFile(){
            var src = this.$el.querySelector('#uploadmyfile')
            console.log(src.files)
        }
    }
}
</script>

The requestUploadFile method is called once the users choose some files from their computer. The function then can read the input element to get a FileList object containing the list of File choosen by the users.

In the previous components there was already a method responsible to read the images from a FileList object. We just need to integrate the two together.

The complete component

Here the result combining both the drag&drop feature with the upload dialog box function:

You can review the complete source code from its repository.