Bootcamp cropper error

[drnasin]

maryUI version

1.35.6

daisyUI version

4.12.10

Livewire version

3.5.6

What browsers are affected?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

I am following the bootcamp and when I use cropper and click crop I always get:

Unable to retrieve the file_size for file at location: livewire-tmp.

I can see that he file IS created inside that tmp folder. Image I'm using is 950 x 950 and is 50Kb

Any suggestions?

[robsontenorio]

Same as #568

[nodra-vr]

Following bootstrap in the docs, I get the same error, all works fine until I add crop-after-change.

By disabling the validation on the field, one can do a dd in the save method, and then you see the temporary filename is incorrect (this is more than likely also the reason why the validator can not check the file size or anything else on the file).

As soon as I remove crop-after-change, the file name in the dd is what it should be.

[robsontenorio]

Could you share the exact file you are trying to upload? Please, also share the full code of edit.blade.php

[nodra-vr]

Full Code: edit.blade.php

One of the images used, but it happens with jpeg and webp images as well.

I tried Cropper.js v1.6.1 and 1.6.2 both give the same error.

[robsontenorio]

I could not reproduce it in here.

I think it has to do with the local environment.

Because most of people got it with success. Just with the default set up and didn't touch in any extra config.

PHP 8.3.2

[nodra-vr]

I tried on two different PCs (a Linux, and a windows box), different version of livewire, laravel, php and even played with some php.ini settings, but I have not been able to get it to get it to pass without editing mary.

The issue may be in cropper? As the blob it is uploading to livewire has no name field. Updating: vendor\robsontenorio\mary\src\View\Components\File.php to the sample below solves the issue for me.

      this.cropper.getCroppedCanvas().toBlob((blob) => {
          console.log('--------------');
          console.log(blob)
          blob.name = 'no-name-here.png';
          @this.upload('{{ $attributes->wire('model')->value }}', blob,
              (uploadedFilename) => {
                  console.log('--------------');
                  console.log(uploadedFilename);
              },
              (error) => {  },
              (event) => { this.progress = event.detail.progress }
          )
      })

The logs show the missing name, once adding one to the blob the validation and saving works without any problems. Not sure what a proper fix would be so leaving that open. @drnasin can you test and confirm the above?

[artur-picoli]

@robsontenorio Here the problem still persists, even using the versions you went through.