[Dropzone] Enable multiple file uploads #512

daFish · 2022-10-24T11:27:44Z

Q	A
Bug fix?	no
New feature?	yes
Tickets	Fix #7
License	MIT

This change adds the posibility to upload multiple files using the Dropzone component. This is based on the work by @yassinehamouten.

Tests
Make it configurable using the FormType

daFish · 2022-10-25T06:58:20Z

@tgalopin & @weaverryan Would you mind to review this PR? 😄

weaverryan

Thanks for this! I have some questions - either we're not (yet) quite supporting the "preview" for multiple files, or I'm missing it!

Cheers :)

weaverryan · 2022-10-25T13:05:14Z

src/Dropzone/Resources/views/form_theme.html.twig

@@ -2,6 +2,7 @@
    {%- set dataController = (attr['data-controller']|default('') ~ ' symfony--ux-dropzone--dropzone')|trim -%}
    {%- set attr = attr|merge({ 'data-controller': '', class: (attr.class|default('') ~ ' dropzone-input')|trim}) -%}

+


minor, but we can revert this change

weaverryan · 2022-10-25T13:07:28Z

src/Dropzone/Resources/assets/src/controller.ts

        }

-        this._dispatchEvent('dropzone:change', file);
+        this._dispatchEvent('dropzone:change', event.target.files);


Let's not this in the CHANGELOG - that's a minor BC break.

weaverryan · 2022-10-25T13:07:51Z

src/Dropzone/Resources/assets/src/controller.ts

@@ -42,31 +42,34 @@ export default class extends Controller {
        this.previewImageTarget.style.display = 'none';
        this.previewImageTarget.style.backgroundImage = 'none';
        this.previewFilenameTarget.textContent = '';
+        document.querySelectorAll('.dropzone-preview-image-container').forEach((e) => e.remove());


Sorry if I'm missing it, where/what is creating this .dropzone-preview-image-container element?

weaverryan · 2022-10-25T13:09:50Z

src/Dropzone/Resources/assets/src/controller.ts

+
+            // Show the filename in preview
+            this.previewFilenameTarget.textContent = file.name;
+            this.previewTarget.style.display = 'flex';


I haven't tried the code yet, but how does this work with multiple files? It looks like if I attach multiple files, only the last one's filename would show up (it would override the earlier ones). Or very possibly I am missing a detail :)

daFish · 2022-11-02T14:20:34Z

After a small conversation with @weaverryan on Slack I plan to add the following options to this component:

ability to specify the number of files
enable adding additional files after files were already dropped

weaverryan

Hi!

I played with this locally, but it doesn't look like multiple previews show up - just the one. Is that my mistake? Or do we still need a good deal more work - like to have potentially multiple "preview" areas instead of just one?

Thanks!

weaverryan · 2023-02-07T18:55:48Z

src/Dropzone/assets/src/controller.ts

+        numberOfFiles: Number
+    }
+
+    readonly numberOfFilesValue: number;


It doesn't look like this is used?

Already removed.

weaverryan · 2023-02-07T18:56:32Z

src/Dropzone/templates/form_theme.html.twig

@@ -2,6 +2,7 @@
    {%- set dataController = (attr['data-controller']|default('') ~ ' symfony--ux-dropzone--dropzone')|trim -%}
    {%- set attr = attr|merge({ 'data-controller': '', class: (attr.class|default('') ~ ' dropzone-input')|trim}) -%}

+


This can be removed now

weaverryan · 2023-02-07T18:56:58Z

src/Dropzone/src/Form/DropzoneType.php

@@ -28,6 +28,7 @@ public function configureOptions(OptionsResolver $resolver)
            'attr' => [
                'placeholder' => 'Drag and drop or browse',
            ],
+            'multiple' => false,


Is that needed? It's already the default of the parent type

Has been removed.

kristjan-kure · 2023-04-09T08:32:54Z

Hi! We need multiple file upload. Who can help with this? I understand daFish has been developing it, but we need it live? Who on the Symfony development team can help us to work with this?

daFish · 2023-04-11T15:49:24Z

After some thoughts I'm not going to finish this. It is based upon the work of @yassinehamouten and I'd rather propose to go with uppy.io.

simonsolutions · 2025-02-05T22:13:57Z

sorry to pick up on the old PR. But the above mentioned missing preview on more than one file seems still not to be working. I tried the current version of UX Dropzone, the multiple in the form element works. It accepts multiple files and posts them along with the form. But the preview of more than one file and the capability of adding more files seems also be missing.

Is there any trick i am missing?

daFish force-pushed the feat/dropzone-support-multiple-files branch from e8a8a1e to 7105e52 Compare October 24, 2022 13:31

daFish marked this pull request as ready for review October 24, 2022 13:36

daFish marked this pull request as draft October 24, 2022 20:03

daFish force-pushed the feat/dropzone-support-multiple-files branch from 7105e52 to 05ffafc Compare October 25, 2022 06:56

daFish marked this pull request as ready for review October 25, 2022 06:57

weaverryan reviewed Oct 25, 2022

View reviewed changes

daFish marked this pull request as draft December 8, 2022 18:19

daFish changed the title ~~feat(dropzone): enable multiple file uploads~~ [Dropzone] Enable multiple file uploads Dec 8, 2022

daFish added 2 commits January 26, 2023 11:37

feat(dropzone): enable multiple file uploads

26fb0cc

fixup! feat(dropzone): enable multiple file uploads

3e47174

daFish force-pushed the feat/dropzone-support-multiple-files branch from 806cc8a to 3e47174 Compare January 26, 2023 10:44

weaverryan reviewed Feb 7, 2023

View reviewed changes

daFish and others added 3 commits February 7, 2023 20:32

fixup! feat(dropzone): enable multiple file uploads

651de6d

fixup! feat(dropzone): enable multiple file uploads

c568012

Merge branch 'symfony:2.x' into feat/dropzone-support-multiple-files

da930d8

daFish closed this Apr 11, 2023

daFish deleted the feat/dropzone-support-multiple-files branch April 11, 2023 15:49

weaverryan mentioned this pull request Jul 31, 2023

[Dropzone] Support for multiple files upload #1025

Closed

simonsolutions mentioned this pull request Feb 11, 2025

[Dropzone] Multiple uploads only show single file and no possibility to add more files #2567

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dropzone] Enable multiple file uploads #512

[Dropzone] Enable multiple file uploads #512

daFish commented Oct 24, 2022 •

edited

Loading

daFish commented Oct 25, 2022

weaverryan left a comment

weaverryan Oct 25, 2022

weaverryan Oct 25, 2022

weaverryan Oct 25, 2022

weaverryan Oct 25, 2022

daFish commented Nov 2, 2022

weaverryan left a comment

weaverryan Feb 7, 2023

daFish Feb 7, 2023

weaverryan Feb 7, 2023

daFish Feb 7, 2023

weaverryan Feb 7, 2023

daFish Feb 7, 2023

kristjan-kure commented Apr 9, 2023

daFish commented Apr 11, 2023

simonsolutions commented Feb 5, 2025

		@@ -2,6 +2,7 @@
		{%- set dataController = (attr['data-controller']\|default('') ~ ' symfony--ux-dropzone--dropzone')\|trim -%}
		{%- set attr = attr\|merge({ 'data-controller': '', class: (attr.class\|default('') ~ ' dropzone-input')\|trim}) -%}

[Dropzone] Enable multiple file uploads #512

[Dropzone] Enable multiple file uploads #512

Conversation

daFish commented Oct 24, 2022 • edited Loading

daFish commented Oct 25, 2022

weaverryan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daFish commented Nov 2, 2022

weaverryan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kristjan-kure commented Apr 9, 2023

daFish commented Apr 11, 2023

simonsolutions commented Feb 5, 2025

daFish commented Oct 24, 2022 •

edited

Loading