Invoke the upload dialog from Vue.js component

25th October, 2019 - 2 min. read - in Tutorials - Go to Index

Hey, before scrolling, I've made a tool to help people building presentations the modern way.
If you don't mind, I'd like to ask some feedback about it. Here the starting point to learn more.
Much appreciated!

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.


Spotted a typo or (likely) a grammar error? Send a pull request.