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!

!vue-full-screen-file-drop

Install

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

Usage

$3

`javascript
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:

`html

`

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.

`javascript
// 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
}
`

$3

| 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 |

$3

You can override the styles, see the css definitions here

$3

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

`html





`

Development

`bash


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
``