feat(file-uploader): finalize file uploader + add extension check

bimdata · Apr 8, 2021 · afa1a96 · afa1a96
1 parent 75d460d
commit afa1a96
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 30 deletions.
diff --git a/src/components/specific/files/file-upload-card/FileUploadCard.vue b/src/components/specific/files/file-upload-card/FileUploadCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="file-upload-card" :class="{ failed }">
     <div class="file-upload-card--left">
-      <FileIcon name="ifc" size="32" />
+      <FileIcon :name="fileExtension(file.name)" size="32" />
     </div>
     <div class="file-upload-card--center file-upload-card__info">
       <div class="file-upload-card__info__file-name">
@@ -58,7 +58,7 @@ import Uppy from "@uppy/core";
 import XHRUpload from "@uppy/xhr-upload";
 import { onMounted, reactive, ref } from "vue";
 import { useAuth } from "@/state/auth";
-import { formatBytes } from "@/utils/files";
+import { fileExtension, formatBytes } from "@/utils/files";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
@@ -82,7 +82,7 @@ export default {
       required: true
     }
   },
-  emits: ["cancel", "error", "success"],
+  emits: ["upload-completed", "upload-canceled", "upload-failed"],
   setup(props, { emit }) {
     const { accessToken } = useAuth();
 
@@ -115,12 +115,22 @@ export default {
     uppy.on("upload-error", () => {
       uploading.value = false;
       failed.value = true;
-      emit("error");
-    });
-    uppy.on("complete", () => {
-      uploading.value = false;
-      emit("success");
+      emit("upload-failed");
     });
+    uppy.on(
+      "complete",
+      ({
+        successful: [
+          {
+            response: { body: document }
+          }
+        ]
+      }) => {
+        uploading.value = false;
+        uppy.reset(); // reset Uppy instance
+        emit("upload-completed", document);
+      }
+    );
 
     const progress = reactive({
       percentage: 0,
@@ -144,7 +154,7 @@ export default {
       uppy.cancelAll();
       uploading.value = false;
       canceled.value = true;
-      emit("cancel");
+      emit("upload-canceled");
     };
 
     onMounted(() => {
@@ -163,6 +173,7 @@ export default {
       uploading,
       // Methods
       cancelUpload,
+      fileExtension,
       formatBytes
     };
   }

diff --git a/src/components/specific/files/project-file-uploader/ProjectFileUploader.vue b/src/components/specific/files/project-file-uploader/ProjectFileUploader.vue
@@ -7,9 +7,9 @@
           :key="i"
           :project="project"
           :file="file"
-          @error="clean(i, 5000)"
-          @cancel="clean(i, 5000)"
-          @success="onSuccess(i)"
+          @upload-completed="onSuccess(i, $event)"
+          @upload-canceled="clean(i, 6000)"
+          @upload-failed="clean(i, 12000)"
         />
       </transition-group>
     </div>
@@ -48,6 +48,7 @@
           ref="fileInput"
           type="file"
           multiple
+          :accept="allowedFileTypes.join(',')"
           @change="uploadFiles"
         />
       </BIMDataButton>
@@ -57,6 +58,7 @@
 
 <script>
 import { ref } from "vue";
+import { fileExtension } from "@/utils/files";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
@@ -72,6 +74,14 @@ export default {
     project: {
       type: Object,
       required: true
+    },
+    allowedFileTypes: {
+      type: Array,
+      default: () => []
+    },
+    forbiddenFileTypes: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ["close", "file-uploaded"],
@@ -92,16 +102,33 @@ export default {
         // Files from input
         files = event.target.files;
       }
-      filesToUpload.value = filesToUpload.value.concat(Array.from(files));
+      files = Array.from(files).filter(file => {
+        if (props.allowedFileTypes.length > 0) {
+          // Only keep allowed files
+          return (
+            props.allowedFileTypes.includes(file.type) ||
+            props.allowedFileTypes.includes("." + fileExtension(file.name))
+          );
+        }
+        if (props.forbiddenFileTypes.length > 0) {
+          // Discard forbidden files
+          return !(
+            props.forbiddenFileTypes.includes(file.type) ||
+            props.forbiddenFileTypes.includes("." + fileExtension(file.name))
+          );
+        }
+        return true;
+      });
+      filesToUpload.value = filesToUpload.value.concat(files);
     };
 
-    const onSuccess = index => {
-      clean(index, 2000);
-      emit("file-uploaded");
+    const onSuccess = (index, document) => {
+      clean(index, 3000);
+      emit("file-uploaded", document);
     };
 
-    const clean = (index, timeout = 100) => {
-      setTimeout(() => filesToUpload.value.splice(index, 1), timeout);
+    const clean = (index, delay = 100) => {
+      setTimeout(() => filesToUpload.value.splice(index, 1), delay);
     };
 
     const close = () => {
@@ -113,7 +140,7 @@ export default {
       // References
       fileInput,
       filesToUpload,
-      //Methods
+      // Methods
       clean,
       close,
       onSuccess,

diff --git a/src/components/specific/models/model-status-badge/ModelStatusBadge.vue b/src/components/specific/models/model-status-badge/ModelStatusBadge.vue
@@ -29,7 +29,7 @@ export default {
     }
   },
   setup(props) {
-    const { fetchModelByID } = useModels();
+    const { fetchModelByID, softUpdateModels } = useModels();
 
     const statusName = ref("");
     const statusIcon = ref("");
@@ -70,7 +70,7 @@ export default {
             MODEL_STATUS.IN_PROGRESS !== model.status
           ) {
             clearInterval(checkInterval);
-            setStatus(model.status);
+            softUpdateModels(model);
           }
         }, 2000);
       }

diff --git a/src/components/specific/spaces/space-card-action-menu/SpaceCardActionMenu.vue b/src/components/specific/spaces/space-card-action-menu/SpaceCardActionMenu.vue
@@ -38,7 +38,7 @@
             <BIMDataButton ghost squared @click="openUpdateForm">
               {{ $t("Spaces.SpaceActionMenu.rename") }}
             </BIMDataButton>
-            <SpaceImageInput :space="space" @success="closeMenu" />
+            <SpaceImageInput :space="space" @upload-completed="closeMenu" />
             <BIMDataButton ghost squared @click="removeImage">
               {{ $t("Spaces.SpaceActionMenu.removeImage") }}
             </BIMDataButton>

diff --git a/src/components/specific/spaces/space-image-input/SpaceImageInput.vue b/src/components/specific/spaces/space-image-input/SpaceImageInput.vue
@@ -30,7 +30,7 @@ export default {
       required: true
     }
   },
-  emits: ["success", "error"],
+  emits: ["upload-completed", "upload-failed"],
   setup(props, { emit }) {
     const { accessToken } = useAuth();
     const { softUpdateSpace } = useSpaces();
@@ -61,8 +61,9 @@ export default {
     uppy.on("file-added", () => {
       loading.value = true;
     });
-    uppy.on("upload-error", (file, error) => {
-      emit("error", error);
+    uppy.on("upload-error", () => {
+      loading.value = false;
+      emit("upload-failed");
     });
     uppy.on(
       "complete",
@@ -77,7 +78,7 @@ export default {
       }) => {
         softUpdateSpace({ ...props.space, image });
         uppy.reset(); // reset Uppy instance
-        emit("success");
+        emit("upload-completed");
       }
     );
 

diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
@@ -136,6 +136,7 @@ export default {
     filesTabLabel: "Files",
     bcfTabLabel: "BCF",
     addIFC: "Add an IFC",
+    closeFileUploader: "Close",
     ProjectModelsOverview: {
       title: "Project Models Overview"
     },

diff --git a/src/i18n/lang/fr.js b/src/i18n/lang/fr.js
@@ -139,6 +139,7 @@ export default {
     filesTabLabel: "GED",
     bcfTabLabel: "BCF",
     addIFC: "Ajouter un IFC",
+    closeFileUploader: "Fermer",
     ProjectModelsOverview: {
       title: "Project Models Overview"
     },

diff --git a/src/utils/files.js b/src/utils/files.js
@@ -1,3 +1,8 @@
+function fileExtension(fileName) {
+  const parts = fileName.split(".");
+  return parts.length > 1 ? parts[parts.length - 1] : "";
+}
+
 function formatBytes(bytes) {
   if (bytes / 1000000 >= 1) {
     return `${Number(bytes / 1000000).toFixed(2)} MB`;
@@ -8,4 +13,4 @@ function formatBytes(bytes) {
   return `${bytes} B`;
 }
 
-export { formatBytes };
+export { fileExtension, formatBytes };
diff --git a/src/views/project-board/ProjectBoard.vue b/src/views/project-board/ProjectBoard.vue
@@ -14,9 +14,22 @@
         />
       </template>
       <template #right>
-        <BIMDataButton color="primary" fill radius @click="toggleFileUploader">
-          <BIMDataIcon name="plus" size="xxxs" />
-          <span>{{ $t("ProjectBoard.addIFC") }}</span>
+        <BIMDataButton
+          width="120px"
+          :color="showFileUploader ? 'tertiary-darkest' : 'primary'"
+          fill
+          radius
+          @click="toggleFileUploader"
+        >
+          <BIMDataIcon
+            :name="showFileUploader ? 'close' : 'plus'"
+            size="xxxs"
+          />
+          <span>{{
+            showFileUploader
+              ? $t("ProjectBoard.closeFileUploader")
+              : $t("ProjectBoard.addIFC")
+          }}</span>
         </BIMDataButton>
       </template>
     </ViewHeader>
@@ -27,6 +40,7 @@
           v-show="showFileUploader"
           class="project-board-view__container__block--upload"
           :project="project"
+          :allowedFileTypes="['.ifc', '.ifczip']"
           @file-uploaded="reloadModels"
           @close="closeFileUploader"
         />