Filament•2y ago

File upload not working with 2+ files

I'm getting an issue with the spatie media library plugin. Only 2 photos are uploaded at a time though we've selected 2+. My code is:

protected function getFormSchema(): array
{
    return [
        CustomFileUpload::make('photos')
            ->label('')
            ->multiple()
            ->collection('photos')
            ->removeUploadedFileButtonPosition('right')
            ->panelLayout('grid')
            ->panelAspectRatio('3:2')
            ->placeholder('<svg enable-background="new 0 0 50 50" height="50px" id="Layer_1" version="1.1" viewBox="0 0 50 50" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect fill="none" height="50" width="50"/><line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="4" x1="9" x2="41" y1="25" y2="25"/><line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="4" x1="25" x2="25" y1="9" y2="41"/></svg> Add Another')
            ->responsiveImages()
            ->imageCropAspectRatio('3:2')
            ->enableReordering()
            ->disk('s3Public')
            ->afterStateUpdated(function (?Model $record, Forms\Components\Field $component, $state) {
                $this->photoAutoSave(); })
    ];
}

public function photoAutoSave(): void
{
    $validator = Validator::make(['data' => $this->form->getState()], $this->getRules());
    if (!count($validator->invalid())) {
        $this->save();
    }
}

// CustomFileUpload component:
<?php

namespace App\Forms\Components;

use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

class CustomFileUpload extends SpatieMediaLibraryFileUpload
{
    protected string $view = 'forms.components.custom-file-upload';
}

protected function getFormSchema(): array
{
    return [
        CustomFileUpload::make('photos')
            ->label('')
            ->multiple()
            ->collection('photos')
            ->removeUploadedFileButtonPosition('right')
            ->panelLayout('grid')
            ->panelAspectRatio('3:2')
            ->placeholder('<svg enable-background="new 0 0 50 50" height="50px" id="Layer_1" version="1.1" viewBox="0 0 50 50" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect fill="none" height="50" width="50"/><line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="4" x1="9" x2="41" y1="25" y2="25"/><line fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="4" x1="25" x2="25" y1="9" y2="41"/></svg> Add Another')
            ->responsiveImages()
            ->imageCropAspectRatio('3:2')
            ->enableReordering()
            ->disk('s3Public')
            ->afterStateUpdated(function (?Model $record, Forms\Components\Field $component, $state) {
                $this->photoAutoSave(); })
    ];
}

public function photoAutoSave(): void
{
    $validator = Validator::make(['data' => $this->form->getState()], $this->getRules());
    if (!count($validator->invalid())) {
        $this->save();
    }
}

// CustomFileUpload component:
<?php

namespace App\Forms\Components;

use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

class CustomFileUpload extends SpatieMediaLibraryFileUpload
{
    protected string $view = 'forms.components.custom-file-upload';
}

Note: This is in the EditRecord resource.

5 Replies

Mark Chaney•2y ago

@Kuldeep please use proper `php with your 3 backticks before your code so we can read it better why did you create a custom component for this?

KuldeepOP•2y ago

A custom component is for the display purposes.

toeknee•2y ago

There can be many reasons for this, firstly try a localised driver first. Second, post max file size, max_input vars. What are the errors when it fails with more than two.

KuldeepOP•2y ago

I've checked with that process. The issue is regarding the method: afterStateUpdated(). It'll run when the first image will be uploaded and after that rest of the image upload process will not work. So, need to use another method which perform save action after all images uploaded successful.

wyChoong•2y ago

share your model media collection definition also, if your custom field is just for display, you probably just need to set the view with ->view(...), and the afterStateUpdated is not required

Gaming

Programming

File upload not working with 2+ files