diff --git a/README.md b/README.md index a235097..a63e81d 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ to add to the docs? * [XHR Adapter Options](#adapter-options-xhruploadadapter) - Default adapter options * [Component Events](#events) - Events emitted from VueTransmit +* [File Statuses](#file-statuses) - enum of `file.status` values * [Slots](#slots) - Component slots * [Slot: default](#default-slotsdefault) - default slot * [Slot: `"files"`](#files-scoped-slotsfiles) - files slot @@ -262,6 +263,28 @@ vue-transmit | `max-files-reached` | `files: VTransmitFile[]` | Fired when the total accepted files on the instance exceeds the max files prop. | | `queue-complete` | `file: VTransmitFile` | Fired once all added files have uploaded and the queue has been flushed. | +## File Statuses + +VTransmitFiles have a status property used to indicate its place in the upload +cycle. Note that `Accepted` is an alias of `Queued` since the is the same place +in the lifecycle (inherited from Dropzone lifecycle). This may change in a +future version for more clarity. Also note that `Rejected` is not a status. +Accepted/rejected is derived from the `file.accepted` boolean property. + +```ts +enum UploadStatuses { + None = "", + Added = "added", + Queued = "queued", + Accepted = "queued", + Uploading = "uploading", + Canceled = "canceled", + Error = "error", + Timeout = "timeout", + Success = "success", +} +``` + ## Slots ### Default (`$slots.default`) @@ -281,8 +304,12 @@ interface FilesSlotProps { addedFiles: VTransmitFile[]; queuedFiles: VTransmitFile[]; uploadingFiles: VTransmitFile[]; + canceledFiles: VTransmitFile[]; + failedFiles: VTransmitFile[]; + timeoutFiles: VTransmitFile[]; + successfulFiles: VTransmitFile[]; activeFiles: VTransmitFile[]; - isUploading: Boolean; + isUploading: boolean; } ``` diff --git a/src/components/VueTransmit.vue b/src/components/VueTransmit.vue index 7c5c200..19d1458 100644 --- a/src/components/VueTransmit.vue +++ b/src/components/VueTransmit.vue @@ -355,21 +355,33 @@ export default Vue.extend({ multiple(): boolean { return this.maxFiles === null || this.maxFiles > 1; }, - acceptedFiles(): VTransmitFile[] { - return this.files.filter(f => f.accepted); - }, - rejectedFiles(): VTransmitFile[] { - return this.files.filter(f => !f.accepted); - }, addedFiles(): VTransmitFile[] { return this.getFilesWithStatus(UploadStatuses.Added); }, queuedFiles(): VTransmitFile[] { return this.getFilesWithStatus(UploadStatuses.Queued); }, + acceptedFiles(): VTransmitFile[] { + return this.files.filter(f => f.accepted); + }, + rejectedFiles(): VTransmitFile[] { + return this.files.filter(f => !f.accepted); + }, uploadingFiles(): VTransmitFile[] { return this.getFilesWithStatus(UploadStatuses.Uploading); }, + canceledFiles(): VTransmitFile[] { + return this.getFilesWithStatus(UploadStatuses.Canceled); + }, + failedFiles(): VTransmitFile[] { + return this.getFilesWithStatus(UploadStatuses.Error); + }, + timeoutFiles(): VTransmitFile[] { + return this.getFilesWithStatus(UploadStatuses.Timeout); + }, + successfulFiles(): VTransmitFile[] { + return this.getFilesWithStatus(UploadStatuses.Success); + }, activeFiles(): VTransmitFile[] { return this.getFilesWithStatus( UploadStatuses.Uploading, @@ -400,6 +412,10 @@ export default Vue.extend({ addedFiles: VTransmitFile[]; queuedFiles: VTransmitFile[]; uploadingFiles: VTransmitFile[]; + canceledFiles: VTransmitFile[]; + failedFiles: VTransmitFile[]; + timeoutFiles: VTransmitFile[]; + successfulFiles: VTransmitFile[]; activeFiles: VTransmitFile[]; isUploading: boolean; } { @@ -410,6 +426,10 @@ export default Vue.extend({ addedFiles: this.addedFiles, queuedFiles: this.queuedFiles, uploadingFiles: this.uploadingFiles, + canceledFiles: this.canceledFiles, + failedFiles: this.failedFiles, + timeoutFiles: this.timeoutFiles, + successfulFiles: this.successfulFiles, activeFiles: this.activeFiles, isUploading: this.isUploading, }; @@ -533,6 +553,9 @@ export default Vue.extend({ } } }, + removeFilesWithStatus(...statuses: UploadStatuses[]): void { + this.getFilesWithStatus(...statuses).map(this.removeFile); + }, removeAllFiles(cancelInProgressUploads = false): void { let f: VTransmitFile; for (f of this.files) {