Filament•4mo ago

image upload using URL

Has anyone managed to create a way to upload media via URL to the https://filamentphp.com/plugins/filament-spatie-media-library plugin? What I've managed to do so far is this:

Forms\Components\TextInput::make('url')
->label('URL')
->url()
->dehydrated(false)
->live(onBlur: true)
->suffixAction(
    Forms\Components\Actions\Action::make('downloadFile')
        ->icon('heroicon-m-arrow-down-tray')
        ->action(function ($record, Get $get, Set $set, $state, \Filament\Forms\Components\Component $component) {
            $contents = file_get_contents($state);
            $fileName = Str::ulid();
            $extension = pathinfo($state, PATHINFO_EXTENSION);
            $fileNameWithExtension = $fileName . '.' . $extension;
            $filePath = 'livewire-tmp/' . $fileNameWithExtension;

            // $SpatieMediaLibraryFileUpload = $component->getContainer()->getComponent(fn ($childComponent) => $childComponent->getName() === 'media');

            $storage = Storage::disk('local');

            $storage->put($filePath, $contents);

            $tempFile = TemporaryUploadedFile::createFromLivewire($fileNameWithExtension);

            $media = $get('media');
            $media[Str::uuid()->toString()] = $tempFile;

            $set('media', $media);

            $set('url', null);
        })
)

Forms\Components\TextInput::make('url')
->label('URL')
->url()
->dehydrated(false)
->live(onBlur: true)
->suffixAction(
    Forms\Components\Actions\Action::make('downloadFile')
        ->icon('heroicon-m-arrow-down-tray')
        ->action(function ($record, Get $get, Set $set, $state, \Filament\Forms\Components\Component $component) {
            $contents = file_get_contents($state);
            $fileName = Str::ulid();
            $extension = pathinfo($state, PATHINFO_EXTENSION);
            $fileNameWithExtension = $fileName . '.' . $extension;
            $filePath = 'livewire-tmp/' . $fileNameWithExtension;

            // $SpatieMediaLibraryFileUpload = $component->getContainer()->getComponent(fn ($childComponent) => $childComponent->getName() === 'media');

            $storage = Storage::disk('local');

            $storage->put($filePath, $contents);

            $tempFile = TemporaryUploadedFile::createFromLivewire($fileNameWithExtension);

            $media = $get('media');
            $media[Str::uuid()->toString()] = $tempFile;

            $set('media', $media);

            $set('url', null);
        })
)

However, nothing appears on the form and when I try to save it, an empty error occurs.

Filament

Spatie Media Library by Filament - Filament

Filament support for Spatie's Laravel Media Library package.

8 Replies

neverything•4mo ago

I get a lot of imports, but don't have a field for the URL, but maybe it helps you to use this:

        try {
            $image = $model->addMediaFromUrl($image_url)
                ->toMediaCollection($collection);
        } catch (FileCannotBeAdded $e) {
            Log::error($e->getMessage());
            $image = null;
        }

        try {
            $image = $model->addMediaFromUrl($image_url)
                ->toMediaCollection($collection);
        } catch (FileCannotBeAdded $e) {
            Log::error($e->getMessage());
            $image = null;
        }

$model would be your Model that has media attached and the $collection is the collection name.

LuizOP•4mo ago

that worked great! Now I need reload the SpatieMediaLibraryFileUpload because I need refresh the page to see the image. Do you know how do this?

mile4841•4mo ago

how did you display the image in the table

neverything•4mo ago

Not yet, I am going to work on this again in a few weeks. My current plan: Use Laravel Reverb to send an event to my Filament table (see Spatie Media Library Events https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/consuming-events) to trigger and update.

Introduction | laravel-medialibrary

laravel-medialibrary

neverything•4mo ago

There is a column for that, see https://fxtwitter.com/neverything/status/1805164009404211306

💬 1 🔁 3 ❤️ 25 👁️ 1.8K

FxTwitter / FixupX

Silvan Hagen ⚡️ (@neverything)

Filament tip: Don't forget to add the conversion with a small preview unless you really need to load the original image 😅 when using the Spatie Media Library plugin. Before you ask, yes, I was wondering why the images are taking ages to load 🤦‍♂️

mile4841•4mo ago

What if i have a case where in mine db i first use custom logic for storing images and now i have to use spatie, but on the production i still have the images that are made with custom logic

neverything•4mo ago

You could write a custom artisan command to import the images into the Spatie Media Library, that's probably what I would do.

mile4841•4mo ago

thanks i will do it

Gaming

Programming

image upload using URL