Filament•16mo ago

FileUpload not saving cropped image - v3 BUG?

Hello, any file upload experts available? I'm using V3 and using fileUpload for what it is... nothing special. I've enabled image editor using ->imageEditor() When I drop a file in to the file-pond file input field, the file immediately gets uploaded and stored in a livewire-tmp folder. When I 'edit' the image which opens the cropper then crop the image the cropped image appears in the file-pond file upload field and then that image is stored in the livewire-tmp folder as well. However, when I submit the form both images are copied from the livewire-tmp folder to the public and when I'm redirected to the edit page the preview in the file-pond field is that of the original image and not the cropped image. Also the original image name is stored in the database upon creation... it's like the cropped image was ignored completely. Any thoughts? Video so see what's happening: https://app.screencast.com/awSJgYnAqAudg

Jay3eb

TechSmith Screencast

2023-08-28_16-25-30

World's leading screen capture + recorder from Snagit + Screencast by Techsmith. Capture, edit and share professional-quality content seamlessly.

7 Replies

jay3ebOP•16mo ago

Bump! This issue is a blocker for my project. In the video you can see the file upload flicker and show both versions of the image when submitting the form... something weird happening there too. Bump please! If someone could confirm they are experiencing this as well or if it's a bug.

Patrick Boivin•16mo ago

Are you getting any errors in the browser's console?

jay3ebOP•16mo ago

Nope, no errors in the console.

Patrick Boivin•16mo ago

Ok... I'll see if I can reproduce later today. I'll circle back. I did some quick tests and the cropper seems to work for me without any issues... can you share your form field code, just to see if I missed anything?

jay3ebOP•16mo ago

@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;
        });

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);
  })

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. 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...

Patrick Boivin•16mo ago

@jay3eb Ok, I'm able to reproduce the issue with your configuration! Actually, now I can even reproduce it with only

->image()
->imageEditor()

->image()
->imageEditor()

If you have some time, I'd say definitely open an issue on Github. It's likely a bug. Since you've been digging into the FileUpload field, I'd say feel free to send a PR if you can clearly see what can be improved. It could make it more obvious to maintainers what to focus on.

jay3ebOP•16mo ago

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

Gaming

Programming

FileUpload not saving cropped image - v3 BUG?