Filament•17mo ago

File Upload

I'm trying to configure file upload to work with imagekit I Created a new Adapter for FileSystem that uses ImageKit behind the scene At First I tried to use the default settings

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->directory('narrators')
                            ->enableDownload()
                            ->enableOpen()

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->directory('narrators')
                            ->enableDownload()
                            ->enableOpen()

But the problem is the image is stuck in /livewire-tmp and it doesn't move it to the narrators folder Then I tried this :

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->directory('narrators')
                            ->enableDownload()
                            ->enableOpen()
                            ->saveUploadedFileUsing(function ($component, TemporaryUploadedFile $file, $record) {
                                $filename = $component->getUploadedFileNameForStorage($file);
                                $result = Storage::fileExists("/livewire-tmp/${filename}");
                            })

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->directory('narrators')
                            ->enableDownload()
                            ->enableOpen()
                            ->saveUploadedFileUsing(function ($component, TemporaryUploadedFile $file, $record) {
                                $filename = $component->getUploadedFileNameForStorage($file);
                                $result = Storage::fileExists("/livewire-tmp/${filename}");
                            })

But the problem is I cannot move the file from /livewire-tmp to my folder and I ran Storage::fileExists and it seems file doesn't exists even If I use $file->exists() it returns false But I can see the fine exists in image kit I don't know how to fix this I would appreciate it if anyone could help

11 Replies

Dan Harrin•17mo ago

if you can get it working with Livewires upload system then it will work with filament but i cant really help you as its really a Livewire question tbh i dont think its gonna be easy

ghostrockz3dOP•17mo ago

Do you have any alternatives that we can use / a work around / package ?

Dan Harrin•17mo ago

I'd use S3

ghostrockz3dOP•17mo ago

Thanks you for the recommendation It seems the team found a way to upload it like a charm Right now the file get uploaded successfuly and we can show the image on the table but how can we show it in the FileUpload ? Is there a method that gets an url and shows the previous uploaded image preivew ?

Dan Harrin•17mo ago

it should do that automatically for you if you fill the form with the image path whatever gets returned from the form should be filled into it again

ghostrockz3dOP•17mo ago

We have a model called Images that is morph Right now i'm confused which method to call ? is it loadStateFromRelationships() ?

Dan Harrin•17mo ago

uhhh potentially loadStateFromRelationshipsUsing() maybe

ghostrockz3dOP•17mo ago

The thing is the main backend is js but because laravel has a rich community especially filament We appreciate the work you guys put on filament I don't think there's an admin panel that comes near filament it terms of customization even admin js That's why we have a images model that looks like this id imagable_type Imgable_id provider_id url width height and users model looks like this id image_id ( points to images ) etc ... The main question is how to show the image.url in file upload ? Thank you for your support

Dan Harrin•17mo ago

how are you saving the images

ghostrockz3dOP•17mo ago

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->visibleOn('edit')
                            ->getUploadedFileNameForStorageUsing(static function (TemporaryUploadedFile $file): string {
                                return Str::random(32);
                            })
                            ->saveUploadedFileUsing(static function (FileUpload $component, TemporaryUploadedFile $file, Narrator $record) {
                                $temporarilyFilename = $file->getFilename();
                                $basePath = 'narrators';
                                $tempUploadFolderName = config('livewire.temporary_file_upload.directory');
                                $extension = substr($temporarilyFilename, strrpos($temporarilyFilename, '.'));
                                $newFilename = $component->getUploadedFileNameForStorage($file).$extension;

                                Storage::move("$tempUploadFolderName/$temporarilyFilename", $basePath);
                                Storage::move("$basePath/$temporarilyFilename", $newFilename);
                                $file = ImageKitFacade::searchFile("$basePath/$newFilename");

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->visibleOn('edit')
                            ->getUploadedFileNameForStorageUsing(static function (TemporaryUploadedFile $file): string {
                                return Str::random(32);
                            })
                            ->saveUploadedFileUsing(static function (FileUpload $component, TemporaryUploadedFile $file, Narrator $record) {
                                $temporarilyFilename = $file->getFilename();
                                $basePath = 'narrators';
                                $tempUploadFolderName = config('livewire.temporary_file_upload.directory');
                                $extension = substr($temporarilyFilename, strrpos($temporarilyFilename, '.'));
                                $newFilename = $component->getUploadedFileNameForStorage($file).$extension;

                                Storage::move("$tempUploadFolderName/$temporarilyFilename", $basePath);
                                Storage::move("$basePath/$temporarilyFilename", $newFilename);
                                $file = ImageKitFacade::searchFile("$basePath/$newFilename");

                                $image = Image::create([
                                    'provider_id' => $file['fileId'],
                                    'imagable_type' => 'Narrator',
                                    'imagable_id' => $record->id,
                                    'width' => $file['width'],
                                    'height' => $file['height'],
                                    'url' => $file['url'],
                                ]);

                                if ($record->image_id) {
                                    $oldImage = Image::find($record->image_id);
                                    ImageKitFacade::deleteById($oldImage->provider_id);
                                    $oldImage->delete();
                                }

                                $record->update(['image_id' => $image->id]);
                            }),

                                $image = Image::create([
                                    'provider_id' => $file['fileId'],
                                    'imagable_type' => 'Narrator',
                                    'imagable_id' => $record->id,
                                    'width' => $file['width'],
                                    'height' => $file['height'],
                                    'url' => $file['url'],
                                ]);

                                if ($record->image_id) {
                                    $oldImage = Image::find($record->image_id);
                                    ImageKitFacade::deleteById($oldImage->provider_id);
                                    $oldImage->delete();
                                }

                                $record->update(['image_id' => $image->id]);
                            }),

Dan Harrin•17mo ago

ok so you basically need the opposite in the loadStateFromRelationshipsUsing() you call $component->state() with the path of the stored file the path should be relative to the disk of this upload

Gaming

Programming

File Upload