Changing FileUpload field state() does not refresh the field/FilePond on front-end

[mansoorkhan96]

Package

filament/filament

Package Version

v3.2

Laravel Version

v10.0

Livewire Version

v3.x

PHP Version

PHP8.2

Problem description

I am trying to Upload a file from a URL using a Form Action. I download the file and save it to livewire-tmp directory and then update the FileUpload component state but it does not refresh the field state, hence there is no preview of the image.

However, the downloaded file is uploaded successfully and saved on form submission.

Expected behavior

Once the FileUpload field state is updated it should refresh the state on front-end ie. FilePond and show the preview of image as normal.

Steps to reproduce

1) Add this action to your FileUpload field

use App\Services\UrlUploadedFile

Forms\Components\FileUpload::make('avatar')
  ->image()
  ->hintAction(
      \Filament\Forms\Components\Actions\Action::make('upload_from_url')
          ->action(function (FileUpload $component) {
              $url = 'https://via.placeholder.com/150x150';

              $filePath = UrlUploadedFile::createFromUrl($url)
                  ->store('livewire-tmp', ['disk' => 'local']);

              $filePath = explode('/', $filePath)[1];

              $file = TemporaryUploadedFile::createFromLivewire($filePath);

              $component->state([$file]);
              // also tried
              // $component->state($file);
          })),

2) Open Admin panel and click on the upload_from_url action, It would not preview the image. However the field should refresh and show preview.

3) Now Save the form and it should show the preview.

Reproduction repository

https://github.com/mansoorkhan96/filament-playground

Relevant log output

No response

[mansoorkhan96]

Maybe there should be a way to pass an absolute path to a method which programatically uploads the file?

[mansoorkhan96]

Or maybe its not possible?

When the file is uploaded from browser, FilePond shows the preview from browser by adding it to its canvas. But when the file is uploaded from backend, filepond cannot show the preview unless its a public file or unless it gets temporary url for the private file (if the temp url support for local disk is added on user land)

[danharrin]

Filepond needs a path to the permanent storage. TemporaryUploadeFile objects are only supported when Filepond initiates that upload process originally. I would store it permanently if I were you, and introduce a cleanup process for unused files.

[mansoorkhan96]

Filepond needs a path to the permanent storage. TemporaryUploadeFile objects are only supported when Filepond initiates that upload process originally. I would store it permanently if I were you, and introduce a cleanup process for unused files.

Thanks for the response. Actually I am building this for plugin idea, So i am trying to keep less code on user land.

If thats the way to do it: Suppose, if the file was stored to posts/featured_img/ and if the form was never submitted, How would it know if there are files that need to be cleaned up.

[danharrin]

You would not have any records in the database that reference the file