Puddinq.com sharing knowledge

Gravity Forms image upload preview

Gravity Forms image upload preview

Gravity forms is like magic, you can create a form with advanced options without any real knowledge of coding. The basic plugin does not offer a way to show image previews for uploaded images, but with a little extra code it is easily implemntated.

The code is just copy paste while changing 2 numbers. Everybody can do it, you can do it.

First you need an image upload field:

Create a file upload field - Gravity forms

    1. We set the extensions to only allow the image type we set
    1. Then we set the maximum upload size to 5MB

After the upload field we place the preview field: a HTML block. Add it to your form. We need two numbers:
Add image preview fields - Gravity forms

To make the script ( follows later) work you need two values / variables:

  • the form id.
  • the field id (from the upload field)

Get form id and field id

Now we can fill the content of our HTML block with the code we need:
(copy paste it, and adjust the two values)

<div id="imgview"><img src="dummy.jpg" ></div>
<script>
 
    jQuery('#imgview').hide();
 
    function readURL(input) {
 
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            jQuery('#imgview').show();
            reader.onload = function (e) {

                jQuery('#imgview>img').attr('src', e.target.result);
            }
 
            reader.readAsDataURL(input.files[0]);
        }
    }
 
    // change this "#input_1_12"
    jQuery(document).on("change", "#input_1_12", function () {
        readURL(this);
    });
</script>

The line below ‘change this’ you change the 1 to be your form id and the 12 to be you field id and that’s it

Save the form and testrun you script!