Issue with the file upload size (maybe not a bug but need help)

[doriandevelops]

maryUI version

1.25

daisyUI version

4.7.3

Livewire version

3.4

What browsers are affected?

Firefox, Chrome

What happened?

Hello me again!

Hope I'm not becoming a pain yet. I've been stumped on this issue with the file upload all day now and I'm reaching out hoping to get a little help. Not sure if it's a bug or a skill issue on my end.

I getting a 422 Unprocessable Content browser error whenever I try to upload an image and it seems to only happen with images larger than 2mb. The error message displayed in the ui is generic "The image failed to upload."

At first I thought it had to do with cropper. I would add an image and then the temp image would increase in size and the error would pop. Any time is was under 2mb, no error. I removed cropper and images under 2mb would upload but over 2mb would cause the same 422 error.

I think the error is coming from the default file upload validation (not sure). I tried looking at the source code but didn't see any size rules, validations or constraints. I've added my own rules and validation where I'm using the file upload with and without image preview increasing file size, adding all image types and even tried removing all of my custom validation and the error is still there.

When I use the regular file upload without the image preview I still get the error too.

I also went in and increased the config/livewire.php temp file rules thinking that maybe is was the temp file causing an issue and the error is still there. I really want to get this component working and I'd really like to use it with the cropper tool. I've tried everything that I can. I even went in and increased my php.ini upload_max_filesize = 20M post_max_size = 20M since that came up in my searches while trying to figure this out.

I'm pretty new to Laravel and I don't know what else to tried or if there's a way to override the validation error from the component. idk I'm just stuck and need help 😅

Thanks!

Happening in two different places where I'm using the file upload.

                <div class="col-span-1 md:col-span-2">
                    @php
                        $config = ['aspectRatio' => 16/9];
                    @endphp
                    <x-mary-file label="Image" wire:model="image"
                                 accept="image/jpeg, image/jpg, image/png, image/gif, image/webp, image/svg+xml"
                                 hint="5MB size limit" crop-after-change :crop-config="$config">
                        <img
                            src="{{ $image ? $image->temporaryUrl() : ($isEditMode && $image_url ? $image_url : '/images/upload-photo-round.png') }}"
                            class="h-40 rounded-lg" alt="Event image preview"/>
                    </x-mary-file>
                </div>

        <div class="mt-1">
            @php
                $config = ['aspectRatio' => 1/1];
            @endphp
            <x-mary-file wire:model="photo" accept="image/jpeg, image/png, image/gif, image/webp, image/svg+xml"
                         hint="2MB size limit" crop-after-change :crop-config="$config">
                <img src="{{ $user->avatar ?: 'images/upload-photo-round.png' }}" class="h-40 rounded-full"
                     alt="User profile picture"/>
            </x-mary-file>
        </div>

[robsontenorio]

The issue only happens with Cropper and files above 2MB ?

Also dd(phpinfo()) to check if configs are properly applied.

[robsontenorio]

And here an issue for exactly this 2MB files. It as todo with temporary file upload area on Livewire.

https://stackoverflow.com/questions/65580792/livewire-image-upload-422-unprocessed-entity-error

[doriandevelops]

BRO! I love you!

I think you saved me with the dd(phpinfo())! When I took a close look and saw that my upload_max_filesize was still the default values even though I had made the changes to the php.ini. Taking a closer look I noticed that that I did that in my /usr/local/etc/php/8.3 but after running the dd I notice that my php files that were actually being used in my project were from Herd /Users/dorian/Library/Application Support/Herd/config/php/83/php.ini not my local php in etc!

I think this fixed the issues! I'm going to test it some more but I tried a few really large files and everything seems good right now! Even with the cropper!

One quick question, I believe I was getting this error in prod too. I'm using Laravel Forge as my deployment service with Digital Ocean. Do I need to change these values on my server too?

Thanks again for the help!!

[robsontenorio]

For sure you need to update these settings in all envs.

When you change php “ini” files you need to restart the php-fpm service.

👍