---
# Image preview

**URL:** https://modul-r.codekraft.it/2021/07/image-preview/
Date: 2021-07-26
Author: Erik
Post Type: post
Summary: This is an example created some times ago for a support question into contact form 7 support forum, but could be very useful in order to show the uploaded images into a form with a input type file. ref. https://wordpress.org/support/topic/image-upload-preview-before-submit/ Example 2 This is another example that check the image size to be less than […]
Categories: Blog, Contact form 7
---

This is an example created some times ago for a support question into contact form 7 support forum, but could be very useful in order to show the uploaded images into a form with a [input type file.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)

ref. [https://wordpress.org/support/topic/image-upload-preview-before-submit/](https://wordpress.org/support/topic/image-upload-preview-before-submit/)

[contact-form-7 id="665" title="image upload"]

```
[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"]
```

##### Example 2

This is another example that check the image size to be less than 5000px, otherwise an error will be shown using the javascript validity alert

[contact-form-7 id="3604" title="image upload 2"]

```
[file fileuploader filetypes:jpg id:uploader]
<div id="preview"></div>
<script>
var _URL = window.URL;
const fileInput = document.getElementById( 'uploader' );
fileInput.onchange = function () {
	let file, img;
	if ( ( file = this.files[ 0 ] ) ) {
		img = new Image();
		img.onload = function () {
			if ( this.width * this.height < 5000 ) {
			        alert( 'image pixels ' + this.width * this.height + '. OK!' );
			} else {
				alert( this.width + ' ' + this.height );
				fileInput.value=null;
				fileInput.setCustomValidity( 'error' );
				fileInput.reportValidity();
			}
		};
		img.onerror = function () {
			alert( 'not a valid file: ' + file.type );
		};
		img.src = _URL.createObjectURL( file );
	}
};
</script>
[submit "Submit"]
```

---

## Categories

- Blog
- Contact form 7

---

## Navigation

- [Home](https://modul-r.codekraft.it/)
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Shop](https://modul-r.codekraft.it/shop/)
- [Tag /Archive format](https://modul-r.codekraft.it/tag/post-formats/)
- [Modul R](https://wordpress.org/themes/modul-r/)
- [Modul R (git)](https://github.com/erikyo/Modul-R)
- [Modul R Child (git)](https://github.com/erikyo/Modul-R-child)
- [CF7 Antispam](https://wordpress.org/plugins/cf7-antispam/)
- [OH-MY-SVG](https://modul-r.codekraft.it/oh-my-svg/)
- [Model-Viewer WordPress block](https://modul-r.codekraft.it/model-viewer-wordpress-block/)
- [Remove Capslock](https://wordpress.org/plugins/remove-capslock)
- [Blog](https://modul-r.codekraft.it/category/random-access-memories/)
- [Codekraft](https://github.com/codekraft-studio)
- [About Me](https://modul-r.codekraft.it/erik-golinelli/)
- [Contact](https://modul-r.codekraft.it/contacts/)
- [Credits](https://modul-r.codekraft.it/credits/)

---

## Footer Links

- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Download](https://wordpress.org/themes/modul-r/)
- [Contact form 7](https://modul-r.codekraft.it/category/contact-form-7/)
- [Quick Start](https://modul-r.codekraft.it/category/quick-start/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Post Formats](https://modul-r.codekraft.it/category/post-formats/)
- [Block](https://modul-r.codekraft.it/category/block/)
- [Clothing](https://modul-r.codekraft.it/product-category/clothing/)
- [Privacy Policy](https://modul-r.codekraft.it/privacy-policy/)
- [Proudly powered by WordPress & made in Bologna with ♥ by Codekraft](https://codekraft.it/)