gform_file_upload_markup

Description

The “gform_file_upload_markup” filter can be used to modify the HTML for the multi-file upload “preview”.

Usage

The gform_file_upload_markup filter has both a JavaScript version and a PHP version. Both versions should be used.

The JavaScript version modifies the HTML the first time the uploaded file preview displays.

gform.addFilter( 'gform_file_upload_markup', function( html, file, up, strings, imagesUrl, response ) {
    // do stuff

    return html;
} );

The PHP version changes the uploaded file preview HTML on a multi-page form when you click Previous/Next after a file has been uploaded.

add_filter( 'gform_file_upload_markup', function( $file_upload_markup, $file_info, $form_id, $field_id ) {
    // do stuff

    return $result;
}, 10, 4 );

JavaScript Version

Parameters

  • html string

    The current html for the field.

  • file Javascript Object

    Details about the file uploaded.

  • up Javascript Object

    The FileUpload object.

  • strings Javascript Object

    Strings used for upload messages.

  • imagesUrl string

    The URL to the images folder.

  • response Javascript Object

    The response from GFAsyncUpload. Since version 2.4.22.3.

    {
  "status": "ok",
  "data": {
    "temp_filename": "randomly-generated-temp-filename-here.png",
    "uploaded_filename": "image.png"
  }
}

Examples

Change delete button

This example shows how to change the delete button that is next to the uploaded file.

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

Access temporary filename

This example shows how you can access the temporary file name of the uploaded file with Gravity Forms 2.4.22.3 and greater.

gform.addFilter( 'gform_file_upload_markup', function( html, file, up, strings, imagesUrl, response ) {
    var temp_name = rgars( response, 'data/temp_filename' );
    // Do something with the temp_name.
 
    return html;
} );

Placement

Your code snippet can be placed in an HTML field on your form or in the theme’s custom JavaScript file that loads on the form’s page.

Source Code

This filter is located in js/gravityforms.js.

PHP Version

Parameters

  • $file_upload_markup string

    The current html for the field.

  • $file_info array

    Details about the file uploaded.

  • $form_id integer

    Form ID.

  • $field_id integer

    Field ID.

Example

This example shows how to change the delete button that is next to the uploaded file.

add_filter( 'gform_file_upload_markup', 'change_upload_markup', 10, 4 );

function change_upload_markup( $file_upload_markup, $file_info, $form_id, $field_id ) {
  return '<strong>' . esc_html( $file_info['uploaded_filename'] ) . "</strong > <img class='gform_delete' src='" . GFCommon::get_base_url() .
"/images/delete.png' 
  onclick='gformDeleteUploadedFile({$form_id}, {$field_id }, this);' />";
}

Placement

Your code snippet should be placed in the functions.php file of your active theme.

Source Code

This filter is located in GF_Field_FileUpload::get_field_input() in gravityforms/includes/fields/class-gf-field-fileupload.php.