README

vue-drop-zone

A vue component for drag'n'drop upload using uppy.io.

Installation

yarn add @4tw/vue-drop-zone

Usage

Wrap the component you want to be droppable with the DropZone component. Use the v-model binding to display a list of all the files. The files list also includes the progess and other metadata.

<DropZone>
  <div
      id="this-is-droppable"
      v-model="files"></div>
</DropZone>
<ul>
  <li v-for="file in files">
    {{ file.name }}
  </li>
</ul>

import DropZone from '@4tw/vue-drop-zone'

{
  name: 'MyDropZone',
  data() {
    return { files: [] };
  },
  components: { DropZone }
}

Properties

endpoint[String:document.URL]: Describes the endpoint where the dropzone should upload the files to
uploader[Object:{ uploader:Class, options:Object }]: Describes the uploader to be used. Uppy already provides two uploaders for XHR: https://uppy.io/docs/xhr-upload/#Options or TUS: https://uppy.io/docs/tus/#Options.
options[Object:{}]:
- uppy[Object:{}] for the uppy client options (https://uppy.io/docs/uppy/#Options),
- preventUpload[Boolean:false] when set to true, the upload is not triggered automatically when dropping a file
v-model[Array:[]]: Use the v-model to have a list of uppy files in the current state (https://uppy.io/docs/uppy/#uppy-getFile-fileID)
file-browser[Boolean:false]: Define if the dropzone should also be clickable to allow the user to select the files using the native file browser.
multiple[Boolean:true]: Define if multiple files can be uploaded.

Uppy Client

The client sits on every drop-zone instance and can be retrieved using a ref:

<DropZone ref="dropzone" />

this.$refs.dropzone.client.uppy.pauseAll();
this.$refs.dropzone.client.uppy.retryAll();

See https://uppy.io/docs/uppy/#Methods for all the available methods. It is not recommended to mess with the plugins. Also try to avoid using close and reset. The state of the client is managed by the client itself.

Events

client-initialized: Triggers when the drop-zone client has been initialized. Use this event to customize the client.
entered: Triggers when the mouse pointer enters the dropping area
left: Triggers when the mouse poiter has left the dropping area
dropped: Triggers when the files are dropped
success: Triggers when the upload successfully finished
error(File file): Triggers when the upload fails. Also provides the file
upload(File[] files): Triggers when preventUpload is set to true and the upload would start. Also provides the files being uploaded that failed the first as an event argument.

Development

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Release

yarn run release

Usage no npm install needed!