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:
-
- We set the extensions to only allow the image type we set
-
- 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:
To make the script ( follows later) work you need two values / variables:
- the form id.
- the field id (from the upload field)
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!