vue-file-upload

File upload component

• drag and drop / file chooser
• multiple upload (except for IE9)
• add more files during upload
• overall progress bar
• no dependency

Browser support

Same browser support as Vue.js 2

Example

<template>
  <div>
    <upload url='/upload'></upload>
  </div>
</template>

Install

npm install --save @franck.freiburger/vue-file-upload

API

Properties

:url string

Target url for the uploaded files (post multipart/form-data).

:multiple boolean, default: false

Allow multiple files to be uploaded simultaneously.

:image boolean, default: false

Indicate that you wish to upload images.

:capture boolean, default: false

Indicates that the capture of media directly from the device's environment using a media capture mechanism is preferred. See capture attribute

:accept function(filename) returns boolean

Called before a file is about to be uploaded. Return false to reject the upload, otherwise return true.

filename: The filename (without path) of the file.

By default any file is accepted.

:done function(status, responseText, feedback)

Called when a file or a set of files has been uploaded.

status: HTTP status of the upload or undefined if no status is available (IE9).
responseText: reponse of the server.
feedback: function you can call to give a positive or negative (true/false) UI feedback about the upload.

By default, if the property is not defined, a positive feedback is send for HTTP status 2xx and 3xx

:data string

Extra data sent with files (name=data).

Slots

default slot

This slot is included at the center of the component.

exemple:

<upload url='/upload' image capture><i class="fa fa-camera fa-2x"></i></upload>

Credits

Franck Freiburger