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