F
Filament•2y ago
ghostrockz3d

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
Dan Harrin•2y 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
ghostrockz3d
ghostrockz3dOP•2y ago
Do you have any alternatives that we can use / a work around / package ?
Dan Harrin
Dan Harrin•2y ago
I'd use S3
ghostrockz3d
ghostrockz3dOP•2y 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
Dan Harrin•2y 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
ghostrockz3d
ghostrockz3dOP•2y ago
We have a model called Images that is morph Right now i'm confused which method to call ? is it loadStateFromRelationships() ?
Dan Harrin
Dan Harrin•2y ago
uhhh potentially loadStateFromRelationshipsUsing() maybe
ghostrockz3d
ghostrockz3dOP•2y 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
Dan Harrin•2y ago
how are you saving the images
ghostrockz3d
ghostrockz3dOP•2y 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
Dan Harrin•2y 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
Want results from more Discord servers?
Add your server