Displaying error when Attachment file selected is too large

General HivePress
1

Hi,

I have an Attachment field type for PDF uploads. However, when the file selected upon clicking “Select File” exceeds the max upload size for the server/application, the button’s spinner just keeps spinning (along with the Save/Submit button on the page). How can we inform the user that the file is too big and have it “fail” more friendlier?

Thanks for your assistance.

4

Hi,

Is it possible that the file is too large and the upload process is still running in the background?

If not, please make sure that the upload size limit is restricted at the WordPress level (not only the PHP/server level). Normally, if the file exceeds the allowed limit, WordPress should display an error message such as “File size exceeds the maximum upload limit” or a similar notice.

5

Hi @kseniia,

You’re right. Looking into it further, the PDF I am using is over 40MB. I have set in my .user.ini 10MB, but my server is set to 32MB. I have tried it with an 11MB PDF and I do see a “The selected file exceeds the maximum upload size…” error now.

Do you think there is any way we can prevent the button from being stuck in a spinning state and provide feedback when this happens? I am unsure why the file exceeds error does not show when the file is larger than the server setting? Some users will inevitably try to upload larger files without knowing what’s going on, even if we put it in the description.

Thank you. :slight_smile:

7

Hi @kseniia. Just an update when working with AI to assist with this. I have asked it to summarise the findings below. It seems to be working when I apply it as a temporary fix, but I am not a developer. I hope this could lead to a solution as a plugin update? Thanks!

The browser console shows the following when this happens:

Uncaught TypeError: can't access property "hasOwnProperty", e is undefined

Cause

This is actually a bug in HivePress. It should first check whether response exists before trying to access it.

In:

hivepress/assets/js/common.js
hivepress/assets/js/common.min.js

the file upload always callback assumes that every failed upload returns JSON:

var response = data.jqXHR.responseJSON;

response.hasOwnProperty('data')

However, when the server rejects the upload (for example HTTP 502 or 413), responseJSON is undefined, causing the JavaScript exception.

Suggested fix

Add a check before accessing hasOwnProperty:

var response = data.jqXHR ? data.jqXHR.responseJSON : null;

if (!response) {
    messageContainer
        .html('<div>The upload failed. The selected file may exceed the server upload limit. Please choose a smaller file and try again.</div>')
        .show();

    return;
}

This preserves existing behavior for successful uploads and API validation errors while gracefully handling server-level upload failures.

A null check around responseJSON would prevent the UI from becoming stuck when the server rejects the upload before returning JSON.

1 Like