jay3eb Comments - Answer Overflow

jay3eb

Posts Comments

FFilament

•Created by jay3eb on 5/23/2024 in #❓┊help

Re-render FileUpload Component

I found a write up on it in the docs, all set.

12 replies

FFilament

•Created by jay3eb on 5/23/2024 in #❓┊help

Re-render FileUpload Component

@Dan Harrin , I was able to use ->extraAttributes(fn($get) => ['wire:key' => $get('shop_product_id') . '-file-upload']) and that was exactly what I needed. Thanks a ton on this suggestion!

12 replies

FFilament

•Created by jay3eb on 5/23/2024 in #❓┊help

Re-render FileUpload Component

@Dan Harrin , do you have any ideas on how I can re-render or update the state the FileUpload component when the shop_product_id changes?

12 replies

FFilament

•Created by jay3eb on 5/23/2024 in #❓┊help

Re-render FileUpload Component

Hmm, ok thanks for looking into it. Been working on it for days...

12 replies

FFilament

•Created by jay3eb on 5/23/2024 in #❓┊help

Re-render FileUpload Component

Thanks @Dennis Koch , for more context this is what I have currently.

Select::make('shop_product_id')
                    ->label('Choose a preset')
                    ->options(Product::whereNotNull('published_at')->orderBy('id')->pluck('name', 'id'))
                    ->live()
                    ->helperText('All dimensions for presets are in millimeters.')
                    ->required(),
                FileUpload::make('image')
                    ->image()
                    ->imageEditor()
                    ->circleCropper(fn(Get $get) => $this->getProductShape($get('shop_product_id')))
                    ->imagePreviewHeight('400')
                    ->maxSize(1024 * 1025 * 5)
                    ->dehydrateStateUsing(function ($state) {
                        $files = array_values($state ?? []);

                        return end($files);
                    })
                    ->hidden(fn(Get $get) => $get('shop_product_id') === null)
                    ->imageEditorMode(1)
                    ->imageCropAspectRatio(
                        function (Get $get) {
                            $product = Product::find($get('shop_product_id'));
                            if ($product) {
                                return "{$product->width}:{$product->height}";
                            } else {
                                // Return a default value or throw an exception
                                return "0:0"; // Default value
                                // throw new Exception('Product not found'); // Exception
                            }
                        }
                    )
                    ->disk('s3')
                    ->directory('livewire-temp')
                    ->visibility('public'),

Select::make('shop_product_id')
                    ->label('Choose a preset')
                    ->options(Product::whereNotNull('published_at')->orderBy('id')->pluck('name', 'id'))
                    ->live()
                    ->helperText('All dimensions for presets are in millimeters.')
                    ->required(),
                FileUpload::make('image')
                    ->image()
                    ->imageEditor()
                    ->circleCropper(fn(Get $get) => $this->getProductShape($get('shop_product_id')))
                    ->imagePreviewHeight('400')
                    ->maxSize(1024 * 1025 * 5)
                    ->dehydrateStateUsing(function ($state) {
                        $files = array_values($state ?? []);

                        return end($files);
                    })
                    ->hidden(fn(Get $get) => $get('shop_product_id') === null)
                    ->imageEditorMode(1)
                    ->imageCropAspectRatio(
                        function (Get $get) {
                            $product = Product::find($get('shop_product_id'));
                            if ($product) {
                                return "{$product->width}:{$product->height}";
                            } else {
                                // Return a default value or throw an exception
                                return "0:0"; // Default value
                                // throw new Exception('Product not found'); // Exception
                            }
                        }
                    )
                    ->disk('s3')
                    ->directory('livewire-temp')
                    ->visibility('public'),

12 replies

FFilament

•Created by jay3eb on 8/28/2023 in #❓┊help

FileUpload not saving cropped image - v3 BUG?

Thanks for assisting me with this Patrick and confirming! I'll update my issue on Github with my findings and work arounds here.

17 replies

FFilament

•Created by jay3eb on 8/28/2023 in #❓┊help

FileUpload not saving cropped image - v3 BUG?

Ideally, I would think that if I upload an image to the cropper then crop it and save the cropped version that it would then remove the original and I'm only left with one image in the $state but that's not the case and could get more tricky if someone was using ->multiple(). I found in file-upload.js [core file] where this code is but didn't want to alter it in case this was by design for some reason...

17 replies

FFilament

•Created by jay3eb on 8/28/2023 in #❓┊help

FileUpload not saving cropped image - v3 BUG?

Here, I get all the files and get the last one b/c the latest one is the cropped and most recent one that I want to save. Took me days, but after diving into the code I was able to get around it.

17 replies

FFilament

•Created by jay3eb on 8/28/2023 in #❓┊help

FileUpload not saving cropped image - v3 BUG?

Yesterday, after deep diving into the filamant core code I was able to get around this by adding this to the FileUpload component in my form... essentially overriding the dehydrateStateUsing() with my own:

->dehydrateStateUsing(function ($state) {
    $files = array_values($state ?? []);                            
    return end($files);
  })

->dehydrateStateUsing(function ($state) {
    $files = array_values($state ?? []);                            
    return end($files);
  })

17 replies

FFilament

•Created by jay3eb on 8/28/2023 in #❓┊help

FileUpload not saving cropped image - v3 BUG?

@pboivin , if you could do this for me... When you upload your initial image to the cropper check the livewire-tmp folder and confirm the image is there. After that, then crop the image and recheck the livewire-tmp directory and confirm that there is now a second image. File pond will look correct and show the cropped image but when saving b/c there are 2 items in the $state, it will get the first one ( return $files[0] ): [line 113 in BaseFileUpload.php reference below] and save to the database which is the original and not the cropped version. Below is my file upload code:

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->required()
                            ->imageEditor()
                            ->imageEditorMode(1)
                            ->imageEditorAspectRatios([
                                '1:1',
                                '27:37',
                            ])
                            ->maxSize(10240)
                            ->acceptedFileTypes(['image/jpg', 'image/jpeg', 'image/png'])
                            ->columnSpan([
                                'md' => 12,
                            ]),

Forms\Components\FileUpload::make('image')
                            ->image()
                            ->required()
                            ->imageEditor()
                            ->imageEditorMode(1)
                            ->imageEditorAspectRatios([
                                '1:1',
                                '27:37',
                            ])
                            ->maxSize(10240)
                            ->acceptedFileTypes(['image/jpg', 'image/jpeg', 'image/png'])
                            ->columnSpan([
                                'md' => 12,
                            ]),

Line 113 of BaseFileUpload.php in filament core:

$this->dehydrateStateUsing(static function (BaseFileUpload $component, ?array $state): string | array | null | TemporaryUploadedFile {
            $files = array_values($state ?? []);

            if ($component->isMultiple()) {
                return $files;
            }

            return $files[0] ?? null;
        });

$this->dehydrateStateUsing(static function (BaseFileUpload $component, ?array $state): string | array | null | TemporaryUploadedFile {
            $files = array_values($state ?? []);

            if ($component->isMultiple()) {
                return $files;
            }

            return $files[0] ?? null;
        });