hi @terocha,
this is an example an image preview below the file field (copy and paste this code in form template cf7 page, enabled only with jpg):
[file fileuploader filetypes:jpg id:uploader]
<img id="preview" src="#" />
<script>
var uploader = document.getElementById('uploader');
uploader.addEventListener('change', (event) => {
var binaryData = [];
binaryData.push(document.getElementById('uploader').files);
if (binaryData) preview.src = window.URL.createObjectURL(binaryData[0][0]);
});
</script>
ps this is just one example, needs to be refined.
Hi Erik,
Thank you for your reply.
When you refer to the form template cf7 page whitch is that page.
I can’t insert the script code in the form itself.
Regarding the line of code 
shouldn’t I indicate the url of the image? But being the image that I am downloading what url should I insert?
Thank you once again.
Regards.
Line of code: <img src="#" />
-
This reply was modified 4 years, 10 months ago by
terocha.
I can’t insert the script code in the form itself.
why? just copy and paste (without additional breakline) into your form template (not inside the page with the form) like in this example:
https://modul-r.codekraft.it/2021/07/image-preview/
-
This reply was modified 4 years, 10 months ago by
Erik.
Hi Erik,
I tried inserting the script in the form itself and it works!
Thanks!
Regards
When submit the form, all fields are cleared except for the image preview. How can I clear this preview?
hi @terocha, sorry for late reply.
you can delete the image after submission using the DOM events.
this could be an (updated) example code:
[file fileuploader filetypes:jpg id:uploader]
<div id="preview"></div>
<script>
var uploader = document.getElementById('uploader');
uploader.addEventListener('change', function(event) {
var binaryData = [];
binaryData.push(document.getElementById('uploader').files);
if (binaryData[0][0]) {
var img = document.createElement('img');
img.src = window.URL.createObjectURL(binaryData[0][0]);
document.getElementById('preview').innerHTML = '';
document.getElementById('preview').appendChild(img);
}
});
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
document.getElementById('preview').innerHTML = '';
}, false );
</script>
[submit "Submit"]
