From 6ef006a8faeaa392267546d2b2382355d50aac12 Mon Sep 17 00:00:00 2001
From: NicolasRichel <nicolas@bimdata.io>
Date: Wed, 2 Jun 2021 14:30:39 +0200
Subject: [PATCH] feat(files-manager): add file-upload feature + some fixes on
 file management

---
 .../generic/generic-table/GenericTable.scss   |   8 +
 .../generic/generic-table/GenericTable.vue    |   8 +
 .../generic/mapbox-wrapper/MapboxWrapper.vue  |   2 +-
 .../file-upload-button/FileUploadButton.vue   |  61 +-----
 .../files/files-manager/FilesManager.vue      |  37 +++-
 .../files-action-bar/FilesActionBar.vue       |   8 +-
 .../specific/files/files-table/FilesTable.vue |  67 ++++++-
 .../file-actions-cell/FileActionsCell.vue     |  18 +-
 .../file-upload-cell/FileUploadCell.scss      |  64 ++++++
 .../file-upload-cell/FileUploadCell.vue       | 182 ++++++++++++++++++
 .../models/models-card/ModelsCard.vue         |  11 +-
 .../ModelsCardModelPreview.vue                |   8 +-
 .../models/models-overview/ModelsOverview.vue |  14 +-
 src/state/files.js                            |  12 +-
 src/utils/file-structure.js                   |   4 +-
 .../project-files/ProjectFiles.vue            |  22 ++-
 .../project-overview/ProjectOverview.vue      |   3 +
 17 files changed, 425 insertions(+), 104 deletions(-)
 create mode 100644 src/components/specific/files/files-table/file-upload-cell/FileUploadCell.scss
 create mode 100644 src/components/specific/files/files-table/file-upload-cell/FileUploadCell.vue

diff --git a/src/components/generic/generic-table/GenericTable.scss b/src/components/generic/generic-table/GenericTable.scss
index 44a034af8..4535de91f 100644
--- a/src/components/generic/generic-table/GenericTable.scss
+++ b/src/components/generic/generic-table/GenericTable.scss
@@ -26,6 +26,14 @@
       th {
         font-weight: bold;
         color: $color-primary;
+
+        &.cell-sub-header {
+          min-height: 0;
+          padding: 0;
+          text-align: left;
+          font-weight: normal;
+          color: $color-tertiary-darkest;
+        }
       }
 
       td {
diff --git a/src/components/generic/generic-table/GenericTable.vue b/src/components/generic/generic-table/GenericTable.vue
index 141d35040..2b62c2e91 100644
--- a/src/components/generic/generic-table/GenericTable.vue
+++ b/src/components/generic/generic-table/GenericTable.vue
@@ -30,6 +30,14 @@
               </th>
             </template>
           </tr>
+          <tr key="head-row-1">
+            <th
+              class="cell-sub-header"
+              :colspan="columns.length + (selectable ? 1 : 0)"
+            >
+              <slot name="sub-header"></slot>
+            </th>
+          </tr>
         </thead>
         <tbody>
           <template
diff --git a/src/components/generic/mapbox-wrapper/MapboxWrapper.vue b/src/components/generic/mapbox-wrapper/MapboxWrapper.vue
index f6e7ca0cd..af23cd183 100644
--- a/src/components/generic/mapbox-wrapper/MapboxWrapper.vue
+++ b/src/components/generic/mapbox-wrapper/MapboxWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mapbox-wrapper" id="mapbox-container">
+  <div id="mapbox-container" class="mapbox-wrapper">
     <!-- Mapbox will be displayed here -->
   </div>
 </template>
diff --git a/src/components/specific/files/file-upload-button/FileUploadButton.vue b/src/components/specific/files/file-upload-button/FileUploadButton.vue
index a3b48bdaf..ef5579dd7 100644
--- a/src/components/specific/files/file-upload-button/FileUploadButton.vue
+++ b/src/components/specific/files/file-upload-button/FileUploadButton.vue
@@ -15,10 +15,7 @@
 </template>
 
 <script>
-import Uppy from "@uppy/core";
-import XHRUpload from "@uppy/xhr-upload";
 import { ref } from "vue";
-import { useAuth } from "@/state/auth";
 // 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";
@@ -36,69 +33,21 @@ export default {
     height: {
       type: String,
       default: "32px"
-    },
-    project: {
-      type: Object,
-      required: true
-    },
-    folder: {
-      type: Object
     }
   },
-  emits: ["upload-completed", "upload-failed"],
+  emits: ["upload"],
   setup(props, { emit }) {
-    const { accessToken } = useAuth();
-
     const fileInput = ref(null);
 
-    const uppy = new Uppy({
-      id: `project-file-${props.project.id}`,
-      autoProceed: true,
-      restrictions: {
-        maxFileSize: +process.env.VUE_APP_MAX_UPLOAD_SIZE,
-        minNumberOfFiles: 1
-      }
-    });
-    uppy.use(XHRUpload, {
-      method: "POST",
-      endpoint: `${process.env.VUE_APP_API_BASE_URL}/cloud/${props.project.cloud.id}/project/${props.project.id}/document`,
-      fieldName: "file",
-      metaFields: ["name", "parent_id"],
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`
-      }
-    });
-    uppy.on("file-added", () => {
-      // loading.value = true;
-    });
-    uppy.on("upload-error", () => {
-      // loading.value = false;
-      emit("upload-failed");
-    });
-    uppy.on("complete", event => {
-      const document = event.successful[0].response.body;
-      // loading.value = false;
-      uppy.reset(); // reset Uppy instance
-      emit("upload-completed", document);
-    });
-
     const selectFile = () => {
       fileInput.value.click();
     };
     const uploadFile = event => {
       const files = Array.from(event.target.files);
-      files.forEach(file => {
-        if (file) {
-          uppy.addFile({
-            name: file.name,
-            type: file.type,
-            data: file,
-            meta: {
-              parent_id: props.folder.id
-            }
-          });
-        }
-      });
+      if (files.length > 0) {
+        fileInput.value.value = "";
+        emit("upload", files);
+      }
     };
 
     return {
diff --git a/src/components/specific/files/files-manager/FilesManager.vue b/src/components/specific/files/files-manager/FilesManager.vue
index 1f2398701..a5513535a 100644
--- a/src/components/specific/files/files-manager/FilesManager.vue
+++ b/src/components/specific/files/files-manager/FilesManager.vue
@@ -15,8 +15,7 @@
           <FileUploadButton
             class="files-manager__actions__btn-new-file"
             width="194px"
-            :project="project"
-            :folder="currentFolder"
+            @upload="uploadFiles"
           />
           <BIMDataSearch
             class="files-manager__actions__input-search"
@@ -39,18 +38,21 @@
               v-show="selection.length > 0"
               class="files-manager__files__action-bar"
               :files="selection"
-              @delete-clicked="openDeleteModal"
-              @download-clicked="downloadFiles"
-              @move-clicked="() => {}"
+              @delete="openDeleteModal"
+              @download="downloadFiles"
+              @move="moveFiles"
             />
           </transition>
           <FilesTable
             class="files-manager__files__table"
             :project="project"
+            :folder="currentFolder"
             :files="displayedFiles"
-            @delete-clicked="openDeleteModal([$event])"
-            @download-clicked="downloadFiles([$event])"
+            :filesToUpload="filesToUpload"
+            @delete="openDeleteModal([$event])"
+            @download="downloadFiles([$event])"
             @file-clicked="onFileSelected"
+            @file-uploaded="onFileUploaded"
             @selection-changed="setSelection"
           />
         </div>
@@ -110,7 +112,8 @@ export default {
       required: true
     }
   },
-  setup(props) {
+  emits: ["file-uploaded"],
+  setup(props, { emit }) {
     const handler = inject("fileStructureHandler");
     const currentFolder = ref(null);
     const currentFiles = ref([]);
@@ -172,6 +175,14 @@ export default {
       selection.value = models;
     };
 
+    const filesToUpload = ref([]);
+    const uploadFiles = files => {
+      filesToUpload.value = files;
+    };
+    const onFileUploaded = () => {
+      emit("file-uploaded");
+    };
+
     const filesToDelete = ref([]);
     const showDeleteModal = ref(false);
     const openDeleteModal = models => {
@@ -183,6 +194,10 @@ export default {
       showDeleteModal.value = false;
     };
 
+    const moveFiles = () => {
+      // TODO
+    };
+
     const downloadFiles = async files => {
       let filesToDownload = files.filter(f => f.type !== "Folder");
       for (const file of filesToDownload) {
@@ -203,15 +218,19 @@ export default {
       currentFolder,
       displayedFiles,
       filesToDelete,
+      filesToUpload,
       searchText,
       selection,
       showDeleteModal,
       // Methods
       closeDeleteModal,
       downloadFiles,
+      moveFiles,
       onFileSelected,
+      onFileUploaded,
       openDeleteModal,
-      setSelection
+      setSelection,
+      uploadFiles
     };
   }
 };
diff --git a/src/components/specific/files/files-manager/files-action-bar/FilesActionBar.vue b/src/components/specific/files/files-manager/files-action-bar/FilesActionBar.vue
index c900f2243..132a065d7 100644
--- a/src/components/specific/files/files-manager/files-action-bar/FilesActionBar.vue
+++ b/src/components/specific/files/files-manager/files-action-bar/FilesActionBar.vue
@@ -5,7 +5,7 @@
       color="high"
       ghost
       squared
-      @click="$emit('delete-clicked', files)"
+      @click="$emit('delete', files)"
     >
       <BIMDataIcon name="delete" size="xs" />
       <span>{{ $t("FilesActionBar.deleteButtonText") }}</span>
@@ -15,7 +15,7 @@
       color="secondary"
       ghost
       squared
-      @click="$emit('move-clicked', files)"
+      @click="$emit('move', files)"
     >
       <BIMDataIcon name="folderOpen" size="xs" />
       <span>{{ $t("FilesActionBar.moveButtonText") }}</span>
@@ -24,7 +24,7 @@
       width="120px"
       ghost
       squared
-      @click="$emit('download-clicked', files)"
+      @click="$emit('download', files)"
     >
       <BIMDataIcon name="download" size="s" />
       <span>{{ $t("FilesActionBar.downloadButtonText") }}</span>
@@ -47,7 +47,7 @@ export default {
       default: () => []
     }
   },
-  emits: ["delete-clicked", "download-clicked", "move-clicked"]
+  emits: ["delete", "download", "move"]
 };
 </script>
 
diff --git a/src/components/specific/files/files-table/FilesTable.vue b/src/components/specific/files/files-table/FilesTable.vue
index 5f194804b..563948b5e 100644
--- a/src/components/specific/files/files-table/FilesTable.vue
+++ b/src/components/specific/files/files-table/FilesTable.vue
@@ -9,6 +9,20 @@
     @selection-changed="$emit('selection-changed', $event)"
     :placeholder="$t('FilesTable.emptyTablePlaceholder')"
   >
+    <template #sub-header>
+      <transition-group name="list">
+        <FileUploadCell
+          v-for="file of fileUploads"
+          :key="file.key"
+          :project="project"
+          :folder="folder"
+          :file="file"
+          @upload-completed="onUploadCompleted(file.key, $event)"
+          @upload-canceled="cleanUpload(file.key, 6000)"
+          @upload-failed="cleanUpload(file.key, 12000)"
+        />
+      </transition-group>
+    </template>
     <template #cell-name="{ row: file }">
       <FileNameCell
         :project="project"
@@ -36,9 +50,9 @@
     <template #cell-actions="{ row: file }">
       <FileActionsCell
         :file="file"
-        @delete-clicked="$emit('delete-clicked', $event)"
-        @download-clicked="$emit('download-clicked', $event)"
-        @update-clicked="nameEditMode[file.id] = true"
+        @delete="$emit('delete', $event)"
+        @download="$emit('download', $event)"
+        @update="nameEditMode[file.id] = true"
       />
     </template>
   </GenericTable>
@@ -56,6 +70,7 @@ import FileLastUpdateCell from "./file-last-update-cell/FileLastUpdateCell";
 import FileNameCell from "./file-name-cell/FileNameCell";
 import FileTagsCell from "./file-tags-cell/FileTagsCell";
 import FileTypeCell from "./file-type-cell/FileTypeCell";
+import FileUploadCell from "./file-upload-cell/FileUploadCell";
 
 export default {
   components: {
@@ -64,25 +79,35 @@ export default {
     FileLastUpdateCell,
     FileNameCell,
     FileTagsCell,
-    FileTypeCell
+    FileTypeCell,
+    FileUploadCell
   },
   props: {
     project: {
       type: Object,
       required: true
     },
+    folder: {
+      type: Object,
+      required: true
+    },
     files: {
       type: Array,
       required: true
+    },
+    filesToUpload: {
+      type: Array,
+      default: () => []
     }
   },
   emits: [
-    "delete-clicked",
-    "download-clicked",
+    "delete",
+    "download",
     "file-clicked",
+    "file-uploaded",
     "selection-changed"
   ],
-  setup(props) {
+  setup(props, { emit }) {
     const { locale, t } = useI18n();
 
     const columns = ref([]);
@@ -109,10 +134,38 @@ export default {
       { immediate: true }
     );
 
+    const fileUploads = ref([]);
+    watch(
+      () => props.filesToUpload,
+      () => {
+        fileUploads.value = fileUploads.value.concat(
+          props.filesToUpload.map((file, i) =>
+            Object.assign(file, { key: `${i}-${file.name}` })
+          )
+        );
+      },
+      { immediate: true }
+    );
+
+    const onUploadCompleted = (key, file) => {
+      cleanUpload(key, 500);
+      emit("file-uploaded", file);
+    };
+
+    const cleanUpload = (key, delay = 100) => {
+      setTimeout(() => {
+        const index = fileUploads.value.findIndex(f => f.key === key);
+        fileUploads.value.splice(index, 1);
+      }, delay);
+    };
+
     return {
       // References
+      cleanUpload,
       columns,
+      fileUploads,
       nameEditMode,
+      onUploadCompleted,
       // Methods
       formatBytes
     };
diff --git a/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue b/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue
index 00c5767c0..c9da260ec 100644
--- a/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue
+++ b/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue
@@ -72,13 +72,13 @@ export default {
     }
   },
   emits: [
-    "access-clicked",
-    "delete-clicked",
-    "download-clicked",
-    "tags-clicked",
-    "update-clicked",
-    "validation-clicked",
-    "version-clicked"
+    "add-tags",
+    "add-version",
+    "delete",
+    "download",
+    "manage-access",
+    "request-validation",
+    "update"
   ],
   setup(props, { emit }) {
     const showMenu = ref(false);
@@ -89,9 +89,9 @@ export default {
       showMenu.value = !showMenu.value;
     };
 
-    const onClick = eventType => {
+    const onClick = event => {
       closeMenu();
-      emit(`${eventType}-clicked`, props.file);
+      emit(event, props.file);
     };
 
     return {
diff --git a/src/components/specific/files/files-table/file-upload-cell/FileUploadCell.scss b/src/components/specific/files/files-table/file-upload-cell/FileUploadCell.scss
new file mode 100644
index 000000000..03e99874d
--- /dev/null
+++ b/src/components/specific/files/files-table/file-upload-cell/FileUploadCell.scss
@@ -0,0 +1,64 @@
+.file-upload-cell {
+  display: flex;
+  align-items: center;
+  gap: $spacing-unit;
+  height: 44px;
+  padding: $spacing-unit;
+  font-size: 0.8rem;
+  background-color: $color-white;
+
+  &.failed {
+    border: 2px solid $color-high;
+    background-color: #fff2f2;
+  }
+
+  &--center {
+    flex-grow: 1;
+  }
+
+  &__info {
+    color: $color-tertiary-dark;
+
+    &__file-name {
+      margin-bottom: $spacing-unit/4;
+    }
+
+    &__progress-bar {
+      width: 100%;
+      height: 4px;
+      border-radius: 2px;
+      background-color: $color-tertiary;
+
+      .progress-level {
+        height: 100%;
+        border-radius: 2px;
+        background-color: $color-primary;
+      }
+    }
+
+    &__upload-data {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: $spacing-unit/4;
+      font-style: italic;
+
+      .message {
+        &::before {
+          content: "-";
+          margin-right: $spacing-unit/3;
+          color: $color-tertiary-dark;
+        }
+        margin-left: $spacing-unit/3;
+        font-weight: bold;
+        color: $color-high;
+      }
+    }
+  }
+
+  &__btn-cancel {
+    border: 1px solid $color-tertiary-dark;
+    color: $color-tertiary-dark;
+    transform: scale(0.8);
+  }
+}
diff --git a/src/components/specific/files/files-table/file-upload-cell/FileUploadCell.vue b/src/components/specific/files/files-table/file-upload-cell/FileUploadCell.vue
new file mode 100644
index 000000000..b886b98e8
--- /dev/null
+++ b/src/components/specific/files/files-table/file-upload-cell/FileUploadCell.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="file-upload-cell" :class="{ failed }">
+    <div class="file-upload-cell--left">
+      <FileIcon :name="fileExtension(file.name)" size="20" />
+    </div>
+    <div class="file-upload-cell--center file-upload-cell__info">
+      <div class="file-upload-cell__info__file-name">
+        {{ file.name }}
+      </div>
+      <div v-show="uploading" class="file-upload-cell__info__progress-bar">
+        <div
+          class="progress-level"
+          :style="{ width: `${progress.percentage}%` }"
+        />
+      </div>
+      <div class="file-upload-cell__info__upload-data">
+        <template v-if="uploading">
+          <span>{{
+            `${formatBytes(progress.uploaded)} of ${formatBytes(file.size)}` +
+            ` (${progress.percentage}% done)`
+          }}</span>
+          <span>{{
+            progress.rate ? `${formatBytes(progress.rate)}/s` : ""
+          }}</span>
+        </template>
+        <template v-else>
+          <span>
+            {{ formatBytes(file.size) }}
+            <span v-show="canceled" class="message">
+              {{ $t("FileUploadCard.cancelMessage") }}
+            </span>
+            <span v-show="failed" class="message">
+              {{ $t("FileUploadCard.errorMessage") }}
+            </span>
+          </span>
+        </template>
+      </div>
+    </div>
+    <div class="file-upload-cell--right">
+      <BIMDataButton
+        v-show="uploading"
+        class="file-upload-cell__btn-cancel"
+        width="24px"
+        height="24px"
+        ghost
+        rounded
+        icon
+        @click="cancelUpload"
+      >
+        <BIMDataIcon name="close" size="xxxs" />
+      </BIMDataButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import Uppy from "@uppy/core";
+import XHRUpload from "@uppy/xhr-upload";
+import { onMounted, reactive, ref } from "vue";
+import { useAuth } from "@/state/auth";
+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";
+import FileIcon from "@/components/generic/file-icon/FileIcon";
+
+let instanceID = 0;
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon,
+    FileIcon
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true
+    },
+    folder: {
+      type: Object,
+      required: true
+    },
+    file: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["upload-completed", "upload-canceled", "upload-failed"],
+  setup(props, { emit }) {
+    const { accessToken } = useAuth();
+
+    const uploading = ref(true);
+    const canceled = ref(false);
+    const failed = ref(false);
+
+    const uppy = new Uppy({
+      id: `project-file-${instanceID++}`,
+      autoProceed: true,
+      allowMultipleUploads: false,
+      restrictions: {
+        maxFileSize: +process.env.VUE_APP_MAX_UPLOAD_SIZE,
+        maxNumberOfFiles: 1,
+        minNumberOfFiles: 1
+      }
+    });
+    uppy.use(XHRUpload, {
+      method: "POST",
+      endpoint: `${process.env.VUE_APP_API_BASE_URL}/cloud/${props.project.cloud.id}/project/${props.project.id}/document`,
+      fieldName: "file",
+      metaFields: ["name", "parent_id"],
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`
+      }
+    });
+    uppy.on("file-added", () => {
+      uploading.value = true;
+    });
+    uppy.on("upload-error", () => {
+      uploading.value = false;
+      failed.value = true;
+      emit("upload-failed");
+    });
+    uppy.on("complete", event => {
+      const document = event.successful[0].response.body;
+      uploading.value = false;
+      uppy.reset(); // reset Uppy instance
+      emit("upload-completed", document);
+    });
+
+    const progress = reactive({
+      percentage: 33,
+      uploaded: 123,
+      rate: 456
+    });
+
+    let lastTime = null;
+    uppy.on("upload-progress", (file, { bytesUploaded, bytesTotal }) => {
+      if (lastTime) {
+        const dt = (Date.now() - lastTime) / 1000; // in seconds
+        const dx = bytesUploaded - progress.uploaded; // in bytes
+        progress.rate = Math.round(dx / dt);
+      }
+      progress.percentage = Math.round((100 * bytesUploaded) / bytesTotal);
+      progress.uploaded = bytesUploaded;
+      lastTime = Date.now();
+    });
+
+    const cancelUpload = () => {
+      uppy.cancelAll();
+      uploading.value = false;
+      canceled.value = true;
+      emit("upload-canceled");
+    };
+
+    onMounted(() => {
+      uppy.addFile({
+        name: props.file.name,
+        type: props.file.type,
+        data: props.file,
+        meta: {
+          parent_id: props.folder.id
+        }
+      });
+    });
+
+    return {
+      // References
+      canceled,
+      failed,
+      progress,
+      uploading,
+      // Methods
+      cancelUpload,
+      fileExtension,
+      formatBytes
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./FileUploadCell.scss"></style>
diff --git a/src/components/specific/models/models-card/ModelsCard.vue b/src/components/specific/models/models-card/ModelsCard.vue
index d525c363e..bb6a5a9d9 100644
--- a/src/components/specific/models/models-card/ModelsCard.vue
+++ b/src/components/specific/models/models-card/ModelsCard.vue
@@ -43,18 +43,20 @@ export default {
   setup(props, { emit }) {
     const router = useRouter();
 
-    const currentModel = ref();
+    const currentModel = ref(null);
     watch(
       () => props.models,
       () => {
-        currentModel.value = props.models[0];
+        currentModel.value = props.models.length > 0 ? props.models[0] : null;
       },
       { immediate: true }
     );
 
     const onModelChange = model => {
-      currentModel.value = model;
-      emit("model-changed", model);
+      if (!currentModel.value || currentModel.value.id !== model.id) {
+        currentModel.value = model;
+        emit("model-changed", model);
+      }
     };
 
     const goToModelViewer = () => {
@@ -69,6 +71,7 @@ export default {
     };
 
     return {
+      // Methods
       goToModelViewer,
       onModelChange
     };
diff --git a/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue b/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue
index 56e0a305d..bb270980d 100644
--- a/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue
+++ b/src/components/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue
@@ -112,9 +112,11 @@ export default {
       },
       { immediate: true }
     );
-    watch(index, i => {
-      image.value = images.value[i] || null;
-      emit("model-changed", props.models[i]);
+    watch(index, (newIndex, oldIndex) => {
+      if (newIndex !== oldIndex) {
+        image.value = images.value[newIndex] || null;
+        emit("model-changed", props.models[newIndex]);
+      }
     });
 
     return {
diff --git a/src/components/specific/models/models-overview/ModelsOverview.vue b/src/components/specific/models/models-overview/ModelsOverview.vue
index 8e4db7b98..5ed7db2e9 100644
--- a/src/components/specific/models/models-overview/ModelsOverview.vue
+++ b/src/components/specific/models/models-overview/ModelsOverview.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { ref, watchEffect } from "vue";
+import { onMounted, ref } from "vue";
 // Components
 import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
 import ModelLocation from "@/components/specific/models/model-location/ModelLocation";
@@ -50,14 +50,16 @@ export default {
   setup(props) {
     const displayedModel = ref(null);
 
-    watchEffect(() => {
-      displayedModel.value = props.models.length > 0 ? props.models[0] : null;
-    });
-
     const onModelChange = model => {
-      displayedModel.value = model;
+      if (!displayedModel.value || displayedModel.value.id !== model.id) {
+        displayedModel.value = model;
+      }
     };
 
+    onMounted(() => {
+      displayedModel.value = props.models.length > 0 ? props.models[0] : null;
+    });
+
     return {
       // References
       displayedModel,
diff --git a/src/state/files.js b/src/state/files.js
index 6a125ad75..a2ee96390 100644
--- a/src/state/files.js
+++ b/src/state/files.js
@@ -109,9 +109,19 @@ const deleteFile = async (project, file) => {
 };
 
 const deleteFiles = async (project, files) => {
+  const folders = [];
+  const documents = [];
   for (const file of [files].flat()) {
-    await deleteFile(project, file);
+    if (file.type === "Folder") {
+      folders.push(file);
+    } else {
+      documents.push(file);
+    }
   }
+  await Promise.all([
+    deleteFolders(project, folders),
+    deleteDocuments(project, documents)
+  ]);
   return files;
 };
 
diff --git a/src/utils/file-structure.js b/src/utils/file-structure.js
index b21ac7b57..9e419e370 100644
--- a/src/utils/file-structure.js
+++ b/src/utils/file-structure.js
@@ -153,7 +153,7 @@ class FileStructureHandler {
     if (node.parent) {
       node.parent.addChild(file);
     }
-    file.children.forEach(
+    (file.children || []).forEach(
       child => this.createFile(child)
     );
   }
@@ -177,7 +177,7 @@ class FileStructureHandler {
   deleteFile(file) {
     const node = this.nodeMap.get(file.id);
     if (node) {
-      file.children.forEach(
+      (file.children || []).forEach(
         child => this.deleteFile(child)
       );
       this.nodeMap.delete(file.id);
diff --git a/src/views/project-board/project-files/ProjectFiles.vue b/src/views/project-board/project-files/ProjectFiles.vue
index 45f68dbea..ab803aaf0 100644
--- a/src/views/project-board/project-files/ProjectFiles.vue
+++ b/src/views/project-board/project-files/ProjectFiles.vue
@@ -18,6 +18,7 @@
       class="project-files__block--files"
       :project="project"
       :fileStructure="fileStructure"
+      @file-uploaded="reloadFileStructure"
     />
   </div>
 </template>
@@ -25,6 +26,7 @@
 <script>
 import { provide } from "vue";
 import { useFiles } from "@/state/files";
+import { useModels } from "@/state/models";
 import { useProjects } from "@/state/projects";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
@@ -41,14 +43,30 @@ export default {
   },
   setup() {
     const { currentProject } = useProjects();
-    const { projectFileStructure, fileStructureHandler } = useFiles();
+    const { loadProjectModels } = useModels();
+    const {
+      loadProjectFileStructure,
+      projectFileStructure,
+      fileStructureHandler
+    } = useFiles();
 
     provide("fileStructureHandler", fileStructureHandler);
 
+    let reloadDebounce = null;
+    const reloadFileStructure = () => {
+      clearTimeout(reloadDebounce);
+      reloadDebounce = setTimeout(async () => {
+        await loadProjectFileStructure(currentProject.value);
+        await loadProjectModels(currentProject.value);
+      }, 1000);
+    };
+
     return {
       // References
       fileStructure: projectFileStructure,
-      project: currentProject
+      project: currentProject,
+      // Methods
+      reloadFileStructure
     };
   }
 };
diff --git a/src/views/project-board/project-overview/ProjectOverview.vue b/src/views/project-board/project-overview/ProjectOverview.vue
index 62ecf7040..e2706f5ab 100644
--- a/src/views/project-board/project-overview/ProjectOverview.vue
+++ b/src/views/project-board/project-overview/ProjectOverview.vue
@@ -50,6 +50,7 @@
 
 <script>
 import { ref } from "vue";
+import { useFiles } from "@/state/files";
 import { useModels } from "@/state/models";
 import { useProjects } from "@/state/projects";
 // Components
@@ -74,11 +75,13 @@ export default {
   setup() {
     const { currentProject, projectUsers, projectInvitations } = useProjects();
     const { loadProjectModels, projectModels } = useModels();
+    const { loadProjectFileStructure } = useFiles();
 
     let reloadDebounce = null;
     const reloadModels = () => {
       clearTimeout(reloadDebounce);
       reloadDebounce = setTimeout(async () => {
+        await loadProjectFileStructure(currentProject.value);
         await loadProjectModels(currentProject.value);
       }, 1000);
     };