Home Posts GitHub Menu

Vue Upload - Usage


At a minimum you will need to at least provide a url when creating a new $upload instance.

this.$upload.on('profile-avatar', {
    url: 'users/1/avatar'

Most likely, the id would not be static so use the option method to update any options.

created() {
    this.$upload.on('profile-avatar', {
        onSuccess(res) {
            // Update user

mounted() {
    this.$upload.option('profile-avatar', 'url', 'users/' + this.user.id + '/avatar');

Check the Examples section below for more use case scenarios.


All files will be in an array even if multiple is set to false.

You can fetch the full list of files with the files method.

<div v-for="file in $upload.files('product-gallery').all">
    {{ file.name }} <br/>
    {{ file.size }} <br/>
    {{ file.type }} <br/>
    {{ file.state }} <br/>
    {{ file.percentComplete }} <br/>
    {{ file.errors | json }}<br/>

This will return a variety of queues to use for processing, such as all, queue, progress. Just console it out for the full list.

There is also a shortcut to fetch the last file added.


All files contain the following meta data:


For reference and to key in loops.


Reference to raw file object from browser.


The instance of the named upload object.


A raw base64 format for the data useful for image previews. Note that it will be null until the files preview() method is called since it can take a while to load up.


The name of the file.


The size of the file.


The mime type of the file.


Extension of the file from filename then mimetype based on what is available.


Current state of the file. Could be one of the following: queue, progress, upload, error or success.


Percent progress indicator for the file as an integer (0 to 100);


Errors from file.

Note that errors can come internally from the module itself or externally from an error on the server end.

Use parseErrors option when installing the plugin to format errors from the server.

The internal default format is: [{code: 'somecode', msg: 'There was an error.''}]


Function to generate a raw format of the file useful for image previews.


Completely removes the file from the queue.


The plugin also includes an errors object that includes a full stack of local and file errors.

For instance checking valid extensions or size is done locally in the browser and will add an internal error.

Some cases like total files selected exceeded the count set can also throw an error without a file. In this the file object in the error will be null.