Usage

Setup

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.

Files

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/>
</div>

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.

$upload.file('profile-avatar');

All files contain the following meta data:

$id

For reference and to key in loops.

$file

Reference to raw file object from browser.

$instance

The instance of the named upload object.

$raw

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.

name

The name of the file.

size

The size of the file.

type

The mime type of the file.

extension

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

state

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

percentComplete

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

errors

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.''}]

preview

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

clear

Completely removes the file from the queue.

Errors

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.


LaraBlog © 2019