Image preview

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/



    [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


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

      Post navigation

      You might be interested in...

      No comments yet, be the first!

      Comments

      Your email address will not be published. Required fields are marked *