Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rowanwins/vue-file-picker
A fairly minimal file picker & drop area which aims to stay out of the way of your application.
https://github.com/rowanwins/vue-file-picker
Last synced: 28 days ago
JSON representation
A fairly minimal file picker & drop area which aims to stay out of the way of your application.
- Host: GitHub
- URL: https://github.com/rowanwins/vue-file-picker
- Owner: rowanwins
- Created: 2019-01-30T05:00:48.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-05T03:55:18.000Z (over 5 years ago)
- Last Synced: 2024-10-05T00:19:55.939Z (about 1 month ago)
- Language: Vue
- Homepage: https://rowanwins.github.io/vue-file-picker/
- Size: 261 KB
- Stars: 6
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## About
A fairly minimal file picker & drop area which aims to stay out of the way of your application.
[Demo here](https://rowanwins.github.io/vue-file-picker/)
We handle
- a html [file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
- a js [drag & drop area](https://developer.mozilla.org/en-US/docs/Web/Events/drop)
You handle
- What happens after files are recieved, eg
- uploading
- presentation of the UI
## Install
````
npm install vue-file-picker --save
````
## Usage
### Props
| Name | Type | Default | Description |
| ------------- | -------------- | --------- | ----- |
| id | string (**required**) | null | id of the wrapping div |
| accept | string [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | `*/*` | A string that defines the file types the file input should accept |
| allowMultiple | boolean [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) | false | Allows the user to select more than one file |
### Slots
| Name | Description |
| ------- | ------------- |
| icon | Something to display above the label, eg an `i` or `svg` |
| label | A string to display as the label |
### Events
| Name | Description |
| ------- | ------------- |
| vfp-file-added(FileList)| Triggered by the addition of a file/s, recieves an [FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList) as the argument. |