Display image using upload button before submit to database

Ask the community
,
1

I have a form that gives users the ability to submit an image. I want them to see a preview of the image they uploaded in certain dimensions before they submit the entire form. How is this possible?

2 Likes
2

Does anyone know?

3

Try this previous forum post and add the uploaded file url into the code so that they can view it.
https://www.wix.com/code/home/forum/community-discussion/simple-solution-for-upload-progress-of-image

4

Hi GOS, this option will need the image to be fully uploaded to the Media Manage or Database. There is a way to display the image on the website without having it in the Media Manager already?

5

@weaverbrasilcontato
Yes there is a way, but not trough VELO-API, as i know.
You can do it with the HELP of HTML-Component.

But a lot of CODING-SKILLS needed, especialy at the HTML-CODING.

6

@russian-dima could you give me some more details or some directions where to find it? please! :slight_smile:

7

@weaverbrasilcontato
You will have to create a connection between HTML-Component and your page.

<img id="output_image" height=150px width=150px >
<input type="file" accept="image/*" onchange="preview_image(event)">

<script>
  function preview_image(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output_image');
      output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
  }
</script>
8

@russian-dima Sorry for the long time to answer, but you did help with the code.

With yours, it is displaying the image above the input and I needed it to display in a different #element inside the page. I managed to do it, after a couple of hours hahaha.

If anyone needs help and code, just ask and I post it here.

but, as Velo Ninja said, you will need to study a bit of this https://support.wix.com/en/article/velo-working-with-the-html-iframe-element.

9

@weaverbrasilcontato
I do not know how you did it :laughing:, but you surely will have another solution than i do​:grin:

And one day you perhaps will be able to generate a real MULTI-UPLODER, who knows …

10

sorry, when i said “you” is like, the third person reading this post for help rsrsrs
I know you are a master with velo! :slight_smile: