Home Posts GitHub Menu

Vue Upload Methods Examples


This is used to create a new "upload" instance.

  • An upload instance is tracked in a global state.
  • Existing states will not be overwritten so you can call on multiple times without worry (use option for updating options).
  • It will always contain the current components instance when using this.

Typically a combination of on and off will be used. It's mostly semantic but it's nice to keep the separation.

The bind option can also be used to re-bind the instance to the current context.

created() {
    this.$upload.on('profile-avatar', {
        onSuccess(res) {
            this.$msgbag.success('Avatar uploaded successfully.');
        onError() {
            this.$msgbag.error('Error uploading avatar.');

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


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

Note it should be fine to just use on without problems, but this is here as a safety and for performance issues.


This will completely reset the instance.

Also check the on option for more details.

  • An instance using on must be created first.
mounted() {

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

For instance a "clear" button.

<button v-on:click="$upload.reset('product-gallery')">


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

  • It's important to note that by default the uploads will start once files are selected.
  • Set startOnSelect option to false to prevent uploads from beginning after selection.
<button v-on:click="$upload.select('brand-logo')">
    Update Photo


This option is to be used in conjunction with the startOnSelect option when it's set to false.

  • It allows manual triggering of the upload.
<img :src="brandLogo" />

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

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


Contains arrays of files currently being processed.

  • It contains multiple queues that can be used to display file data for viewing.
  • The queues are all, queue, progress, upload, success, error.
  • The array will not reset after completing (use reset and onEnd for that).
<div v-for="file in $upload.files('product-gallery').progress">
    {{ file.name }}: {{ file.percentComplete }}%

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


Fetches some meta info about the current uploads.

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

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

It contains the following properties:


It will be either ready, uploading, complete.


Keeps track of progress for the currently uploading files.


Shortcut for meta.percentComplete.



Shortcut for meta.state.



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

  • Primarily used to be able to trigger an overlay when using a drop container.
  • This does NOT use the "dropzone" library.
<div v-show="$upload.dropzone('product-gallery').active">
    Drop files anywhere here to begin upload.


This returns the global error state for the upload instance.

  • This will not return the individual file errors.
<div v-if="$upload.errors('product-gallery').length">
    <div v-for="error in $upload.errors('product-gallery')">
        {{ error.code }}: {{ error.msg }}


Update an option without resetting the uploads.

  • Useful if a url or body param needs to be changed.
$upload.option('product-gallery', 'key', 'val');