Add button for deleting uploads

Author: annda

conf/language.de.yaml

@@ -17,7 +17,7 @@ button_save : Speichern
 button_send : Senden
 button_clone: Feld hinzufügen
 button_upload: Dateien hochladen
-button_upload_replace: Dateien ersetzen
+button_upload_replace: Dateien löschen
 uploaded_file: Hochgeladene Dateien
 uploaded_original: Urspünglicher Deteiname
 upload_info: "Die ausgewählten Dateien werden beim Speichern oder Senden hochgeladen und geprüft:"

conf/language.default.yaml

@@ -17,7 +17,7 @@ button_save : Save
 button_send : Send
 button_clone: Copy field
 button_upload: Upload files
-button_upload_replace: Replace uploaded files
+button_upload_replace: Delete uploaded files
 uploaded_file: Saved file
 uploaded_original: Original filename
 upload_info: "The selected files will be uploaded and checked after saving or sending the form:"

conf/language.fr.yaml

@@ -17,7 +17,7 @@ button_save : Économiser
 button_send : Envoyer
 button_clone: Copier le champ
 button_upload: Télécharger le fichier
-button_upload_replace: Remplacer le fichier téléchargé
+button_upload_replace: Supprimer le fichier téléchargé
 uploaded_file: Fichier enregistré
 upload_info: Le fichier sélectionné sera téléchargé et vérifié après l'enregistrement ou l'envoi du formulaire.
 upload_error: Le téléchargement est trop important!

conf/language.it.yaml

@@ -17,7 +17,7 @@ button_save : Risparmiare
 button_send : Inviare
 button_clone: Campo di copia
 button_upload: Caricare il file
-button_upload_replace: Sostituire il file caricato
+button_upload_replace: Eliminare il file caricato
 uploaded_file: File salvato
 upload_info: Il file selezionato verrà caricato e controllato dopo il salvataggio o l'invio del modulo.
 upload_error: Il caricamento è troppo grande!

js_src/components/UploadComponent.js

@@ -8,6 +8,7 @@ export class UploadComponent extends BaseComponent {
     #currentFiles;
 
     html() {
+        // not using U.createField() because we need a different structure
         const field = document.createElement("div");
         field.classList.add("field", "file", "dropzone");
 
@@ -27,13 +28,13 @@ export class UploadComponent extends BaseComponent {
             control.appendChild(U.modalHint(this.config));
             control.appendChild(U.modal(this.config));
         }
-
         field.appendChild(control);
 
-        const fileLabel = document.createElement('label');
-        fileLabel.classList.add('file-label');
+        // input container must be a label to trigger upload
+        const fileInputContainer = document.createElement("label");
+        fileInputContainer.classList.add("buttons", "file-label");
 
-        control.appendChild(fileLabel);
+        control.appendChild(fileInputContainer);
 
         // actual file input and Bulma call-to-action (cta) element
         const input = document.createElement("input");
@@ -48,11 +49,11 @@ export class UploadComponent extends BaseComponent {
             input.dataset['max'] = this.config.validation.filesize;
         }
 
-        fileLabel.appendChild(input);
+        fileInputContainer.appendChild(input);
 
         const cta = document.createElement("span");
         cta.classList.add("file-cta");
-        fileLabel.appendChild(cta);
+        fileInputContainer.appendChild(cta);
 
         const labelSpan = document.createElement("span");
         labelSpan.classList.add("file-label");
@@ -64,14 +65,39 @@ export class UploadComponent extends BaseComponent {
         infoContainer.classList.add("notification", "hidden", "is-warning");
         control.appendChild(infoContainer);
 
-        // upload status from state
-        this.#showStatus(infoContainer);
-
         const errorContainer = document.createElement("div");
         errorContainer.classList.add("notification", "hidden", "is-danger");
         control.appendChild(errorContainer);
 
-        // drag & drop handling
+        // create upload status info from state
+        this.#showStatus(infoContainer);
+
+        // button to delete existing uploads
+        const deleteButton = document.createElement("button");
+        deleteButton.type = "button";
+        deleteButton.classList.add("button");
+        deleteButton.innerText = U.getLang("button_upload_replace");
+
+        deleteButton.addEventListener("click", e => {
+            this.myState.value = null;
+            input.value = null;
+            this.render();
+        });
+
+        infoContainer.appendChild(deleteButton);
+
+        this.attachDragAndDropHandlers(field, input);
+
+        return field;
+    }
+
+    /**
+     * Add drag & drop handlers
+     *
+     * @param {HTMLElement} field
+     * @param {HTMLElement} input
+     */
+    attachDragAndDropHandlers(field, input) {
         field.addEventListener("drop", e => {
             e.preventDefault();
             e.stopPropagation();
@@ -94,8 +120,6 @@ export class UploadComponent extends BaseComponent {
             e.stopPropagation();
             e.target.classList.remove("highlight");
         });
-
-        return field;
     }
 
     /** @override */
@@ -134,13 +158,21 @@ export class UploadComponent extends BaseComponent {
         if (!this.myState.value) {
             return;
         }
-        const uploads = document.createElement("ul");
-        infoNotification.appendChild(uploads);
+
+        const oldUploads = infoNotification.querySelector("ul");
+        const newUploads = document.createElement("ul");
+
         for (const fileInfo of this.myState.value) {
-            uploads.insertAdjacentHTML(
+            newUploads.insertAdjacentHTML(
                 "beforeend",
                 `<li><a href="${fileInfo.content}" download="${fileInfo.file}">${fileInfo.file}</a></li>`)
         }
+
+        if (oldUploads !== null) {
+            infoNotification.replaceChild(newUploads, oldUploads);
+        } else {
+            infoNotification.appendChild(newUploads);
+        }
         infoNotification.classList.remove("hidden");
     }