How to take photos and upload multiple images on phone?

Wappler General How To
#1

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.

image
image.png960×317 87.6 KB

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.

This is how the File Input Properties are set…

image

Help please, I know this can be done with php because I have done it prior to Wappler.

Show Image Preview Before Upload

File Management

#2

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.

#3

Hi @Teodor, thanks for the reply. I was hoping the file uploader in Wappler may have been able to do this.

I mentioned, quite some time ago, that I have used https://github.com/blueimp/jQuery-File-Upload which has worked very well in the past. I did put a feature request in for Client-side image resizing before upload - Megapixels (Mb) rather than Image Resolution (pixels) which was based on jQuery-File-Upload.

This software allows you to build up a ‘collection’ of images to upload, as well as many other things.

From a usability and user experience point-of-view I think this can be very important part of a system that relies on file/image uploads.

Can you suggest an easy way for me to integrate jQuery-File-Upload into my Wappler site? I think I am going to have to revert to using it. Cheers.

#4

Hi, would the dropzone be an alternative to solve what you are trying to do?

2 Likes
#5

Yes, the dropzone component allows this.

#6

Yes @Elias and @Teodor, the dropzone does what I want. I don’t know why I didn’t try it before. Cheers, happy now :slight_smile:

2 Likes
#7

@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.

image

Cheers

#8

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:

dmx-bind:message="browser1.device.width < 768 ? 'mobile message' : 'desktop message'"

Easy - they are accessible in the data picker (under the file upload input) so you can create a repeat region and bind everything you need:

Screenshot_29
Screenshot_29.jpg484×698 62.2 KB

2 Likes
#9

Brilliant. Nice clear explanations. Mini Tut :slight_smile:

1 Like