Vue Full Screen File Drop

a Vue.js file drop component. Minimal API, you decide what happens after files are dropped.

Background

Demo: Try it out!

Install

npm install --save vue-full-screen-file-drop

Usage

Basic Usage

import VueFullScreenFileDrop from 'vue-full-screen-file-drop';
import 'vue-full-screen-file-drop/dist/vue-full-screen-file-drop.css';

Then in your template:

<VueFullScreenFileDrop @drop='onDrop'>

The @drop event has is passed two args.

• formData - a FormData object that can be used directly to post to server as multipart form. The default field for form is upload by default. This can be changed via a prop.
• files - a FileList object that is part of the DataTransfer api. Note this is array-like, so may not respond to to typical array methods directly.

// Example event handler
onDrop(formData, files) {
  console.log(formData); // Can be posted to server
  console.log(files);    // Can get access to things like file name and size
}

Component Props

| Name | Type | Default | Description | |---------------|--------|-------------|----------------------------------------------------| | formFieldName | String | upload | Form field containing files in the FormData object | | text | String | Upload File | Text shown in the drop zone area |

Style Overrides

You can override the styles, see the css definitions here

Custom Slot

If you want to completely define your own drop zone area, this is supported via a slot. You can see an example here

<VueFullScreenFileDrop>
  <div>Some custom content</div>
</VueFullScreenFileDrop>

Development

# Build main library

npm install
npm run build

# Run demo site in development mode
# Changes picked up from src/VueFullScreenDrop.vue

cd demo
npm install
npm run dev

# Build production demo site
# (build main library first if you want to see updates)

npm install
npm run demo:build

# Testing
npm run test

# Auto watch tests
npm run test:watch