A grid of previews of the uploaded files

Hello Jotform,

I'm wondering if it's possible to have a grid of previews of the uploaded files (images) displayed above the upload button once an user uploaded something. I know there're widgets that display preview of files, but so far I haven't found anything which allows you to do multiple files uploading and provides multiple previews, through file selection instead of dropping files into a field.

Here's the link to the copy of form I'm working on:

http://www.jotform.com/?formID=52657248699272

Right now, after uploading, there'll be a list of the names of the uploaded files, which is nice actually. But I'd really appreciate it if the previews of the uploaded files can be small images, instead of a list of file names.

Thanks a lot!

Best,

Chao

If you need more advanced upload solution you might try a Filepicker integration which provides the small image previews.

This is also possible to preview images with Drag and Drop Upload widget.

Let us know if you need any further assistance.

Thanks a lot for attending to my question!

I've tried both widgets before. Although they do provide previews, here're a few things that I want but I cannot achieve using the widgets you suggested:

1) Instead of a) displaying the previews only on the upload interface on top of the form (when using Filepicker widget) or b) only showing the previews when the file name is hovered (if using Drag and Drop upload widget), I'd like the previews of uploaded images to be displayed on the form and to stay on the form even they are not hovered.

2) I hope to use upload button instead of a drag and drop field, so it seems the Drag and Drop Upload widget won't work for me in this case? Ideally, I hope the previews of the images can be displayed above the upload button.

Thanks so much again, I look forward to learning more about your insights!

Best,

Chao

I'm afraid that we do not have any widgets with your exact requirements, but we can customize the existing Drag and Drop Upload widget with some custom CSS to show small previews of images at all times.

You can do so by clicking on the wand-shaped icon of this widget, switching to the Custom CSS tab, and pasting this code:

.webui-popover {
display: block !important;
max-height: 36px !important;
min-height: 0 !important;
margin-top: -24px !important;
border: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
right: 2px;
left: auto !important;
}
.webui-popover-content {
padding: 0 !important;
}
.webui-popover .arrow {
display: none !important;
}
.webui-popover img {
max-width: none !important;
max-height: 36px!important;
}

Basically, it will make the previews show at all times as in the following image:

You can test a demo form of this feature, here:

https://secure.jotformpro.com/form/52705976586976

I hope this helps.

Hello and thanks for the demo!

However what I really need is to use an upload button to upload files, and to have previews displayed next to the button. 

The upload button tool I'm using right now does provide a list of file names, but I'm wondering is there someway to actually display the images?

Thanks a lot!

Chao

Hello Chao,

I did check your form and found that you are using normal file upload field with "Allow Multiple". Unfortunately, it is not possible to display the image preview after the file is uploaded. 

I believe my colleague @Boris solution should work for you but you will have to use Drag & Drop upload widget in form. 

Thank you!