Examples

Single File (Profile Avatar)

A simple profile avatar upload with button, state and errors.

<img :src="$auth.user().avatar || '//www.gravatar.com/avatar/?d=mysteryman&s=200'" />

<div>
    <button v-on:click="$upload.select('profile-avatar')" :disabled="$upload.meta('profile-avatar').state === 'sending'">
        <span v-show="$upload.meta('profile-avatar').state === 'sending'">Updating...</span>
        <span v-show="!$upload.meta('profile-avatar').state === 'sending'">Update Photo</span>
    </button>
</div>

<div v-if="$upload.files('profile-avatar').error.length">
    {{ $upload.files('profile-avatar').error[0].errors[0].msg }}
</div>
created() {
    this.$upload.on('profile-avatar', {
        onSuccess(res) {
            this.$msgbag.success('Avatar uploaded successfully.');
            this.$auth.user(res.data.data);
        },
        onError() {
            this.$msgbag.error('Error uploading avatar.');
        }
    });
},

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

Multiple File (With Dropzone)

Multiple file upload with async, dropzone and file list.

<div>
    <button id="product-gallery-dropzone" v-on:click="$upload.select('product-gallery')" :disabled="$upload.meta('product-gallery').state === 'sending'">
        <span v-show="$upload.meta('product-gallery').state === 'sending'">Uploading...</span>
        <span v-show="!$upload.meta('product-gallery').state === 'sending'">Select Photos</span>
    </button>

    <button v-on:click="$upload.reset('product-gallery')" :disabled="$upload.meta('product-gallery').state === 'sending'">
        Clear
    </button>
</div>

<div class="progress">
    <div class="progress-bar" :style="'width: ' + $upload.meta('product-gallery').percentComplete + '%;'">
        {{ $upload.meta('product-gallery').percentComplete }}% Complete
    </div>
</div>

<div v-if="$upload.errors('product-gallery').length" class="text-danger">
    {{ $upload.errors('product-gallery')[0].msg }}
</div>

<div>
    <div v-if="!$upload.files('product-gallery').all.length">
        No uploads here yet.
    </div>

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

        <div class="progress">
            <div class="progress-bar" :style="'width: ' + file.percentComplete + '%;'">
                {{ file.percentComplete }}%
            </div>
        </div>
    </div>

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

    <div v-for="file in $upload.files('product-gallery').success">
        {{ file.name }}
        <br/>
        Uploaded successfully.
    </div>

    <div v-for="file in $upload.files('product-gallery').error">
        {{ file.name }}
        <br/>
        {{ file.errors[0].msg }}
    </div>
</div>
created() {
    this.$upload.on('product-gallery', {
        maxFilesSelect: 20,
        dropzoneId: 'product-gallery-dropzone',
        multiple: true,
        onStart() {
             this.$toggle.show('product:media:uploads');
        },
        onSuccess(res) {
            this.product.gallery.push(res.data.data);
        },
        onEnd() {
            this.$msgbag.success('File upload complete.');
        }
    });
},

mounted() {
    this.$upload.option('product-gallery', 'url', 'products/' + this.product.id + '/gallery');
},

beforeDestroy() {
    this.$upload.off('product-gallery');
},

LaraBlog © 2019