Core

The set of core methods.

#on

@usage on() @return Void

Used to create a new upload instance which is tracked in a global state.

Existing instances will not be overwritten so calling the on method multiple times on the same instance will have no effect.

The method requires a name to be set for the instance and includes a series of callbacks that will trigger at each stage of a files upload.

Method options will always contain the current components context when using this. The set of full options for a new instance using on can be found on the Core Options page.

#Examples

created() {
    this.$upload.on('avatar', {

        // All files

        onSelect(files) {},
        onStart() {},
        onEnd() {},
        
        // Each file

        onQueue(file) {},
        onProgress(file) {},
        onUpload(file) {},
        onError(file) {},
        onSuccess(file) {},
        onComplete(file) {},

    });
},

methods: {
    upload() {
        this.$upload.option('avatar', 'url', 'users/1/avatar');
        
        this.$upload.select();
    }
},

#off

@usage off() @return Void

Destroy the upload instance. It's good to not leave these lingering around.

It should be fine to just use on without problems, but this allows to clean things up and remove performance issues.

#Examples

beforeDestroy() {
    this.$upload.off('avatar');
}

#reset

@usage reset() @return Void

This will completely reset the upload instance.

An instance using on must be created first.

#Examples

mounted() {
    this.$upload.reset('avatar');
},

It's also useful to call reset() for clearing an upload when using multiple.

For instance a "clear" button.

<button
    @click="$upload.reset('gallery')"
>
    Clear
</button>

#select

@usage select() @return Void

This is used to manually trigger the browsers file selection popup/dialog.

By default the uploads will start once files are selected. Set thestartOnSelect option to false to prevent uploads from beginning automatically.

#Examples

<button
    @click="$upload.select('brand-logo')"
>
    Update Photo
</button>

#start

@usage start() @return Void

This option is to be used in conjunction with the startOnSelect option when it's set to false to allow for a manual start of the uploads.

#Examples

<img :src="brandLogo" />

<button 
    click="$upload.select('brand-logo')"
>
    Select Photo
</button>

<button 
    click="$upload.start('brand-logo')"
>
    Upload Photo
</button>

#files

@usage files() @return Array

Contains a set of "queue" arrays with the upload files at each different state.

The queues are all, queue, progress, upload, success, error.

The array will not reset after completing (use reset and onEnd for that).

#Examples

<div
    v-for="file in $upload.files('gallery').progress"
>
    {{ file.name }}: {{ file.percentComplete }}%
</div>

<div
    v-for="file in $upload.files('gallery').queue"
>
    {{ file.name }}: Queued for upload
</div>

#meta

@usage meta() @return Object

Fetches some meta info about the current uploads.

The meta info is fully reactive an can be used directly in the templates.

#Examples

The percentComplete attribute keeps track of progress for the currently uploading files.

{{ $upload.meta('gallery').percentComplete }}%

The state attribute will be either ready, uploading or complete.

{{ $upload.meta('gallery').state }}

#percent

@usage percent() @return Int

Shortcut for meta.percentComplete.

#Examples

{{ $upload.percent('gallery') }}

#state

@usage state() @return String

Shortcut for meta.state.

#Examples

{{ $upload.state('gallery') }}

#dropzone

@usage dropzone() @return Object

For use with drag/drop files to upload into a "drop zone".

The primary use to be able to detect when the dropzone is activated by a file being dragged over the specified dropzone element.

A dropzone element id must be specified in the instance options for this to work.

#Examples

<div
    v-show="$upload.dropzone('gallery').active"
>
    Drop files anywhere here to begin upload.
</div>

#errors

@usage errors() @return Array

This returns the global error state for the upload instance.

This will not return the individual file errors.

#Examples

<div
    v-if="$upload.errors('gallery').length"
>
    <div
        v-for="error in $upload.errors('gallery')"
    >
        {{ error.code }}: {{ error.msg }}
    </div>
</div>

#option

@usage option() @return Void

Update an option without resetting the upload instance.

This is useful to update a url on the fly or to add some additional body parameters to the post request.

#Examples

methods: {
    upload() {
        this.$upload
            .option('gallery', 'url', 'users/1/gallery');

        this.$upload
            .option('gallery', 'body', {
                folder_id: 2
            });
    }
}