gravity form preview thumbnails for multi file upload field

问题

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;
});

回答1:

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');

回答2:

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.