Add error message for invalid files selected (#526)

Displays an error message in the form area when the user 1. Drag and drop file(s) which have invalid type 2. After a user selects an invalid file(s) from OS-dialog The HTML structure of the error is: ``` <div class="dff-uploader"> <div class="dff-container" data-translations=“{… ", "Invalid file type": "Invalid file type. Try again"}"> <input type="file" name=“…” accept=".doc, .docx, …” id=“…”> <div class="dff-files”>…</div> <div class="dff-invalid-files"> <ul> <li class="dff-error”>{file.name}: Invalid file type. Try again</li> </ul> </div> </div> </div> ```
mbraak · Aug 24, 2022 · b22e499 · b22e499
1 parent 4eb1597
commit b22e499
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ testproject/t
 django_file_form/static/file_form/file_form.coverage.js
 django_file_form/static/file_form/file_form.coverage.js.map
 node_modules/
+build/
diff --git a/django_file_form/static/file_form/file_form.debug.js b/django_file_form/static/file_form/file_form.debug.js
diff --git a/django_file_form/static/file_form/file_form.debug.js.map b/django_file_form/static/file_form/file_form.debug.js.map
diff --git a/django_file_form/static/file_form/file_form.js b/django_file_form/static/file_form/file_form.js
diff --git a/django_file_form/static/file_form/file_form.js.map b/django_file_form/static/file_form/file_form.js.map
diff --git a/django_file_form/widgets.py b/django_file_form/widgets.py
@@ -15,6 +15,7 @@
     "Delete failed": _("Delete failed"),
     "Upload failed": _("Upload failed"),
     "Drop your files here": _("Drop your files here"),
+    "Invalid file type": _("Invalid file type. Try again"),
 }
 
 

diff --git a/frontend/src/drop_area.ts b/frontend/src/drop_area.ts
@@ -1,4 +1,5 @@
 import AcceptedFileTypes from "./accepted_file_types";
+import RenderUploadFile from "./render_upload_file";
 
 const getEntriesFromDirectory = async (
   directoryEntry: FileSystemDirectoryEntry
@@ -53,20 +54,24 @@ class DropArea {
   acceptedFileTypes: AcceptedFileTypes;
   container: Element;
   onUploadFiles: (files: File[]) => void;
+  renderer: RenderUploadFile;
 
   constructor({
     container,
     inputAccept,
-    onUploadFiles
+    onUploadFiles,
+    renderer
   }: {
     container: Element;
     inputAccept: string;
     onUploadFiles: (files: File[]) => void;
+    renderer: RenderUploadFile;
   }) {
     this.container = container;
     this.onUploadFiles = onUploadFiles;
     this.acceptedFileTypes = new AcceptedFileTypes(inputAccept);
-
+    this.renderer = renderer;
+
     container.addEventListener("dragenter", () => {
       container.classList.add("dff-dropping");
     });
@@ -90,10 +95,18 @@ class DropArea {
       try {
         if (dragEvent.dataTransfer) {
           const files = await getFilesFromDataTransfer(dragEvent.dataTransfer);
-          const acceptedFiles = files.filter(file =>
-            this.acceptedFileTypes.isAccepted(file.name)
-          );
+          const acceptedFiles: File[] = [];
+          const invalidFiles: File[] = [];
+
+          for (const file of files) {
+            if(this.acceptedFileTypes.isAccepted(file.name)){
+              acceptedFiles.push(file);
+            } else {
+              invalidFiles.push(file);
+            }
+          }
 
+          this.renderer.setErrorInvalidFiles(invalidFiles);
           this.onUploadFiles(acceptedFiles);
         }
       } catch (error) {

diff --git a/frontend/src/file_field.ts b/frontend/src/file_field.ts
@@ -280,10 +280,7 @@ class FileField {
     }
 
     if (invalidFiles){
-      for (const file of invalidFiles){
-        // @TODO: find a better way to expose the error.
-        console.error(`File name ${file.name}: Not a valid file type. Update your selection.`)
-      }
+      void this.handleInvalidFiles([...invalidFiles]);
     }
 
     if (acceptedFiles) {
@@ -293,6 +290,10 @@ class FileField {
     this.renderer.clearInput();
   };
 
+  handleInvalidFiles = (files: File[]): void => {
+    this.renderer.setErrorInvalidFiles(files);
+  }
+
   onClick = (e: Event): void => {
     const target = e.target as HTMLInputElement;
 
@@ -409,7 +410,8 @@ class FileField {
     new DropArea({
       container,
       inputAccept,
-      onUploadFiles: this.uploadFiles
+      onUploadFiles: this.uploadFiles,
+      renderer: this.renderer
     });
   }
 

diff --git a/frontend/src/render_upload_file.ts b/frontend/src/render_upload_file.ts
@@ -5,6 +5,7 @@ class RenderUploadFile {
   container: Element;
   input: HTMLInputElement;
   translations: { [key: string]: string };
+  errors: Element;
 
   constructor({
     parent,
@@ -18,6 +19,7 @@ class RenderUploadFile {
     translations: { [key: string]: string };
   }) {
     this.container = this.createFilesContainer(parent);
+    this.errors = this.createErrorContainer(parent);
     this.input = input;
     this.translations = translations;
 
@@ -130,6 +132,20 @@ class RenderUploadFile {
     this.removeCancel(index);
   }
 
+  public setErrorInvalidFiles(files: File[]): void {
+    const errorsMessages = document.createElement("ul");
+
+    for (const file of files) {
+      const msg = document.createElement('li')
+      msg.innerHTML = `${file.name}: ${this.translations["Invalid file type"]}`
+      msg.className = 'dff-error'
+      errorsMessages.appendChild(msg);
+    }
+
+    this.errors.replaceChildren(errorsMessages);
+    this.clearInput();
+  }
+
   public setSuccess(index: number, size?: number): void {
     const { translations } = this;
 
@@ -169,6 +185,13 @@ class RenderUploadFile {
     }
   }
 
+  private createErrorContainer = (parent: Element): Element => {
+    const div = document.createElement("div");
+    div.className = "dff-invalid-files";
+    parent.appendChild(div);
+    return div;
+  }
+
   private createFilesContainer = (parent: Element): Element => {
     const div = document.createElement("div");
     div.className = "dff-files";