Volt component won't show a validation error when Content Too Large (413). It only outputs a console log.

I'm building a simple image upload component using Volt, which looks like this :

public function uploadImage()
    {
        $this->validate([
            'uploadedImage' => 'image|max:1024',
        ]);

        $this->uploadedImage->store('photos');
        dd('image uploaded');
    }

Now, when I try to upload something larger than 1MB, it shows the validation error on the page without a problem.

However when I try to upload an image that is 20MB in size, it doesn't show any error on the screen. Not even a 413 error page redirect. Only output it generates is in the console, which says something like :

[XHR] POST
"http://127.0.0.1:8000/livewire/upload-file?expires=1729176002&signature=d3c4248183c2cb7300f0929739dd4f39ee2f344f4ab8b39dc811f182398c1a82"
[HTTP/1 413 Content Too Large 28ms]

Since I'm already using a validation rule for the file size, I think it should be at least redirecting to an error page, if not throw a validation error.

I'm wondering if there's a way to handle/catch this error in the component and show the validation error accordingly in a UX friendly way.

motinska94

1 year ago

Level 3

Either I suck at this, or Volt handles file uploads very poorly. Again, it might be a me problem but I'm finding a ton of bugs as I'm trying to solve this issue. Here's a few :

422 Unprocessable Content error (still nothing validation-wise, the error is on the console logs) : the file input has accept="image/*" attribute, and I'm selecting an image, mimetype exactly shows : image/jpeg And I have no idea what is unprocessable about this file.
The uploadedImage failed to upload. validation error : While the only unvalidated thing about the image is its size. Validation rules are: "required|image|max:1024" The image size is 2.1MB, mimetype still image/png, Logically, I should be getting filesize error, not this ambiguous "failed to upload" thing.

I give up. I don't think Volt is there yet. I'm going to rewrite this component using livewire only.

Searching "livewire volt file upload" on google doesn't return any results anyway. Maybe I'm not aware that doing such thing with Volt is not possible. Because even Volt documentation doesn't show anything about file uploads. There is one image upload example in the docs that I can find. And that is for a function-based component, I don't know if that changes anything because I'm using class-based.

vjupix

1 year ago

Best Answer

Level 2

Hey @motinska94 if I get it right it seems to be a Livewire problem - not Volt-specific. The 413 error occurs when your upload exceeds what is configured in the php.ini file and/or on your websever's config (nginx/apache). You can't catch this error in Laravel, because the error happens before the framework and the related code is called at all.

So you have to catch the status code 413 using JavaScript, because the client (the browser in this case) is the only party that gets the statuscode as the request's response. I think there is no way to catch it on the Livewire/PHP-side, because the error happens lower level.

Sadly, even Livewire's JavaScript API does not expose the response status code (see https://livewire.laravel.com/docs/uploads#javascript-upload-api). There is no way to access the response using JavaScript at this point or it is not documented.

So even if you set everything up to validate the file size - if it exceeds the configured values in the php.ini/webserver's config there won't show up any validation error message, because that code wouldn't even run.

If I understand it correctly there is only one situation this validation works:

The validation's rule max file size is lower than the maximum allowed file size in php.ini/the webserver's config
The upload size exceeds the size configured for the rule but DOES NOT exceed the max size configured in the php.ini/webserver config

1 like

motinska94

1 year ago

Level 3

@vjupix Thanks a lot! I did eventually figure out it was a php.ini constraint but it seems I forgot to edit the post. I increased the upload limit on my local and called it good.

But I will definitely try the method you suggested (catch the http error with javascript) in a way that'll at least be pass-able in production.

In case anyone else reads this post in the future, here are the reasons for these two errors in the comment above.

422 - Unprocessable Content : File size is larger than livewire's "own" validation max filesize. This is not the same as the validation size rule you set while handling the form submission.

Solution : You can use php artisan livewire:publish command to publish config/livewire.php file, find "temporary_file_upload" array and change the rules that comes built into livewire.

The [file name] failed to upload : This is, as you said, an error related to set maximum file upload size in the php.ini file.

Please or to participate in this conversation.