\n select files\n select images\n select folder\n \n \n \n\n\n\n\n\n```\n\n## Components\n\n### Uploader\n\nRoot component.\n\n#### Props\n\n* `options {Object}`\n\n See [simple-uploader.js options](https://github.com/simple-uploader/Uploader#configuration).\n\n Besides, some other options are avaliable too:\n\n - `parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}`\n\n this function option to format the current file's time remaining value(seconds, number), you can return your language time remaining text, params:\n\n - `timeRemaining{Number}`, time remaining seconds\n\n - `parsedTimeRemaining{String}`, default shown time remaining text, you can use it like this:\n\n ```js\n parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {\n return parsedTimeRemaining\n .replace(/\\syears?/, '年')\n .replace(/\\days?/, '天')\n .replace(/\\shours?/, '小时')\n .replace(/\\sminutes?/, '分钟')\n .replace(/\\sseconds?/, '秒')\n }\n ```\n - `categoryMap {Object}`\n\n File category map, default:\n\n ```js\n {\n image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],\n video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],\n audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'],\n document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']\n }\n ```\n\n* `autoStart {Boolean}`\n\n Default `true`, Whether the file will be start uploading after it is added.\n\n* `fileStatusText {Object}`\n\n Default:\n ```js\n {\n success: 'success',\n error: 'error',\n uploading: 'uploading',\n paused: 'paused',\n waiting: 'waiting'\n }\n ```\n An object map for file status text.\n\n After 0.6.0, `fileStatusText` can be a function with params `(status, response = null)`, you can control the status text more flexible:\n\n ```js\n fileStatusText(status, response) {\n const statusTextMap = {\n uploading: 'uploading',\n paused: 'paused',\n waiting: 'waiting'\n }\n if (status === 'success' || status === 'error') {\n // only use response when status is success or error\n\n // eg:\n // return response data ?\n return response.data\n } else {\n return statusTextMap[status]\n }\n }\n ```\n\n#### Events\n\nSee [simple-uploader.js uploader/events](https://github.com/simple-uploader/Uploader#events)\n\n**Note:**\n\n* All events name will be transformed by [lodash.kebabCase](https://github.com/lodash/lodash/blob/master/kebabCase.js), eg: `fileSuccess` will be transformed to `file-success`\n\n* `catchAll` event will not be emited.\n\n* `file-added(file)`, file added event, this event is used for file validation. To reject this file you should set `file.ignored = true`.\n\n* `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`.\n\n#### Scoped Slots\n\n* `files {Array}`\n\n An array of files (no folders).\n\n* `fileList {Array}`\n\n An array of files and folders.\n\n* `started`\n\n Started uploading or not.\n\n#### Get `Uploader` instance\n\nYou can get it like this:\n\n```js\nconst uploaderInstance = this.$refs.uploader.uploader\n// now you can call all uploader methods\n// https://github.com/simple-uploader/Uploader#methods\nuploaderInstance.cancel()\n```\n\n### UploaderBtn\n\nSelect files button.\n\n#### Props\n\n* `directory {Boolean}`\n\n Default `false`, Support selecting Folder\n\n* `single {Boolean}`\n\n Default `false`, To prevent multiple file uploads if it is `true`.\n\n* `attrs {Object}`\n\n Default `{}`, Pass object to set custom attributes on input element.\n\n### UploaderDrop\n\nDroped files area.\n\n### UploaderList\n\nAn array of `Uploader.File` file(folder) objects added by the user, but it treated Folder as `Uploader.File` Object.\n\n#### Scoped Slots\n\n* `fileList {Array}`\n\n An array of files and folders.\n\n### UploaderFiles\n\nAn array of `Uploader.File` file objects added by the user.\n\n#### Scoped Slots\n\n* `files {Array}`\n\n An array of files (no folders).\n\n### UploaderUnsupport\n\nIt will be shown if the current browser do not support HTML5 File API.\n\n### UploaderFile\n\nFile item component.\n\n#### Props\n\n* `file {Uploader.File}`\n\n `Uploader.File` instance.\n\n* `list {Boolean}`\n\n It should be `true` if it is puted in `UploaderList`\n\n#### Scoped Slots\n\n* `file {Uploader.File}`\n\n `Uploader.File` instance.\n\n* `list {Boolean}`\n\n In `UploaderList` component or not.\n\n* `status {String}`\n\n Current status, the values is one of `success`, `error`, `uploading`, `paused`, `waiting`\n\n* `paused {Boolean}`\n\n Indicated if the file is paused.\n\n* `error {Boolean}`\n\n Indicated if the file has encountered an error.\n\n* `averageSpeed {Number}`\n\n Average upload speed, bytes per second.\n\n* `formatedAverageSpeed {String}`\n\n Formated average upload speed, eg: `3 KB / S`\n\n* `currentSpeed {Number}`\n\n Current upload speed, bytes per second.\n\n* `isComplete {Boolean}`\n\n Indicated whether the file has completed uploading and received a server response.\n\n* `isUploading {Boolean}`\n\n Indicated whether file chunks is uploading.\n\n* `size {Number}`\n\n Size in bytes of the file.\n\n* `formatedSize {Number}`\n\n Formated file size, eg: `10 KB`.\n\n* `uploadedSize {Number}`\n\n Size uploaded in bytes.\n\n* `progress {Number}`\n\n A number between 0 and 1 indicating the current upload progress of the file.\n\n* `progressStyle {String}`\n\n The file progress element's transform style, eg: `{transform: '-50%'}`.\n\n* `progressingClass {String}`\n\n The value will be `uploader-file-progressing` if the file is uploading.\n\n* `timeRemaining {Number}`\n\n Remaining time to finish upload file in seconds.\n\n* `formatedTimeRemaining {String}`\n\n Formated remaining time, eg: `3 miniutes`.\n\n* `type {String}`\n\n File type.\n\n* `extension {String}`\n\n File extension in lowercase.\n\n* `fileCategory {String}`\n\n File category, one of `folder`, `document`, `video`, `audio`, `image`, `unknown`.\n\n## Development\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\n[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat\n[npm-url]: https://npmjs.org/package/vue-simple-uploader\n[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat\n[downloads-url]: https://npmjs.org/package/vue-simple-uploader\n[juejin-image]: https://badge.juejin.im/entry/599dad0ff265da248b04d7b8/likes.svg?style=flat\n[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail\n","readmeFilename":"README.md"}