Filament•3mo ago

FileUpload Previewing with File Name not based on Stored Field

I'm uploading an image using the FileUpload component using the following code where the image name is not stored in one of the database fields and it is stored in the public directory directly.

                Forms\Components\FileUpload::make('player_image')
                    ->disk('public')
                    ->directory('front/images/player_photos')
                    ->label('Player Image')
                    ->dehydrated(false)
                    ->getUploadedFileNameForStorageUsing(static fn (?Model $record) => $record->PlayerID . '.jpg'),

                Forms\Components\FileUpload::make('player_image')
                    ->disk('public')
                    ->directory('front/images/player_photos')
                    ->label('Player Image')
                    ->dehydrated(false)
                    ->getUploadedFileNameForStorageUsing(static fn (?Model $record) => $record->PlayerID . '.jpg'),

This uploads the image correctly into the public folder. Is there a way I can get it to preview the image in the filepond component when I go back into the form to edit the record? This is the config for the public disk:

    'disks' => [
        'public' => [
            'driver' => 'local',
            'root' => public_path('/'),
            'url' => env('APP_URL').'/',
            'visibility' => 'public',
            'throw' => false,
        ],
    ],

    'disks' => [
        'public' => [
            'driver' => 'local',
            'root' => public_path('/'),
            'url' => env('APP_URL').'/',
            'visibility' => 'public',
            'throw' => false,
        ],
    ],

Thank you.

2 Replies

krekas•3mo ago

you should see the image in the edit. if you aren't seeing then the path is wrong. common mistake in this case app_url isn't set in the .env

rubendn•3mo ago

Verified the APP_URL and it is set correctly. Is there a way to set a custom preview URL? I am using the simple modal forms and the mutateFormDataBeforeFill() was not working so I switched to regular resources and it works with the following to show the preview:

    protected function mutateFormDataBeforeFill(array $data): array
    {
        $file = public_path('front/images/player_photos/' . $data['PlayerID'] . '.jpg');
        if (file_exists($file)) {
            $data['player_photo'] = 'front/images/player_photos/' . $data['PlayerID'] . '.jpg';
        } else {
            $data['player_photo'] = null;
        }
        
    
        return $data;
    }

    protected function mutateFormDataBeforeFill(array $data): array
    {
        $file = public_path('front/images/player_photos/' . $data['PlayerID'] . '.jpg');
        if (file_exists($file)) {
            $data['player_photo'] = 'front/images/player_photos/' . $data['PlayerID'] . '.jpg';
        } else {
            $data['player_photo'] = null;
        }
        
    
        return $data;
    }

Is there a way to use the mutateFormDataBeforeFill when using simple modal form resources?

Gaming

Programming

FileUpload Previewing with File Name not based on Stored Field