bookmark_bordergform_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 ) {
    // 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 _autolink_string

    The current html for the field.

  • file _autolink_javascript-object

    Details about the file uploaded.

  • up _autolink_javascript-object

    The FileUpload object.

  • strings _autolink_javascript-object

    Strings used for upload messages.

  • imagesUrl _autolink_string

    The URL to the images folder.

Example

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

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 _autolink_string

    The current html for the field.

  • $file_info _autolink_array

    Details about the file uploaded.

  • $form_id _autolink_integer

    Form ID.

  • $field_id _autolink_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