feat(component): adds removeFilesWithStatus method

alexsasharegan · Mar 1, 2018 · 6654080 · 6654080
1 parent 06e7f50
commit 6654080
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git 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
@@ -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) {