Hi All,
We are looking for a better solution for previewing images uploaded using the Multi-File Upload field in gravity forms.
We are currently using some code that displays a “thumbnail” for uploaded images, and this is great, but its referencing the full image and is not creating a smaller sized file (most images uploaded are over 4meg)
Does anyone know a premade solution or plugin that can handle this?
cheers.
Slim Image Cropper for Gravity Forms works great for this! I’m not sure if you can upload multiple images in a single field, but you can definitely add multiple Slim fields to your form. Here is a review I wrote about it: https://builtwithgravity.com/slim-image-cropper-for-gravity-forms-review/
We looked at it before and I think the reason we didn’t go with it because we couldn’t easily test to see if it worked as we needed, as there is a lot of custom code and the images need to be populated in a few places.
We are also using gravity wiz upload to media gallery, so it now looks like an excellent option based on your review.
Thanks so much for your advice.
Hi Michelle,
Have you had any issues using Slim Image Cropper and images not uploading to the media gallery?
We are testing Slim Image Cropper using multiple single images and Gravity Perks Upload to Media Gallery, and it doesn’t seem to work 100% of the time. Some images are not uploaded to the media gallery - we also notice that in the gravity forms temp folder (where images are first placed) they don’t appear either, so it seems its not working on upload.
Hi Bobby,
No, I haven’t had any issues with the images uploading to the media library. I used the same set up you have and uploaded probably close to 100 photos, though only one per form, but I never had an issue. The support at Gravity Wiz is fantastic, so I would definitely reach out to them and see if they can help you troubleshoot. Good luck!
Hi Michelle, I think the issue was with the multi upload per page, and we couldnt get it sorted, so we have now had this custom coded with a solution we like and it works 100% with every upload.
I want to reply here to also let people know that if they need the same solution, i could send them the code.
I’ll leave this open for that reason. Thanks @KrazyTimes
Hi Chris, thanks for that, and it might be easier if i just paste the link which is now on Stack.
Also, according to the gf dox, its probably a better idea to insert the code from and in between
< script type = " text/javascript " > …< / script > into an HTML Block (https://docs.gravityforms.com/html/) in the actual form itself
Hi Bobby Bobs
Thanks for sharing this solution. I’m a newbee to Gravity Forms with a bit of experience running WP sites. Can you provide some details of how the code was implemented.
Thanks
John
Hi John.
You want to copy the code from https://stackoverflow.com/questions/51730931/gravity-form-preview-thumbnails-for-multi-file-upload-field/59100358#59100358 - the first answer by Uday, then place that raw code in a (HTML) </>HTML CONTENT block inside your gravity form, then change this line “var myFilePath = ‘/wp-content/uploads/gravity_forms/FormNameFolderURL/tmp/’;” to your folder name where gravity forms is uploading images (use FTP or file maneger software to login to your site and check the folder name).
That code can go anywhere in the form, but i like to place it just near the image upload fields, let us know how you get on.
Hi Bobby
Thanks for your response.
I have copied Uday’s code into a html block in the form (BTW, it’s missing an opening and closing <?php ?> tags.Took me a while to figure out why part of the code was showing on the page 
) and changed the tmp folder to the match the form. When I use the multi file upload it shows the file name during upload but only shows a red remove icon once completed.
Do I need some additional code to display the thumbnails?
Cheers
John
Jumping into this thread. @KrazyTimes do you have any recommendations based on @user5eed412d60d93251 John B’s issue with the images failing to render? I experienced the same issue with only the red X delete icon. Any help would be hugely appreciated. The Slim Image Cropper seems like a non starter as it doesn’t sound like it would effectively handle multi image upload in conjunction with advanced post creation.
Hi John & Abe,
Are you both sure the URL in the script is correct to the directory where Gravity Forms is placing the images, and that directory folder permissions are ok as well?
When you inspect element do you see any reference to the image or is it empty?
Hey @user5f500a1208117856 & @user5eed412d60d93251
I think i see the issue now, sorry my bad!
Before the code was to be placed directly inside the form, and it now looks like the code on the github might have changed, and is to be placed in your WordPress functions file, ensuring that you change the page slug to your pagename that houses the form
function gravity_image_thumb() {
if ( is_page('slugname') ) {
and, then that URL points to your upload folder, so in Johns case it should be
//Path of your temp file
var myFilePath = ‘/public_html/wp-content/uploads/gravity_forms/1-f2acf0444545344ffgheeer4445/tmp/’;
Hopefully this both works for you.
Thanks for catching that @KrazyTimes. So it is back to exhibiting normal functionality of file upload and file name shown. I uploaded the below code as a php snippet. Would you mind reviewing it to see if there is something askew?
/**
* Upload image action for Gravity Forms
* This script displays the thumbnail upon image upload for multi file field.
*
*/
function gravity_image_thumb() {
if ( is_page('basic-plan') ) {
?>
<script type="text/javascript">
gform.addFilter('gform_file_upload_markup', function (html, file, up, strings, imagesUrl) {
//alert(strings);
//Path of your temp file
var myFilePath = ‘/public_html/wp-content/uploads/gravity_forms/1-f2acfeff154eb1f4caa221960a8d6a92/tmp/’;
var formId = up.settings.multipart_params.form_id,
fieldId = up.settings.multipart_params.field_id;
var fileName = up.settings.multipart_params.gform_unique_id + '_input_' + fieldId +'_'+ file.target_name;
var fid = "fid"+ Math.ceil((Math.random() * (10000 - 1000)) + 1000);
//Converting Image to the base64
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = (300 * img.height)/img.width;
canvas.width = 300; //img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
convertImgToBase64URL(myFilePath + fileName , function(base64Img){
var ffid = "#"+fid;
$(ffid).attr("src", base64Img);
console.log('RESULT:', base64Img);
});
html = '<img id="'+fid+"\" src='' style='width:100%;height:auto;'/><img class='gform_delete' " + "src='" + imagesUrl + "/delete.png' "+ "onclick='gformDeleteUploadedFile(" + formId + "," + fieldId + ", this);' " + "alt='" + strings.delete_file + "' title='" + strings.delete_file + "' />";
return html;
});
</script>
<?php }
}
add_action('wp_head','gravity_image_thumb');
Hi again, finally the code is now working and tested below, add this again to an HTML field in Gravity forms, changing ‘YOURURLHERE’ to the folder name
<script type="text/javascript">
gform.addFilter('gform_file_upload_markup', function (html, file, up, strings, imagesUrl) {
//alert(strings);
//Path of your temp file
var base_url = window.location.origin;
var myFilePath = base_url + '/wp-content/uploads/gravity_forms/5-85c5e83ec71e3058bcde1c22c5654143/tmp/';
var formId = up.settings.multipart_params.form_id,
fieldId = up.settings.multipart_params.field_id;
var fileName = up.settings.multipart_params.gform_unique_id + '_input_' + fieldId +'_'+ file.target_name;
var fid = "fid"+ Math.ceil((Math.random() * (10000 - 1000)) + 1000);
//Converting Image to the base64
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = (300 * img.height)/img.width;
canvas.width = 300; //img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
convertImgToBase64URL(myFilePath + fileName , function(base64Img){
var ffid = "#"+fid;
jQuery(ffid).attr("src", base64Img);
console.log('RESULT:', base64Img);
});
html = '<img id="'+fid+"\" src='' style='width:100%;height:auto;'/><img class='gform_delete' " + "src='" + imagesUrl + "/delete.png' "+ "onclick='gformDeleteUploadedFile(" + formId + "," + fieldId + ", this);' " + "alt='" + strings.delete_file + "' title='" + strings.delete_file + "' />";
return html;
});
</script>
Hey Bobby,
This is great! Thank you for your diligence on solving this one. I’m getting images to load now int the form however the image previews are rendering in large format, not thumbnail. I attempted to play with the width, height, and canvas size inputs; however, my changes had no effect. What am I missing in terms of rendering the images at a thumbnail size closer to 75 x 75 (but with aspect ratio accounted for)?
Again, thank you for all your help so far on this.
Best,
Abe
Hi Abeand @user5eed412d60d93251 ,
depending on how your form is set out, you can change the width part below, from 100% to a fixed px width or percentage
html = ‘<img class=“imagesizing” id="’+fid+"" src=’’ style=‘width:100%;height:auto;’/><img
Hey Bobby
Thanks so much for getting this sorted. I have tested this version and can confirm that it’s working perfectly. Also being able to manage the image width display keeps the styling consistent.
This really adds the finish to our Gravity Form.
Much appreciated.
I found that {fileName} had some random string. It’s between {input id} and {file.target_name}. Ex: 4a017277_input_5_zfKuGrwCd91CyiHy_o_1esroacel59uais19ev1dqa405q.png. What is {zfKuGrwCd91CyiHy}? I’m stuck 