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

Updated: Feb 11, 2025

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

To use the Filament FileUpload component with an external URL for the default file or files, you'll need to customize the component a bit. Here's a step-by-step guide on how to achieve this:

  1. Install the Filament package if you haven't already:
composer require filament/filament
  1. Import the necessary classes in your controller:
use Filament\Facades\Filament;
use Filament\Http\Request;
use Filament\Support\Facades\Storage;
  1. Create a custom component extending Filament\Components\Forms\Component:
namespace App\Filament\Components;

use Filament\Components\Forms\Component as FormComponent;
use Filament\Contracts\Component;
use Filament\Facades\Filament;
use Filament\Http\Request;
use Illuminate\Support\Facades\Storage as LaravelStorage;

class CustomFileUpload extends FormComponent
{
    protected $view = 'filament.components.custom-file-upload';

    public function mount(Request $request)
    {
        $this->defaultFile = $request->default_file;
    }

    public function getDefaultFileUrlAttribute()
    {
        return $this->defaultFile ? Storage::url($this->defaultFile) : null;
    }

    public function update(Request $request)
    {
        $this->state('files', $request->files);

        if ($request->hasFile('default_file')) {
            $this->defaultFile = $request->file('default_file')->store('public/custom-file-upload');
        }

        $this->emit('updated');
    }

    public function getDefaultFile()
    {
        return $this->defaultFile;
    }

    public function render()
    {
        return view('filament.components.custom-file-upload')
            ->with(['defaultFileUrl' => $this->getDefaultFileUrlAttribute()]);
    }
}
  1. Create a view file filament/components/custom-file-upload.blade.php:
@extends('filament::components.layouts.component')

@section('title', __('Custom FileUpload'))

@section('form')
    <div class="col-span-full">
        <input type="hidden" name="default_file" value="{{ $defaultFile }}">

        <x-filament-file-upload
            name="files[]"
            multiple
            :default-file="$defaultFileUrl"
            @change="updateFiles"
        ></x-filament-file-upload>
    </div>
@endsection

@section('scripts')
    <script>
        function updateFiles(files) {
            @this.emit('files-updated', files);
        }
    </script>
@endsection
  1. Register the component in app/Filament/Components/RegisterComponents.php:
use App\Filament\Components\CustomFileUpload;

return [
    CustomFileUpload::class,
];
  1. Use the component in your form:
use App\Filament\Components\CustomFileUpload;

protected function form()
{
    return $this->form([
        CustomFileUpload::make('defaultFile')
            ->label(__('Default File'))
            ->default('default-file.jpg') // Set the default file URL here
            ->required(),
    ]);
}

This custom component will load the default file from the external URL when the component is mounted and will allow users to upload new files. The default file URL should be set in the form when registering the component.