Filament•6d ago

Spatie Media Library

I am using spatie media library, and I have to pre fill the form and the form has media as well, I have the media in my s3 I can get the media but it is not loading the medias in the place where I can edit the medias like it would normally in any data edit. I am not using resource. I am using Livewire class, I am not able to use default, and the media is not showing in the form at all.

17 Replies

Povilas K•6d ago

I don't think you can "fill" the upload automatically for the user filling the form, at least I haven't done it. What I would do instead is show the IMAGE like img tag visually and place its value as default in a HIDDEN field of HTML, or a value in Livewire component. And if someone uploads some OTHER file instead, then saving would take that new file, otherwise take the URL from default hidden file, and if needed copy that file into your storage which would give a new local URL.

namrataOP•6d ago

Is there no way to make it as the edit page of any resource, how the image loads in the edit page and then we can delete that image or edit or add new. I just want to show the iamges there as it would in any edit fields

Povilas K•6d ago

but edit page doesn't UPLOAD the file for you, it just shows the existing file from the database, so it's not the same, in my opinion. Maybe it's possible but I haven't done it that way, sorry.

namrataOP•6d ago

Yes thats what I want, to show the images that the user has already uplaoded for that particular product

Povilas K•6d ago

hmm, I thought you were pre-filling the CREATE form without any more data, so maybe that's different. Anyway I don't have a quick answer, would need to experiment in my free time how to autoload the image, I will get back to you if I have the answer later this week

namrataOP•6d ago

I want to show the iamges for that particular product that the user has already uploaded, I checked my other projects where the image is shown in edit and it comes like this, uuid=>uuid, I did that as well, when loading the form as well, but still could not see the images. [media] => Array ( [85dd8597-7a08-489f-a0d3-f4b6261a7e85] => 85dd8597-7a08-489f-a0d3-f4b6261a7e85 [044650d8-2d06-4ffa-9e2d-8f709fa8b36d] => 044650d8-2d06-4ffa-9e2d-8f709fa8b36d [396eb7f2-aeac-4fe4-a916-3e540ea4aa15] => 396eb7f2-aeac-4fe4-a916-3e540ea4aa15 [a2b8fd36-e7bb-44f1-81b9-876ca03f1c2d] => a2b8fd36-e7bb-44f1-81b9-876ca03f1c2d ) Thank you so much, It would be great help !!

Povilas K•6d ago

@namrata quick update - wanted to play with the scenario but realized it would be too much time for me to even create such a project to reproduce that scenario. You probably don't want to share all the code, so please create a separate (public?) repo where I (or anyone else) would be able to reproduce and then debug the situation.

namrataOP•5d ago

Yes I will do that and share it here

SpatieMediaLibraryFileUpload::make('data.media')
                                ->multiple()
                                ->getUploadedFileUsing(static function (SpatieMediaLibraryFileUpload $component, string $file): ?array {
                                    $user = User::find(1);

                                    $mediaFiles = $user->getMedia('users')->map(function ($media) {
                                        return ['url' => $media->getUrl()];
                                    })->toArray();

                                    return $mediaFiles;
                                })
                                ->collection('images'),

SpatieMediaLibraryFileUpload::make('data.media')
                                ->multiple()
                                ->getUploadedFileUsing(static function (SpatieMediaLibraryFileUpload $component, string $file): ?array {
                                    $user = User::find(1);

                                    $mediaFiles = $user->getMedia('users')->map(function ($media) {
                                        return ['url' => $media->getUrl()];
                                    })->toArray();

                                    return $mediaFiles;
                                })
                                ->collection('images'),

this is where I am now, getUploadedFileUsing(), this function works but it does not take mulpitle, if there is any function which can take multiple then, my problem would be solved.

namrataOP•5d ago

https://github.com/Namrata199/spatie-media-debug this is my repo

GitHub

GitHub - Namrata199/spatie-media-debug

Contribute to Namrata199/spatie-media-debug development by creating an account on GitHub.

Povilas K•5d ago

great, thanks, will take a look, or ask one of my colleagues to help. The problem may be related specifically to s3 and not spatie media library

namrataOP•5d ago

great, thank you

krekas•4d ago

if you want to use everything like you are doing now and use getUploadedFileUsing() you must return properly an array https://github.com/filamentphp/spatie-laravel-media-library-plugin/blob/3.x/src/Forms/Components/SpatieMediaLibraryFileUpload.php#L117

return [
    'name' => $media?->getAttributeValue('name') ?? $media?->getAttributeValue('file_name'),
    'size' => $media?->getAttributeValue('size'),
    'type' => $media?->getAttributeValue('mime_type'),
    'url' => $url,
];

return [
    'name' => $media?->getAttributeValue('name') ?? $media?->getAttributeValue('file_name'),
    'size' => $media?->getAttributeValue('size'),
    'type' => $media?->getAttributeValue('mime_type'),
    'url' => $url,
];

adjust to your needs

namrataOP•3d ago

I did this as well, getUploadedFileUsing() this function worked for a single url, but is not working when I have an array of these How do I handle when the record has multiple images that I want to show ?

krekas•3d ago

Let filament handle everything

SpatieMediaLibraryFileUpload::make('data.media')
    ->multiple()
    ->model($this->user)
    ->collection('users'),

SpatieMediaLibraryFileUpload::make('data.media')
    ->multiple()
    ->model($this->user)
    ->collection('users'),

krekas•3d ago

krekas•3d ago

don't forget to set correct APP_URL in .env

namrataOP•3d ago

OMG !!! IT worked !!!! , thank you so so much !!! You are a geniuessss !!!! Thank you so much

Gaming

Programming

Spatie Media Library