Filament FileUpload save to relationship

I'm trying to save multiple files to a relationship table, and on the documentation is not really clear how to handle this process.

I have tried to use an option on the documentation here, but it's also failing.

Error

SQLSTATE[42703]: Undefined column: 7 ERROR: column "files" of relation "products" does not exist LINE 1: update "products" set "files" = $1, "original_name" = $2, "up... ^ (Connection: pgsql, SQL: update "products" set "files" = ["9d40f840-6c12-4a8a-881a-a3dca34994ae\/product-images\/\/01JABCVDK0QPKAQV010EEZ9Q4V.png","9d40f840-6c12-4a8a-881a-a3dca34994ae\/product-images\/\/01JABCVDKXA9VXX29R52SE0XN9.png"], "original_name" = {"9d40f840-6c12-4a8a-881a-a3dca34994ae\/product-images\/\/01JABCVDK0QPKAQV010EEZ9Q4V.png":"Screenshot from 2024-10-15 11-39-36.png","9d40f840-6c12-4a8a-881a-a3dca34994ae\/product-images\/\/01JABCVDKXA9VXX29R52SE0XN9.png":"Screenshot from 2024-10-15 11-46-56.png"}, "updated_at" = 2024-10-16 19:28:37 where "id" = 9d40f840-6c12-4a8a-881a-a3dca34994ae)

Products (Model)

class Product extends Model
{
    use HasFactory, HasUuids, SoftDeletes;

    protected $guarded = [];

    public function files(): HasMany
    {
        return $this->hasMany(File::class);
    }

    public static function getForm(): array
    {
        return [
            Forms\Components\TextInput::make('name')
                ->label('Product name')
                ->rules(['required', 'max:255']),
				...
        ];
    }
}

Files (Model)

class File extends Model
{
    use HasFactory, HasUuids, SoftDeletes;

    protected $guarded = [];

    public function product(): BelongsTo
    {
        return $this->belongsTo(Product::class);
    }

    public static function getForm(): array
    {
        return [
            FileUpload::make('files')
                ->label('Upload Files')
                ->helperText('Upload multiple files directly to AWS S3.')
                ->multiple()
                ->disk('s3')
                ->directory(fn (Get $get) => $get('id').'/product-images/')
                ->acceptedFileTypes(['image/*'])
                ->maxSize(10240) // 10MB per file
                ->storeFilenamesIn('original_name')
                ->visibility('public')
                ->previewable(false)
                ->reactive()
                ->columnSpan('full'),
        ];
    }
}

ProductResource

use App\Models\File;
use App\Models\Product;

class ProductResource extends Resource
{
    protected static ?string $model = Product::class;

    public static function form(Form $form): Form
    {
        return $form
            ->steps([
			 	Product::getForm(),
				File::getForm(),
			]);
    }

	public static function table(Table $table): Table
    {
        return $table
            ->actions([
                Tables\Actions\EditAction::make()
                    ->steps([
                        Step::make('Product information')
                            ->schema(Product::getForm()),
                        Step::make('Upload Images')
                            ->schema(File::getForm()),
                    ]),
            ]);
    }

	public static function getRelations(): array
    {
        return [
            FilesRelationManager::class,
        ];
    }
}

LaryAI

1 year ago

Best Answer

Level 58

To solve the issue of saving multiple files to a relationship table using Filament, you need to ensure that the files are being saved to the files table and not directly to the products table. The error you're encountering suggests that the application is trying to update a files column on the products table, which doesn't exist.

Here's a step-by-step solution to address this:

Ensure Correct Relationship Setup: Make sure your Product and File models are correctly set up with the hasMany and belongsTo relationships, which you have already done.
Modify the FileUpload Component: The FileUpload component should be set up to handle the file uploads and save them to the files table. You need to handle the saving of these files in the File model's creating or created event.
Handle File Saving in the Controller or Resource: You need to override the saving process to ensure that files are saved to the files table. This can be done in the ProductResource class.

Here's an example of how you can handle the file saving process:

use Filament\Forms\Components\FileUpload;
use Filament\Resources\Form;
use Filament\Resources\Resource;
use App\Models\Product;
use App\Models\File;

class ProductResource extends Resource
{
    protected static ?string $model = Product::class;

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->label('Product name')
                    ->rules(['required', 'max:255']),
                FileUpload::make('files')
                    ->label('Upload Files')
                    ->helperText('Upload multiple files directly to AWS S3.')
                    ->multiple()
                    ->disk('s3')
                    ->directory(fn (Get $get) => $get('id').'/product-images/')
                    ->acceptedFileTypes(['image/*'])
                    ->maxSize(10240) // 10MB per file
                    ->storeFilenamesIn('original_name')
                    ->visibility('public')
                    ->previewable(false)
                    ->reactive()
                    ->columnSpan('full')
                    ->saveRelationshipsUsing(function ($component, $state, $record) {
                        foreach ($state as $filePath) {
                            $record->files()->create([
                                'path' => $filePath,
                                'original_name' => $component->getStatePath('original_name')[$filePath] ?? null,
                            ]);
                        }
                    }),
            ]);
    }
}

Key Points:

FileUpload Component: The FileUpload component is configured to handle multiple files and save them to a specified directory on S3.
saveRelationshipsUsing: This method is used to handle the saving of files to the files table. It iterates over each uploaded file and creates a new File record associated with the Product.

By following these steps, you should be able to save multiple files to the files table and associate them with the Product model correctly. Make sure your database migrations are set up to support these relationships.

mrblack913

1 year ago

Level 1

@LaryAI

Hello there,

File has uploaded with your relationship example above, but I can't see the uploaded files upload browser preview.

Nomally, after I've uploaded, I can see the uploaded files in the upload browser which I can add up or delete those with non-relationship normal upload.

How can I see these uploaded file in the browser preview?

mariohbrino

1 year ago

Level 40

This basically resolved the issue, with the exception that I have to remove the files field before saving with mutateFormDataUsing for each action defined.

->mutateFormDataUsing(function ($data): array {
	unset($data['files']);

	return $data;
})

Please or to participate in this conversation.