laravel filament fileupload component default file/files using external url?

Question

I am trying to save my private file on multiple servers (Reason: limited storage on each server) using an API (and FTP).

I want to use the Filament FileUpload component in my form, but I don’t want the component to store my file automatically in local storage (I will handle that myself).

The problem is that the FileUpload component doesn’t display the default image or file when using an external URL.

FileUpload::make('image')
    ->image()
    ->imageEditor()
    ->circleCropper()
    ->imageResizeTargetWidth(512)
    ->imageResizeTargetHeight(512)
    ->imageResizeMode('cover')
    ->imageCropAspectRatio('1:1')
    ->imagePreviewHeight('100')
    ->getUploadedFileUsing(fn () => ['https://picsum.photos/200/300']),

How can I fix this?

Answer 1

The issue is that the getUploadedFileUsing() method expects an instance of Illuminate\Http\File or Illuminate\Http\UploadedFile, but you are passing an array with an external URL. Filament's FileUpload component does not natively support displaying an externally hosted file as a default preview.

Solution

To properly display an externally hosted file, use the default() or formatStateUsing() methods.

Fix Using default():

FileUpload::make('image')
    ->image()
    ->imageEditor()
    ->circleCropper()
    ->imageResizeTargetWidth(512)
    ->imageResizeTargetHeight(512)
    ->imageResizeMode('cover')
    ->imageCropAspectRatio('1:1')
    ->imagePreviewHeight(100)
    ->default('https://picsum.photos/200/300') // Set the external image as default
    ->preserveFilenames()
    ->saveUploadedFileUsing(fn ($file) => null), // Prevent automatic saving

Fix Using formatStateUsing():

FileUpload::make('image')
    ->image()
    ->imageEditor()
    ->circleCropper()
    ->imageResizeTargetWidth(512)
    ->imageResizeTargetHeight(512)
    ->imageResizeMode('cover')
    ->imageCropAspectRatio('1:1')
    ->imagePreviewHeight(100)
    ->formatStateUsing(fn ($state) => $state ?: 'https://picsum.photos/200/300') // Show external URL if state is empty
    ->preserveFilenames()
    ->saveUploadedFileUsing(fn ($file) => null), // Prevent automatic saving

• default() sets an initial default value (useful if the field is empty).
• formatStateUsing() ensures the external image is shown dynamically.
• saveUploadedFileUsing(fn ($file) => null) prevents automatic storage.

This should correctly display the external image while preventing automatic local storage.