File Upload Preview (Red "X" Image Broken & Wrong Error Message) [RESOLVED]

Issue: In the back-end, our Gravity Form (preview mode) works great. However, in the front-end, it behaves differently.

Specifically, when we upload a file to our form in the back-end, the “Red X” icon next to the uploaded file displays properly. Also, when we upload a file with a file type not recognized by Gravity Forms, we get the proper error message. In turn, the front-end of our same Gravity Form does not function or behave the same way. The “Red X” icon is broken and the message is incorrect. Click below for details:

Back-End (Works Great):
Front-End (Does Not Work Great):

You can replicate the issue by visiting the following link and trying to upload a dummy file (no need to complete the form, just upload a dummy file)


We tried every possible troubleshooting technique we could think of, but couldn’t find the root cause. All we can think of is that there’s an incompatibility between WordPress and Gravity Forms.

Our Website System Information:

Avada 7.1.1
WordPress 5.5.1
PHP 7.3.23
cURL 7.59.0
MySQL 5.6.40
Gravity Forms 2.4.21

Any help on how to fix this would be appreciated!

Thank you!

Hi Jonathan. This is most likely a conflict with other software running on the site. The clue is that it works correctly when viewed in the form preview, but not on the front end. You can begin checking for conflicts using the Health Check & Troubleshooting add-on. We have an article on its usage here:

That would be the first step and the first thing that will be recommended by support. I would start with that, and if you’re not able to isolate the issue, I recommend opening a support ticket here

Be sure you disable and clear any caching or minification you may be using on the site, while troubleshooting this. It’s also possible that the caching or minification is the thing actually causing the problem with your upload field.

Hi Chris (@chrishajer),

Thank you so much for your help and time. Yes, we tried all of that. Didn’t help.

If you try to upload a file yourself, you’ll notice that - upon inspection - Gravity Forms can’t find the proper source (src) file called “delete.png.” That’s because it’s calling the wrong source (src) file URL path.

In the front-end, this is what it’s calling (click for details):

In the back-end, it’s calling the proper source (src) file URL path (click for details):

So, it sounds like it’s a plugin issue. Can you direct me towards a filter or snippet that will force-call the source (src) file using the proper URL path?

Thank you!

Hi Jonathan, I don’t have a snippet for that. This is not a widely reported issue, so it’s likely a configuration issue on your site. Gravity Forms uses GFCommon::get_base_url() to get the path to the plugin installation. Here’s what the get_base_url() function looks like (from common.php):

    //Returns the url of the plugin's root folder
    public static function get_base_url() {
        return plugins_url( '', __FILE__ );

Something in there is not working correctly on your site. You’ve checked for theme and plugin conflicts, so it’s not likely that, although the way you describe the problem, it definitely sounds like something is interfering. You can see that Gravity Forms and WordPress are working correctly when you view the form in the form preview. That is almost certainly a conflict with other code on the site, coming from a plugin or your theme (a function in the theme functions.php file maybe.) If you’re not able to find the issue on your own, please open a support ticket and we’ll be happy to help you out.

Hi Chris (@chrishajer),

Again, thank you so much. So, I found this snippet but not sure how to use it.

Our Form ID is 5 and Form Field is 44.

Can you kindly tell me how to use the codes? (i.e. snippet). Just need to know what parameters or variables need to change and the specific info that needs to be plugged into the codes. The directions are not that clear to me (not a coder). I believe I can manage with the Placement of the codes.

Idea is to force the “rogue” software to use another icon.

Let’s see what happens :slight_smile:

Thank you!

Note: By the way, checked the code you provided above (i.e., get_base function) and, yes, we do have that in our folders/files.


Issue fixed. As it turns out, we were using Avada’s Code element (and a Gravity Forms shortcode) for our Gravity Forms. Apparently, Avada does not like this so we used Avada’s Gravity Form element instead.

Kudos to Michelle for identifying the root cause of our issue and fix. Team Friendly rocks!

Theme-Fusion (developers of Avada) have been alerted of this bug. Avada’s Code element should work with Gravity Forms’ shortcodes with no issues.


Awesome. Thank you for the update.