gravity form preview thumbnails for multi file upload field

Question

We are using Gravity Forms to attach multiple images to a gallery custom field and create new post. We can't figure out how to show the image thumbnails under the import HTML5 import field instead of just the file names prior to form submission.

This previous answer covers only single file upload: gravity form preview of image upload

That mechanism is different it seems.

I also see GF offers a JS function to filter the image data returned but I can't figure out how to get the temporary img urls to display tags. That reference is here:

gform.addFilter('gform_file_upload_markup', function (html, file, up, strings, imagesUrl) {
  var formId = up.settings.multipart_params.form_id,
  fieldId = up.settings.multipart_params.field_id;
  html = '<strong>' + file.name + "</strong> <img class='gform_delete' "
  + "src='" + imagesUrl + "/delete.png' "
  + "onclick='gformDeleteUploadedFile(" + formId + "," + fieldId + ", this);' "
  + "alt='" + strings.delete_file + "' title='" + strings.delete_file + "' />";

return html;
});

score 2 · Answer 1 · answered Nov 29 '19 at 07:20

To show the preview of the image with just thumbnail size. You need to convert your image to the base64 so it will not take much time to load and it will show perfect.

 /**
 * 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('slugname') ) {
     ?>
    <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 = '/wp-content/uploads/gravity_forms/FormNameFolderURL/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');

parvaneh · Answer 2 · 2020-01-26T15:35:35.023

Have you found a Solution for this? If not, I would like to share mine:

gform.addFilter('gform_file_upload_markup', function (html, file, up, strings, imagesUrl) {
var myFilePath = 'https://your-domain.com/wp-content/uploads/gravity_forms/1-0bfa8914c61ec9b6ff8b3e2c78f497f4/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;

html = '<img src="' + myFilePath + fileName + "\"/>' <img class='gform_delete' "
+ "src='" + imagesUrl + "/delete.png' "
+ "onclick='gformDeleteUploadedFile(" + formId + "," + fieldId + ", this);' "
+ "alt='" + strings.delete_file + "' title='" + strings.delete_file + "' />";
return html;

});

I am using the image in /tmp, because that's the folder where the Image gets uploaded before the Form is submitted completley.

/{some-numbers-and-letters}/

this is the Folder where the tmp Folder is located. I guess you can change that.

Thank you! I was having a hard time getting that file name. Just a note you can also pass the myFilePath to your JS through PHP by doing something like this var myFilePath = ''; — Bullyen, Mar 28 '19 at 19:43
You're disclosing a hidden folder (1-0bfa8914c61ec9b6ff8b3e2c78f497f4) in your HTML. That's dangerours. — Francisco R, Jan 22 '20 at 18:35
Thanks. Can you please delete the folder's name from your comment? — parvaneh, Jan 26 '20 at 15:35

gravity form preview thumbnails for multi file upload field

2 Answers2

Linked