Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charliekassel/vuejs-uploader
Vue multipart file uploader
https://github.com/charliekassel/vuejs-uploader
multipart-uploads uploader vue
Last synced: 9 days ago
JSON representation
Vue multipart file uploader
- Host: GitHub
- URL: https://github.com/charliekassel/vuejs-uploader
- Owner: charliekassel
- License: mit
- Created: 2017-05-25T13:16:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-07-02T08:53:28.000Z (over 3 years ago)
- Last Synced: 2024-04-24T13:55:06.825Z (7 months ago)
- Topics: multipart-uploads, uploader, vue
- Language: Vue
- Size: 281 KB
- Stars: 63
- Watchers: 3
- Forks: 19
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vuejs Uploader
[](https://travis-ci.org/charliekassel/vuejs-uploader)
[](https://www.npmjs.com/package/vuejs-uploader)
[](https://coveralls.io/github/charliekassel/vuejs-uploader?branch=master)
[](https://www.npmjs.com/package/vuejs-uploader)
## Multipart uploader Vue component.
This uploader will optionally upload files in multipart chunks.
This get's around max upload sizes allowing you to upload large files.
If prop `multiple` is true a file list is rendered on selecting files otherwise file upload will begin on selection.
Drag is supported and when files are dragged over the uploader the class `vuejs-uploader--dragged` is added to the root element.
### Remaining upload parts
For resumable uploads we need to know what parts have already been uploaded so we don't bother re uploading them.
This component makes use of a response property that returns an array of parts remaining that still need to be uploaded.
If this property is in the response it will remove any parts in the queue that are not in that array.
To make use of this property it expects to be formatted as `meta.remainingParts`.
## Install
```bash
npm install vuejs-uploader
```
## Usage
Basic
```html
```
Multiple Files
```html
```
Multipart upload, with custom Browse button using `slot` api
```html
Select File
```
## Available props
|Prop |Type |Required|Default|Description|
|---------------------|--------|--------|-------|----------|
|endPoint |String |yup | |Server end point to post requests|
|multiple |Boolean | | |To allow multiple files to be added to the upload queue|
|multipart |Boolean | | |Send files larger than `multipartChunkSize` in parts|
|multipartChunkSize |Number | |2097152|Size of multipart chunks in bytes|
|maxUploads |Number | |5 |Maximum number of file that can be added to the queue|
|maxThumbWidth |Number | |80 |Maximum width of preview image created|
|maxThumbHeight |Number | |80 |Maximum height of preview image created|
|accept |String | | |Mime types to accept|
|userDefinedProperties|Array | | |array of objects defined with `property` and optional `required` properties|
|errorHandler |Function| | |Function passed in to handle http errors|
|headers |Object | | |Headers can be added to the http requests|
|disabled |Boolean | |false |Disable the uploader|
## Slots
|Slot name |Single file uploader|Multi file uploader|Description|
|----------|:------------------:|:-----------------:|-----------|
|browse-btn| X | X |Provide your own _browse_ button html|
|clear-btn | | X |Provide your own upload list _clear_ button html|
|upload-btn| | X |Provide your own upload list _upload_ button html|
|extra | | X |Slot to add extra form elements to send along with the upload|
## Demo
To demo the uploader you need a server, there is a simple php example
in `server/php` that uses php's built in server.
Other examples will follow.
```bash
chmod 777 server/uploads
cd server/php
php -S localhost:5000
```