From 6a7bc68b61d198a5d9f33690327f3d96cea3bc91 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Mon, 22 May 2023 14:19:18 +0100
Subject: [PATCH] Allowed button-based multi-file uploads

Likely something that worked via dropzone before.
This adds support for our custom dropzone file handling.
Related to #4241
---
 resources/js/components/dropzone.js                 | 8 +++++++-
 resources/js/services/dom.js                        | 6 +++++-
 resources/views/attachments/manager.blade.php       | 1 +
 resources/views/pages/parts/image-manager.blade.php | 1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/dropzone.js b/resources/js/components/dropzone.js
index 1fdf824ae..2b8b35081 100644
--- a/resources/js/components/dropzone.js
+++ b/resources/js/components/dropzone.js
@@ -21,6 +21,7 @@ export class Dropzone extends Component {
         this.uploadLimitMessage = this.$opts.uploadLimitMessage;
         this.zoneText = this.$opts.zoneText;
         this.fileAcceptTypes = this.$opts.fileAccept;
+        this.allowMultiple = this.$opts.allowMultiple === 'true';
 
         this.setupListeners();
     }
@@ -83,7 +84,12 @@ export class Dropzone extends Component {
     }
 
     manualSelectHandler() {
-        const input = elem('input', {type: 'file', style: 'left: -400px; visibility: hidden; position: fixed;', accept: this.fileAcceptTypes});
+        const input = elem('input', {
+            type: 'file',
+            style: 'left: -400px; visibility: hidden; position: fixed;',
+            accept: this.fileAcceptTypes,
+            multiple: this.allowMultiple ? '' : null,
+        });
         this.container.append(input);
         input.click();
         input.addEventListener('change', () => {
diff --git a/resources/js/services/dom.js b/resources/js/services/dom.js
index 786855748..d764a2ebe 100644
--- a/resources/js/services/dom.js
+++ b/resources/js/services/dom.js
@@ -10,7 +10,11 @@ export function elem(tagName, attrs = {}, children = []) {
     const el = document.createElement(tagName);
 
     for (const [key, val] of Object.entries(attrs)) {
-        el.setAttribute(key, val);
+        if (val === null) {
+            el.removeAttribute(key);
+        } else {
+            el.setAttribute(key, val);
+        }
     }
 
     for (const child of children) {
diff --git a/resources/views/attachments/manager.blade.php b/resources/views/attachments/manager.blade.php
index 4526172d4..6cbfd1aae 100644
--- a/resources/views/attachments/manager.blade.php
+++ b/resources/views/attachments/manager.blade.php
@@ -14,6 +14,7 @@
          option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
          option:dropzone:zone-text="{{ trans('entities.attachments_dropzone') }}"
          option:dropzone:file-accept="*"
+         option:dropzone:allow-multiple="true"
          class="px-l files">
 
         <div refs="attachments@list-container dropzone@drop-target" class="relative">
diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php
index 0594c67e8..da64d681c 100644
--- a/resources/views/pages/parts/image-manager.blade.php
+++ b/resources/views/pages/parts/image-manager.blade.php
@@ -6,6 +6,7 @@
      option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
      option:dropzone:zone-text="{{ trans('components.image_dropzone_drop') }}"
      option:dropzone:file-accept="image/*"
+     option:dropzone:allow-multiple="true"
      option:image-manager:uploaded-to="{{ $uploaded_to ?? 0 }}"
      class="image-manager">