Remove the upload percentage from the File Upload field in Gravity Forms.

In Gravity Forms, you can add the File Upload field to allow users to upload documents when submitting your form.

It can be used for virtually any file type, from text documents to image files, etc.

Gravity Forms, like any form software, validates unfilled required fields. If a user tries to submit a form without completing the required fields, the form page will reload with an error.

If the user uploaded a file during that incorrect submission, the file will persist in the upload field through the page refresh with the error.

But, a percentage number will suffix the filename in the upload field.

Something like this:

If there were no problems with the upload during the form error evaluation, the percentage would be equal to 100%.

That means the file was completely uploaded with the upload field and is ready.

If you complete the form, the file will be submitted along with any other data entered by the user.

What if you want to remove that percentage from the upload field?

So, even if the form page is reloaded when errors are found, the percentage is not displayed.

This is possible with a filter called gform_file_upload_markup.

Documentation here: https://docs.gravityforms.com/gform_file_upload_markup/.

First, we must understand that the upload percentage is part of the File Upload field markup.

The upload percentage is an HTML element under a span tag with its own CSS class, gfield_fileupload_percent.

You could add a quick CSS snippet and hide the upload percentage with display: none, like so:

.gfield_fileupload_percent{
     display:none;
}

And that works well. But it is only a cosmetic effect.

The percentage is still there in the DOM.

An alternative method is removing the upload percentage from the File Upload field markup before rendering it in the front end.

That’s where the gform_file_upload_markup filter comes into play.

The filter in question helps you intercept the File Upload field markup in Gravity Forms.

The challenge is that a long array of markup is associated with that filter.

If not handled carefully, you could mess up the File Upload field markup.

To solve this issue, you can leverage PHP’s string manipulation capabilities.

In this instance, you can check in the filter for the existence of the upload percentage field in the File Upload markup.

If it does not exist, abort further execution and return the File Upload field markup as is.

But if it is detected, then continue the execution: fiend the start and end of the span element with the CSS class gfield_fileupload_percent assigned to it.

Then, remove the selected element from the File Upload field markup.

Below is an example snippet that would achieve just that:

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

function remove_gfield_fileupload_percent( $file_upload_markup, $file_info, $form_id, $field_id ) {
    // Check for the presence of 'gfield_fileupload_percent' in the markup.
    $percent_pos = strpos( $file_upload_markup, 'gfield_fileupload_percent' );
    if ( $percent_pos === false ) {
        // If 'gfield_fileupload_percent' is not found, return the current markup as is.
        return $file_upload_markup;
    }

    // Find the start of the span containing 'gfield_fileupload_percent'.
    $start_pos = strrpos( substr( $file_upload_markup, 0, $percent_pos ), '<span' );

    // Find the end of the span.
    $end_pos = strpos( $file_upload_markup, '</span>', $percent_pos ) + 7;

    // Remove the span containing 'gfield_fileupload_percent'.
    $file_upload_markup = substr_replace( $file_upload_markup, '', $start_pos, $end_pos - $start_pos );

    return $file_upload_markup;
}

This code should go in your theme’s functions.php or your preferred code snippets plugin.

The code can be used as is without the need for modification.

The exception would be that you want to add any custom conditions, etc.

Until next time!