Gathering detailed insights and metrics for js-vue-simple-uploader
Gathering detailed insights and metrics for js-vue-simple-uploader
Gathering detailed insights and metrics for js-vue-simple-uploader
Gathering detailed insights and metrics for js-vue-simple-uploader
npm install js-vue-simple-uploader
Typescript
Module System
Min. Node Version
Node Version
NPM Version
Vue (57.5%)
JavaScript (42.02%)
HTML (0.48%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
2 Stars
113 Commits
8 Branches
1 Contributors
Updated on Oct 25, 2022
Latest Version
0.7.36
Package Id
js-vue-simple-uploader@0.7.36
Unpacked Size
713.77 kB
Size
346.45 kB
File Count
31
NPM Version
8.1.2
Node Version
16.13.2
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
1
45
A Vue.js upload component powered by simple-uploader.js
File
1npm install vue-simple-uploader --save
1import Vue from 'vue' 2import uploader from 'vue-simple-uploader' 3import App from './App.vue' 4 5Vue.use(uploader) 6 7/* eslint-disable no-new */ 8new Vue({ 9 render(createElement) { 10 return createElement(App) 11 } 12}).$mount('#app')
1<template> 2 <uploader :options="options" class="uploader-example"> 3 <uploader-unsupport></uploader-unsupport> 4 <uploader-drop> 5 <p>Drop files here to upload or</p> 6 <uploader-btn>select files</uploader-btn> 7 <uploader-btn :attrs="attrs">select images</uploader-btn> 8 <uploader-btn :directory="true">select folder</uploader-btn> 9 </uploader-drop> 10 <uploader-list></uploader-list> 11 </uploader> 12</template> 13 14<script> 15 export default { 16 data () { 17 return { 18 options: { 19 // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 20 target: '//localhost:3000/upload', 21 testChunks: false 22 }, 23 attrs: { 24 accept: 'image/*' 25 } 26 } 27 } 28 } 29</script> 30 31<style> 32 .uploader-example { 33 width: 880px; 34 padding: 15px; 35 margin: 40px auto 0; 36 font-size: 12px; 37 box-shadow: 0 0 10px rgba(0, 0, 0, .4); 38 } 39 .uploader-example .uploader-btn { 40 margin-right: 4px; 41 } 42 .uploader-example .uploader-list { 43 max-height: 440px; 44 overflow: auto; 45 overflow-x: hidden; 46 overflow-y: auto; 47 } 48</style>
Root component.
options {Object}
See simple-uploader.js options.
Besides, some other options are avaliable too:
parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}
this function option to format the current file's time remaining value(seconds, number), you can return your language time remaining text, params:
timeRemaining{Number}
, time remaining seconds
parsedTimeRemaining{String}
, default shown time remaining text, you can use it like this:
1parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) { 2 return parsedTimeRemaining 3 .replace(/\syears?/, '年') 4 .replace(/\days?/, '天') 5 .replace(/\shours?/, '小时') 6 .replace(/\sminutes?/, '分钟') 7 .replace(/\sseconds?/, '秒') 8}
categoryMap {Object}
File category map, default:
1{ 2 image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'], 3 video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'], 4 audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'], 5 document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx'] 6}
autoStart {Boolean}
Default true
, Whether the file will be start uploading after it is added.
fileStatusText {Object}
Default:
1{ 2 success: 'success', 3 error: 'error', 4 uploading: 'uploading', 5 paused: 'paused', 6 waiting: 'waiting' 7}
An object map for file status text.
After 0.6.0, fileStatusText
can be a function with params (status, response = null)
, you can control the status text more flexible:
1fileStatusText(status, response) { 2 const statusTextMap = { 3 uploading: 'uploading', 4 paused: 'paused', 5 waiting: 'waiting' 6 } 7 if (status === 'success' || status === 'error') { 8 // only use response when status is success or error 9 10 // eg: 11 // return response data ? 12 return response.data 13 } else { 14 return statusTextMap[status] 15 } 16}
See simple-uploader.js uploader/events
Note:
All events name will be transformed by lodash.kebabCase, eg: fileSuccess
will be transformed to file-success
catchAll
event will not be emited.
file-added(file)
, file added event, this event is used for file validation. To reject this file you should set file.ignored = true
.
files-added(files, fileList)
, files added event, this event is used for files validation. To reject these files you should set files.ignored = true
or fileList.ignored = true
.
files {Array}
An array of files (no folders).
fileList {Array}
An array of files and folders.
started
Started uploading or not.
Uploader
instanceYou can get it like this:
1const uploaderInstance = this.$refs.uploader.uploader 2// now you can call all uploader methods 3// https://github.com/simple-uploader/Uploader#methods 4uploaderInstance.cancel()
Select files button.
directory {Boolean}
Default false
, Support selecting Folder
single {Boolean}
Default false
, To prevent multiple file uploads if it is true
.
attrs {Object}
Default {}
, Pass object to set custom attributes on input element.
Droped files area.
An array of Uploader.File
file(folder) objects added by the user, but it treated Folder as Uploader.File
Object.
fileList {Array}
An array of files and folders.
An array of Uploader.File
file objects added by the user.
files {Array}
An array of files (no folders).
It will be shown if the current browser do not support HTML5 File API.
File item component.
file {Uploader.File}
Uploader.File
instance.
list {Boolean}
It should be true
if it is puted in UploaderList
file {Uploader.File}
Uploader.File
instance.
list {Boolean}
In UploaderList
component or not.
status {String}
Current status, the values is one of success
, error
, uploading
, paused
, waiting
paused {Boolean}
Indicated if the file is paused.
error {Boolean}
Indicated if the file has encountered an error.
averageSpeed {Number}
Average upload speed, bytes per second.
formatedAverageSpeed {String}
Formated average upload speed, eg: 3 KB / S
currentSpeed {Number}
Current upload speed, bytes per second.
isComplete {Boolean}
Indicated whether the file has completed uploading and received a server response.
isUploading {Boolean}
Indicated whether file chunks is uploading.
size {Number}
Size in bytes of the file.
formatedSize {Number}
Formated file size, eg: 10 KB
.
uploadedSize {Number}
Size uploaded in bytes.
progress {Number}
A number between 0 and 1 indicating the current upload progress of the file.
progressStyle {String}
The file progress element's transform style, eg: {transform: '-50%'}
.
progressingClass {String}
The value will be uploader-file-progressing
if the file is uploading.
timeRemaining {Number}
Remaining time to finish upload file in seconds.
formatedTimeRemaining {String}
Formated remaining time, eg: 3 miniutes
.
type {String}
File type.
extension {String}
File extension in lowercase.
fileCategory {String}
File category, one of folder
, document
, video
, audio
, image
, unknown
.
1# install dependencies 2npm install 3 4# serve with hot reload at localhost:8080 5npm run dev 6 7# build for production with minification 8npm run build 9 10# build for production and view the bundle analyzer report 11npm run build --report
No vulnerabilities found.
No security vulnerabilities found.