Allow removal of uploaded files

oursky · May 22, 2024 · 99d2075 · 99d2075
1 parent d74fdbf
commit 99d2075
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/public/Images/cross-gray.svg b/public/Images/cross-gray.svg
diff --git a/public/scripts/upload.js b/public/scripts/upload.js
@@ -53,6 +53,7 @@ class FileListViewModel {
       isProcessing: mobx.computed,
       isReadyForMockup: mobx.computed,
       add: mobx.action,
+      remove: mobx.action,
     });
     this.maxFileSizeByte = maxFileSizeByte;
   }
@@ -90,6 +91,16 @@ class FileListViewModel {
       this._imageUploads.push(imageUpload);
     }
   }
+
+  async remove(filename, index) {
+    this._imageUploads = this._imageUploads.filter(
+      (upload, i) => {
+        const isSameFilename = upload.file.name === filename;
+        const isSameIndex = i === index;
+        return !(isSameFilename && isSameIndex);
+      },
+    );
+  }
 }
 
 class RootViewModel {
@@ -206,10 +217,21 @@ function appendInitialFileListItem(fileIndex, filename) {
   itemNode.classList.add("file-list-item");
   itemNode.dataset.fileIndex = fileIndex;
 
-  const filenameNode = document.createElement("div");
-  filenameNode.classList.add("file-list-item__filename");
+  const headerNode = document.createElement("div");
+  headerNode.classList.add("file-list-item__filename");
+  const filenameNode = document.createElement("span");
   filenameNode.innerText = filename;
-  itemNode.appendChild(filenameNode);
+  filenameNode.classList.add("file-list-item__filename-content");
+  headerNode.appendChild(filenameNode);
+
+  const crossNode = document.createElement("button");
+  crossNode.classList.add("file-list-item__cross");
+  crossNode.onclick = async () => {
+    await window.viewModel.fileList.remove(filename, fileIndex);
+  };
+  headerNode.appendChild(crossNode);
+
+  itemNode.appendChild(headerNode);
 
   itemNode.insertAdjacentHTML(
     "beforeend",
@@ -226,6 +248,11 @@ function appendInitialFileListItem(fileIndex, filename) {
   return fileListNode.appendChild(itemNode);
 }
 
+function removeAllFileListItems() {
+  const fileListNode = document.querySelector(".file-list");
+  fileListNode.replaceChildren();
+}
+
 function updateFileListItem(itemNode, imageUpload) {
   const hintNode = itemNode.querySelector(".file-list-item__hint");
   const progressFillNode = itemNode.querySelector(
@@ -331,6 +358,8 @@ function updateFileListItem(itemNode, imageUpload) {
         break;
     }
   }
+
+  // add cross button behavior
 }
 
 function main() {
@@ -466,6 +495,25 @@ function main() {
     },
   );
 
+  // observe fileListViewModel: imageUploads[].length
+  mobx.reaction(
+    () => viewModel.fileList.imageUploads.length,
+    async () => {
+      removeAllFileListItems(); // remove then re-render
+      const imageUploads = viewModel.fileList.imageUploads;
+      for (let i = 0; i < imageUploads.length; ++i) {
+        let itemNode = findFileListItem(i);
+        if (itemNode == null) {
+          itemNode = appendInitialFileListItem(i, imageUploads[i].file.name);
+        }
+        updateFileListItem(itemNode, imageUploads[i]);
+      }
+    },
+    {
+      equals: mobx.comparer.shallow,
+    },
+  );
+
   if (isDebug) {
     // observe fileListViewModel: imageUploads, imageUploads[].readState
     mobx.autorun(() => {

diff --git a/src/styles/upload.css b/src/styles/upload.css
@@ -235,6 +235,32 @@ main {
   line-height: 21px;
 }
 
+.file-list-item__filename-content {
+  flex-grow: 1;
+}
+
+.file-list-item__cross {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url("/Images/cross-gray.svg");
+  background-color: white;
+  margin-right: 2px;
+  cursor: pointer;
+}
+
+.file-list-item__cross:hover {
+  background-color: var(--gray-5);
+}
+
+.file-list-item__cross:active {
+  background-color: var(--gray-4);
+}
+
 .file-list-item .file-list-item__filename::before {
   content: "";
   display: block;