file upload enhancements

Removing the file item will also remove the hosting column element. file handler now are called after the file is appended. cancel now works even if the request is not yet sent.
DominoKit · Jul 26, 2024 · 45af1fc · 45af1fc
1 parent 816bc36
commit 45af1fc
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/upload/DefaultFilePreviewContainer.java b/domino-ui/src/main/java/org/dominokit/domino/ui/upload/DefaultFilePreviewContainer.java
@@ -17,7 +17,6 @@
 
 import static org.dominokit.domino.ui.utils.Domino.*;
 
-import elemental2.dom.DomGlobal;
 import elemental2.dom.HTMLDivElement;
 import org.dominokit.domino.ui.grid.Column;
 import org.dominokit.domino.ui.grid.Row;
@@ -57,11 +56,7 @@ public DefaultFilePreviewContainer appendChild(FileItem fileItem) {
             .apply(
                 self -> {
                   self.appendChild(fileItem);
-                  fileItem.onDetached(
-                      mutationRecord -> {
-                        DomGlobal.console.info("delete columns too ------------------");
-                        self.remove();
-                      });
+                  fileItem.onDetached(mutationRecord -> self.remove());
                 }));
     return this;
   }

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/upload/FileItem.java b/domino-ui/src/main/java/org/dominokit/domino/ui/upload/FileItem.java
@@ -442,8 +442,8 @@ public List<SuccessUploadHandler> getSuccessUploadHandlers() {
    * @return This FileItem instance for method chaining.
    */
   public FileItem cancel() {
+    canceled = true;
     if (request != null) {
-      canceled = true;
       request.abort();
     }
     return this;

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/upload/FileUpload.java b/domino-ui/src/main/java/org/dominokit/domino/ui/upload/FileUpload.java
@@ -16,11 +16,23 @@
 package org.dominokit.domino.ui.upload;
 
 import static java.util.Objects.nonNull;
-import static org.dominokit.domino.ui.utils.Domino.*;
+import static org.dominokit.domino.ui.utils.Domino.div;
+import static org.dominokit.domino.ui.utils.Domino.elementOf;
+import static org.dominokit.domino.ui.utils.Domino.input;
 import static org.dominokit.domino.ui.utils.DominoUIConfig.CONFIG;
 
-import elemental2.dom.*;
-import java.util.*;
+import elemental2.dom.DragEvent;
+import elemental2.dom.Element;
+import elemental2.dom.File;
+import elemental2.dom.FileList;
+import elemental2.dom.HTMLDivElement;
+import elemental2.dom.HTMLElement;
+import elemental2.dom.XMLHttpRequest;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.List;
+import java.util.Optional;
 import java.util.function.Supplier;
 import java.util.stream.Collectors;
 import jsinterop.base.Js;
@@ -100,6 +112,7 @@ public class FileUpload extends BaseDominoElement<HTMLDivElement, FileUpload>
 
   private DropEffect dropEffect;
   private UploadConfig config;
+  private boolean showPreview = true;
 
   /**
    * Creates a new instance of the `FileUpload` component.
@@ -396,17 +409,20 @@ private void addFilePreview(File file) {
     }
     FileItem fileItem = FileItem.create(file, new UploadOptions(), filePreviewFactory, this);
 
+    fileItem.addRemoveHandler(
+        removedFile -> {
+          addedFileItems.remove(fileItem);
+        });
+
     fileItemHandlers.forEach(handler -> handler.handle(fileItem));
 
     fileItem.validateSize();
 
-    filesContainer.appendChild(fileItem);
-    addedFileItems.add(fileItem);
+    if (showPreview) {
+      filesContainer.appendChild(fileItem);
+    }
 
-    fileItem.addRemoveHandler(
-        removedFile -> {
-          addedFileItems.remove(fileItem);
-        });
+    addedFileItems.add(fileItem);
 
     if (fileItem.isCanceled()) {
       fileItem.remove();
@@ -627,6 +643,23 @@ public FileUpload setDropEffect(DropEffect dropEffect) {
     return this;
   }
 
+  /** @return true if uploaded files will show a preview in the preview container */
+  public boolean isShowPreview() {
+    return showPreview;
+  }
+
+  /**
+   * When set to true, uploaded files will show a preview in the preview container, otherwise they
+   * wont
+   *
+   * @param showPreview boolean.
+   * @return same component instance
+   */
+  public FileUpload setShowPreview(boolean showPreview) {
+    this.showPreview = showPreview;
+    return this;
+  }
+
   /**
    * A functional interface for handling file items when they are added to the `FileUpload`
    * component.