Using Gravity Forms ‘gform_file_upload_markup’ PHP filter

by

The gform_file_upload_markup filter in Gravity Forms allows you to modify the HTML markup for the multi-file upload preview.

Usage

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

function your_custom_function( $markup, $file_info, $form_id, $field_id ) {
    // your custom code here
    return $markup;
}

Parameters

  • $markup (string): The current HTML markup for the file upload preview.
  • $file_info (array): Information about the uploaded file.
  • $form_id (int): The ID of the form where the upload field is located.
  • $field_id (int): The ID of the file upload field.

More information

See Gravity Forms Docs: gform_file_upload_markup

Examples

Change delete button

This example changes the delete button next to the uploaded file:

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

function change_delete_button( $markup, $file_info, $form_id, $field_id ) {
    $images_url = GFCommon::get_base_url() . "/images";
    $strings = array( 'delete_file' => __( 'Delete this file', 'gravityforms' ) );
    $markup = "<strong>{$file_info['uploaded_filename']}</strong> <img class='gform_delete' src='{$images_url}/delete.png' onclick='gformDeleteUploadedFile( {$form_id}, {$field_id}, this );' alt='{$strings['delete_file']}' title='{$strings['delete_file']}' />";
    return $markup;
}

Add a custom CSS class

This example adds a custom CSS class to the file upload preview:

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

function add_custom_css_class( $markup, $file_info, $form_id, $field_id ) {
    $markup = str_replace( '<span class="', '<span class="custom-class ', $markup );
    return $markup;
}

Wrap preview in a div

This example wraps the file upload preview in a div with a custom class:

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

function wrap_preview_in_div( $markup, $file_info, $form_id, $field_id ) {
    $markup = '<div class="custom-wrapper">' . $markup . '</div>';
    return $markup;
}

Add additional information

This example adds additional information below the file upload preview:

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

function add_additional_information( $markup, $file_info, $form_id, $field_id ) {
    $additional_info = '<p>Additional information about the uploaded file.</p>';
    $markup .= $additional_info;
    return $markup;
}