I have a form on a web page, the form includes a file input field. I have followed one of the tutorials below to show thumbnails of the chosen images before upload. All good.
My problem...
If I select two images (as per screenshot above) and decide to add a third image, I would click on "Choose your file(s)..." again and select the additional image, BUT I then lose the first two images. Not good.
This happens on both desktop and mobile device.
On a desktop machine I may want to select two images but from different folders, this can't be done.
On a mobile device I may wish to add three images and also take two photographs all to be uploaded in a single form, but this won't work.
Hi Neil,
The default behavior of HTML 5 file input is to allow selecting images from one folder.
If you select different images after you have already added some, then they get removed and the new files are added.
That’s not something we control, it’s the default behavior for the multi upload inputs.
@Teodor, how can I access the wording in the middle of the dropzone to change it dynamically?
ie on desktop to say “Click to choose from folder or drag and drop here”
and on mobile to say “Click to choose from gallery or to take a picture”
Also, how can I access the image data so I can create a list above or below the Dropzone with the filename, file size, running total in Mb and running total of images?
I know I can use CSS to change the classes dmxDropzoneFilename and dmxDropzoneFilesize of the individual thumbnails within the Dropzone but we want to make some of the form layouts look different.
Some will just have thumbnails, some just a worded list, and some with thumbnails but with separate list.
If you add a custom message, you will see in the code like:
message="your message here"
You can make it dynamic, by adding dmx-bind: in front of it:
dmx-bind:message="'your message here'"
(note the single quotes for the static values here!!)
You can use the browser component in the dmx-bind:message to detect the screen size and build an expression that represents your logic with a ternary operator:
