Options

url

Default: null

This is required and sets the end point for the upload.

name

Default: 'file'

The "name" to use for the upload file.

body

Default: {}

Any additional form data to be sent with the upload.

onSelect

Default: null

Triggered when files are selected.

If there is an error as with max-file-select this will pass an additional error argument.

NOTE: This is a very special case with the file select error max since normally there will always be a file. So this error will not be put on the stack and should be dealt with independently.

onSelect(files, error) {
    if (error) {
        this.$emit('error', error);
    }
},

onError(file) {
    // this.$emit('error', file.error);
}

onStart

Default: null

Triggered once upload begins.

onQueue

Default: null

Triggered once a file is moved into queue.

onProgress

Default: null

Triggered once a file begins to upload.

onUpload

Default: null

Triggered once the file is uploaded but still waiting for response from server.

onError

Default: null

Triggered if file has an error (front or back end).

onSuccess

Default: null

Triggered when server sends back a success.

onComplete

Default: null

Triggered after either error or success.

onEnd

Default: null

Triggered when currently uploading files all complete.

parseErrors

Default: _parseErrors internal overridable function

Used to parse errors from server end.

It must return an array of objects in the format: [{code: 'someerror', msg: 'There was an error.'}]

http

Default: _http internal overridable function

By default the plugin "assumes" Vue.http from vue-resource is used.

However this can be easily overridden.

It contains five parameters: url, body, progress, success, error.

function _http(data) {
    this.Vue.http.post(data.url, data.body, {progress: data.progress}).then(data.success, data.error);
}

Example using Axios:

function _http(data) {
    axios.get(data.url)
      .then(data.success)
      .catch(data.error);
}
function _parseErrors(error) {
    // in this example, the backend is returning JSON with a 'detail' field
    if (error.response.data.detail) {
        return [{code: 'fileError', msg: error.response.data.detail}];
    }

    return [];
}

multiple

Default: false

For multiple file uploads this must be set to true.

accept

Default: '*/*'

Set accept file types attribute on input element.

maxFilesInProgress

Default: 2

Set the maximum number of uploads that can run in parallel when async is set to true.

startOnSelect

Default: true

To disable the upload from beginning automatically set this to false.

extensions

Default: ['jpeg', 'jpg', 'png', 'gif']

The set of valid extensions allowed for upload.

Set to false to ingore this check.

maxFilesSelect

Default: 4

The maximum number of files allowed for upload.

Note that this works in conjunction with currentFiles for a set maximum.

maxSizePerFile

Default: 1024 * 1024 * 2

Set the maximum size per file in bytes

dropzoneId

Default: null

You can set this to a DOM element ID to automatically assign the necessary drag and drop events to the element.

Important to note that (to be safe) the dropzone should always be unloaded when leaving the component it is called in.

created() {
    this.$upload.on('product-gallery', {
        multiple: true,
        dropzoneId: 'product-gallery-dropzone',
    });
},

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

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

LaraBlog © 2019