How to display uploaded images on the page?

[Alex (Alex Chernenko)]

The default widget behavior is when a user selects an image, its preview is then shown in the upload dialog. You might want to embed this preview in your page somewhere around the widget button. Such a preview could be more informative than simply displaying file names and sizes.

See this live demo to learn how to do this.

Note, you have full control over size and position of your embed, just use CSS.

Image preview for a multi-file widget may look different:

See this live demo to learn more.

You can change the displayed images or rearrange the existing ones; all changes will then be reflected in the thumbnail list.

• It helps
• It doesn’t help

[marcell]

Thanks Alex,

I think it would be EVEN MORE helpful if the code was general and we were able to copy and paste it. I think that’s the great thing about Uploadcare and no code tools. I tried to do that with this and just ended up pasting more upload image fields with piers and birds. Eek.

Can you guys post the code just to get the image and preview it? Pretty please, this will really help users on the uploadcare tool.

[Alex (Alex Chernenko)]

Hi @marcell, thanks for the feedback! I’m not sure if the code can be simplified in such a way that you can simply copy and paste it on Webflow to make it work. Can you please tell me what the desired result should look like?

[marcell]

Hey Alex,

Thanks again, the feature is once you pull in the image it not only uploads it but stays on the page it was uploaded to. Right now it looks like…

But it would be better to just show the actual image.

It seems like that would be possible with generic code no? I know nothing. I think being able to style the image afterwards, adding my 130 by 130 px and 50% radius to make a circle would be a bonus, but at the very list being able to show it.