Gracefully handle upload error due to filesize

I've inherited a project with media uploads, performed from a Vue component and axios post to send the form data.

The problem is that when the file is below PHP's max upload size, but over the max: validation rule, I get a Laravel error message and a Http status that tells axios that an error occurred.

However, when the filesize is above the max_upload, the webserver responds (not Laravel) and returns a 200 Http response and html text as response.data

<br />
<b>Warning</b>:  POST Content-Length of 60236460 bytes exceeds the limit of 20971520 bytes in <b>Unknown</b> on line <b>0</b><br />

which if course does not get caught by axios and the html response is taken as the media model that should be returned from a successful upload.

Any suggestions how I can stop the server from sending an html response?

            window.axios.post('/media', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'Accept':'application/json',
                }
            }).then(response => {
                this.fileToUpload.uploading = false;
                this.resetUpload();
                this.items.unshift(response.data);
            }).catch(error => {
                this.resetUpload();
                this.fileToUpload.uploading = false;
                this.fileToUpload.error = 'There was an error uploading the file, please try again.';
            });

LaryAI

2 years ago

Level 58

To handle the situation where the file size exceeds the server's maximum upload size, you can do the following:

Configure your web server to return a proper error code when the file size exceeds the limit. For example, in Apache, you can use LimitRequestBody directive in your .htaccess or server configuration file to set the maximum allowed size for an uploaded file. If the limit is exceeded, Apache will return a 413 Request Entity Too Large status code.
In your PHP configuration (php.ini), you can set the display_errors directive to Off to prevent PHP from outputting errors directly to the browser, which can help avoid the HTML error response.
In your Vue.js component, you can check the file size before attempting to upload it. This way, you can provide immediate feedback to the user if the file is too large, without even trying to send it to the server.

Here's an example of how you might implement the client-side check in your Vue component:

window.axios.post('/media', formData, {
    headers: {
        'Content-Type': 'multipart/form-data',
        'Accept': 'application/json',
    }
}).then(response => {
    this.fileToUpload.uploading = false;
    this.resetUpload();
    this.items.unshift(response.data);
}).catch(error => {
    this.resetUpload();
    this.fileToUpload.uploading = false;
    if (error.response && error.response.status === 413) {
        this.fileToUpload.error = 'The file is too large and cannot be uploaded.';
    } else {
        this.fileToUpload.error = 'There was an error uploading the file, please try again.';
    }
});

// Before making the POST request, check the file size
const MAX_FILE_SIZE = 20971520; // 20MB, for example
if (this.fileToUpload.size > MAX_FILE_SIZE) {
    this.fileToUpload.error = 'The file is too large and cannot be uploaded.';
    return;
}

By implementing these changes, you should be able to handle file size errors more gracefully. The server will return a proper error code when the file size exceeds the limit, and the client-side code will prevent the upload from even being attempted if the file is too large, providing immediate feedback to the user.

gych

2 years ago

Best Answer

Level 29

As far as I know, unless you disable start up errors from .htaccess file or php.ini this is not possible. But by disabling this, all start up errors will be disabled so personally I don't prefer to do it this way.

In my project I validate it on client side before posting the image to the server.

What might be another solution is to check if the response.data contains the message about max filezise and trigger the error based on if its true or false.

1 like

Snapey

2 years ago

Level 122

I ended up checking the size locally before sending

if (this.fileToUpload.raw.size > 18*1024*1024) {
    this.fileToUpload.error = 'The file is too large, please cancel then resize before uploading';
    return;
}

Please or to participate in this conversation.