Discuss

Show Image Preview Before Upload

On this page

When uploading images you can display a small preview thumbnail of the selected image. You can use this in two cases:

1. For single image upload

You already know how to UPLOAD SINGLE IMAGE TO YOUR SERVER so we will just extend your existing form/layout.

Select your upload field form group, and click Insert After:

Screenshot_4|690x367

Add a row:

Screenshot_5|690x367

Click insert inside:

Screenshot_6|690x367

And add a column:

Screenshot_7|690x367

That's where our image will be placed. Click insert inside:

Screenshot_8|690x367

Open the Content Category and insert an image:

Screenshot_9|690x367

Enter the width for your thumbnail. We enter 120 pixels:

Screenshot_10|690x367

Then add new dynamic attribute:

Screenshot_11|690x367

Open Images and select Image Source:

Screenshot_12|690x367

Then, click the dynamic data picker button:

Screenshot_13|690x367

Expand your file field (1), then the file group (2) and select the dataUrl (3) binding:

Screenshot_14|690x367

Then add another dynamic attribute:

Screenshot_15|690x367

Open Display and select Show:

Screenshot_16|690x367

Then click the dynamic data picker to select when to show the thumbnail:

Screenshot_16|690x367

Under your upload field select - value. So only when an image is selected, the thumbnail will be displayed:

Screenshot_18|690x367

And you are done. As soon as you select an image, the preview thumbnail will display it:

Screenshot_19|690x367

2. For multiple images upload

You already know how to UPLOAD MULTIPLE IMAGES TO YOUR SERVER so we will just extend your existing form/layout.

Select your upload field form group, and click Insert After:

Screenshot_4|690x367

Add a row:

Screenshot_5|690x367

Click insert inside:

Screenshot_6|690x367

And add a column:

Screenshot_7|690x367

That's where our image will be placed. Click insert inside:

Screenshot_8|690x367

Open the Content Category and insert an image:

Screenshot_9|690x367

Turn on the Responsive option for the image:

Screenshot_4|690x367

Then, select the column which wraps the image and set its sizes for different screens. The image will be as wide as your column is:

Screenshot_5|690x367

Then select the parent Row, and click the Make Repeat Children button:

Screenshot_6|690x367

Select an expression for the repeat:

Screenshot_7|690x367

Expand your multi file input (1) and select the files array (2):

Screenshot_8|690x367

The repeat region will repeat the columns with the image inside, as many times as the number of selected images is. Now let's bind the source for the image. Select the image and add new dynamic attribute:

Screenshot_9|690x367

Open Images and add Image Source:

Screenshot_10|690x367

Click the dynamic data picker for the value:

Screenshot_11|690x367

Under the Repeat select the dataUrl binding:

Screenshot_12|690x367

And now, go back to the row and add new dynamic attribute:

Screenshot_13|690x367

Open Display and select Show:

Screenshot_14|690x367

Select when to show it:

Screenshot_15|690x367

Under the multi file input select value:

Screenshot_16|690x367

And you are done. The repeating row with images will be displayed as soon as you select images in the file field:

Screenshot_17|690x367


WapplerPrevious|101x31   WapplerNext|77x31