Livewire 3 File Upload

Hello everybody I am really stuck atm. I use livewire to upload some file. On production I use nginx and have set client_max_body_size to 128M in nginx.conf. The allowed size of the file to be uploaded should be 5 MB and I have the validations for this. But everytime I try to upload a file bigger than 2 MB, I get the message File could not be uploaded. Also the file is not getting stored in storage/app/livewire-tmp. How can I fix this issue? Thanks Bettina

LaryAI

1 year ago

Level 58

Hello Bettina,

It sounds like you're encountering an issue with file upload limits in your Livewire application. There are a few places where file upload limits can be set, and it looks like you might need to adjust some settings in addition to client_max_body_size in your Nginx configuration.

Here are the steps to troubleshoot and resolve this issue:

Nginx Configuration: You've already set client_max_body_size to 128M, which is good. Ensure that this setting is correctly applied and that Nginx has been reloaded or restarted after making this change.
```
server {
    ...
    client_max_body_size 128M;
    ...
}
```
PHP Configuration: PHP also has its own settings for file upload limits. You need to check and adjust the following settings in your php.ini file:
```
upload_max_filesize = 128M
post_max_size = 128M
```
After making these changes, restart your PHP service (e.g., php-fpm).

Livewire Configuration: Ensure that your Livewire component has the correct validation rules for file uploads. For example:

use Livewire\Component;
use Livewire\WithFileUploads;

class UploadFile extends Component
{
    use WithFileUploads;

    public $file;

    public function save()
    {
        $this->validate([
            'file' => 'required|file|max:5120', // 5MB max size
        ]);

        $this->file->store('files');
    }

    public function render()
    {
        return view('livewire.upload-file');
    }
}

Laravel Configuration: Laravel also has a configuration for file uploads. Ensure that your config/filesystems.php and config/livewire.php are correctly set up. In most cases, the default settings should be sufficient, but it's good to double-check.
Debugging: If the issue persists, you can enable debugging to get more information about the error. Check your Laravel logs (storage/logs/laravel.log) for any error messages related to file uploads.

By following these steps, you should be able to resolve the issue with file uploads in your Livewire application. If you still encounter problems, please provide more details about the error messages or logs, and I'll be happy to help further.

Best regards, LaracastsGPT

vmutius

1 year ago

Level 4

Thanks Lary, but I already did all this stuff. It still does not work. There is also no entry in laravel log and in nginx error log.

vmutius

1 year ago

Level 4

I really, really need some help here, don't know what to do. For every upload I try, which is larger than 2 MB, I get an error 422 (Unprocessable Content). The files are not in storage/app/livewire-tmp, so the validation is not running and no helpful validation message is shown. Only "File cannot be uploaded" message. Also added "enctype="multipart/form-data" " to my form tag in the blade file. In my local environment is seems to work, but not in production. I deployed to to Digitalocean. Also searched their sites but found nothing new there I would really appreciate any idea where to look.

Thanks

1 like

motinska94

1 year ago

Level 3

Having the same issue right now. Were you able to solve it?

Edit : in case you haven't, I've found the solution. Which in my opinion they should definitely change this behavior or remove it completely.

The problem occurs because the file we're trying to upload is above the maximum limit defined by "livewire". Don't mistake with the validation size limit rule we are setting in the app, this is a hard coded value from livewire configuration file. Which to me is totally pointless and absurd for some hardcoded value to take precedence over our own validation.

Here's how I solved it :

Run "php artisan livewire:publish" command. This will generate config/livewire.php file inside your project.
Search "temporary_file_upload" in config/livewire.php file (It's on line 66 for me) and find 'rules' value from that array.
Change 'rules' => null line to 'rules' => 'max:20480' or whatever is the largest file size you want to accept in kilobytes (20480 = 20MB)

I hope it helps.

1 like

vmutius

1 year ago

Level 4

@motinska94 I already did this. The block in my livewire.config looks like this:

'temporary_file_upload' => [
        'disk' => null,        // Example: 'local', 's3'              | Default: 'default'
        'rules' => ['required', 'file', 'max:262144'],        // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
        'middleware' => 'throttle:120,1',  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
            'png',
            'gif',
            'bmp',
            'svg',
            'wav',
            'mp4',
            'mov',
            'avi',
            'wmv',
            'mp3',
            'm4a',
            'jpg',
            'jpeg',
            'mpga',
            'webp',
            'wma',
        ],
        'max_upload_time' => 15, // Max duration (in minutes) before an upload is invalidated...
        'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...

and this works perfectly on my local dev environment but as I said not the production environment with nginx at digitalocean.

1 like

jlrdw

1 year ago

Level 75

There's an upload video in the free live wire three course

Please or to participate in this conversation.