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.
This uploader will optionally upload files in multipart chunks. This get's around max upload sizes allowing you to upload large files.
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.
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
npm install vuejs-uploader
<uploader end-point="http://localhost:5000" :multiple="true"></uploader>
Multipart upload, with custom Browse button using
<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>
|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||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
|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|
|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|
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
Source Code: https://github.com/charliekassel/vuejs-uploader
In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.
There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.
Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.