0.6.5 • Published 6 years ago

vuejs-uploader v0.6.5

Weekly downloads
230
License
MIT
Repository
github
Last release
6 years ago

Vuejs Uploader

Travis Build Version Coveralls github Downloads

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

npm install vuejs-uploader

Usage

Basic

<uploader end-point="http://localhost:5000"></uploader>

Multiple Files

<uploader end-point="http://localhost:5000" :multiple="true"></uploader>

Multipart upload, with custom Browse button using slot api

<uploader end-point="http://localhost:5000" :multipart="true">
    <button slot="browse-btn">Select File</button>
</uploader>

<uploader end-point="http://localhost:5000" :multipart="true">
    <img slot="browse-btn" src="someimg.jpg" />
</uploader>

Available props

PropTypeRequiredDefaultDescription
endPointStringyupServer end point to post requests
multipleBooleanTo allow multiple files to be added to the upload queue
multipartBooleanSend files larger than multipartChunkSize in parts
multipartChunkSizeNumber2097152Size of multipart chunks in bytes
maxUploadsNumber5Maximum number of file that can be added to the queue
maxThumbWidthNumber80Maximum width of preview image created
maxThumbHeightNumber80Maximum height of preview image created
acceptStringMime types to accept
userDefinedPropertiesArrayarray of objects defined with property and optional required properties
errorHandlerFunctionFunction passed in to handle http errors
headersObjectHeaders can be added to the http requests
disabledBooleanfalseDisable the uploader

Slots

Slot nameSingle file uploaderMulti file uploaderDescription
browse-btnXXProvide your own browse button html
clear-btnXProvide your own upload list clear button html
upload-btnXProvide your own upload list upload button html
extraXSlot 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.

chmod 777 server/uploads
cd server/php
php -S localhost:5000
0.6.5

6 years ago

0.6.4

6 years ago

0.6.3

6 years ago

0.6.2

6 years ago

0.6.1

6 years ago

0.6.0

6 years ago

0.5.0

6 years ago

0.4.0

6 years ago

0.3.4

6 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.12

7 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.27

7 years ago

0.0.26

7 years ago

0.0.25

7 years ago

0.0.24

7 years ago

0.0.23

7 years ago

0.0.22

7 years ago

0.0.21

7 years ago

0.0.20

7 years ago

0.0.19

7 years ago

0.0.18

7 years ago

0.0.17

7 years ago

0.0.16

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago