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