Issue with cropping for existing image in edit form

[chaduvulasureshreddy]

trafficstars

Getting issue with image cropping in edit form.

1. uploaded image in add form.
2. once i came to exit and tried to crop the updated image Please find the attachment for issue

[Livijn]

I am experiencing the same issue.

[Yorxer]

This seems to be an issue while not on HTTPS. Firefox's error is a bit more to the point DOMException: "The operation is insecure." Tried it on HTTPS in both Chrome and Firefox, no issues.

[chaduvulasureshreddy]

This seems to be an issue while not on HTTPS. Firefox's error is a bit more to the point DOMException: "The operation is insecure." Tried it on HTTPS in both Chrome and Firefox, no issues.

i am getting same issue in HTTPS also

[timothyasp]

I'm also getting this issue.

[timtnleeProject]

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image The Image server must have CORS header like

Access-Control-Allow-Origin: <enabled_domain>

or

Access-Control-Allow-Origin: *

And don't forget to set the image crossorigin attribute to anonymous , to do that with the component, see here .

[Jon78]

We host images on a different domain and we're having the same issue. Even with headers set to Access-Control-Allow-Origin: * and croppingConfigs(['cross-origin' => 'anonymous']) we still cannot crop. What else can I try?

[saqueib]

@ebess It looks like cross-origin never get set on <img> tag, instead its setting on the wrapper div.

Tested it by adding attribute <img crossorigin="anonymous" from dev tool and it worked fine.

I think if you change this https://github.com/ebess/advanced-nova-media-library/blob/master/resources/js/components/Cropper.vue#L6 to pass cross-origin="anonymous" it will work.

<clipper-basic 
:cross-origin="configs['cross-origin]" 
class="clipper" 
ref="clipper" 
bg-color="rgba(0, 0, 0, 0)" 
:rotate.number="rotate" 
:src="imageUrl" v-bind="configs"/>

⚠️⚠️⚠️ I looks like any croppingConfigs key containing dash - ex: cross-origin, touch-create, init-width etc never get applied. I tired setting it in different text cases but no luck

->croppingConfigs(['cross-origin' => 'anonymous'])
->croppingConfigs(['crossOrigin' => 'anonymous'])
->croppingConfigs(['crossorigin' => 'anonymous'])

[gabrieltakacs]

Also getting this error. Can we expect it to be fixed?

[martin-ro]

Getting the same error with images on S3, +1

[Jon78]

@ebess

[alexandre-tobia]

@ebess Any news for this ?

[ErenPhayte]

I have made a PR to support the above. It required an update to the Clipper Library as a very old version was still being used. You can now use ->croppingConfigs(['cross-origin' => 'anonymous']) to set the cross-origin attribute.

[dan-lutd]

I have this issue on S3 with ebess/advanced-nova-media-library 3.6 and 3.7.1 this makes it unusable on S3

[midesweb]

Same issue using S3 filesystem ebess/advanced-nova-media-library 3.8

[rjosephporter]

got this issue too with S3 filesystem using v3.8

[bkintanar]

This issue is open for PR for a fix as I don't have the capability to test it at the moment.

[LiamKarlMitchell]

Is this still an issue on S3 with Nova 4?

If so, what is needed to test the PR and publish a fix? Haven't deployed yet using minio to develop locally which works but seeing this issue I'm nervous as cropping is kind of needed functionality for me.

[atmediauk]

Is this still an issue on S3 with Nova 4?

If so, what is needed to test the PR and publish a fix? Haven't deployed yet using minio to develop locally which works but seeing this issue I'm nervous as cropping is kind of needed functionality for me.

Just came across the issue on Nova 4 so looks like it still exists 😬

[LiamKarlMitchell]

@atmediauk Curious if you have had a chance to try, does the commit referenced just above for Cross Origin Support solve it?

Implemented configuration to support cross-origin as per ticket https://github.com/ebess/advanced-nova-media-library/issues/133

I haven't updated my version yet and still in process of setting up aws for my project so can't test just yet my self sorry.

[atmediauk]

@atmediauk Curious if you have had a chance to try, does the commit referenced just above for Cross Origin Support solve it?

Implemented configuration to support cross-origin as per ticket #133

I haven't updated my version yet and still in process of setting up aws for my project so can't test just yet my self sorry.

Apologies, it still occurs after the latest update.

  - Upgrading ebess/advanced-nova-media-library (4.1.0 => 4.1.1)

In case it helps the version is: Laravel Framework 9.52.5 and Nova 4.22.2

core config is:

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

Files can be uploaded and accessed without issue. The error occurs specifically when trying to crop an existing image. I've not found a solution yet.

[LiamKarlMitchell]

Did you try the cropping configuration to set the cross-origin to anonymous on the Images nova field. ->croppingConfigs(['cross-origin' => 'anonymous']) Maybe it is not ideal, and could probably be set to specific domain list.

https://www.npmjs.com/package/vuejs-clipper

You can clip your images (local uploaded images or images served on your site), but you cannot clip a cross-origin image unless the image server sets the CORS headers.

So server that serves the images must set CORS headers as well but maybe anonymous setting gets around that to just try it and see. Then would need to do it correctly I suppose.

[atmediauk]

The croppingConfigs @LiamKarlMitchell Unfortunately I didnt work for me. No nearer too this working but my set up is as follows:

My CORS config on Amazon S3 bucket is:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://mydomain.com"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

CORS config in Laravel:

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,`

[pMatt1988]

I still have this issue on s3. Has any one figured it out yet?

[jaap]

I had the same problem with images hosted in a s3 bucket.

I found that adding a CORS policy to the bucket resolved it for me;

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://www.domain.com",
            "https://www.domain.com",
            "http://domain.com",
            "https://domain.com"
        ],
        "ExposeHeaders": []
    }
]

In the s3 console go to

bucket >> Permissions

Scroll down to Cross-origin resource sharing (CORS) Add the policy mentioned above (and adjusted to your origin of course)

For me it took several minutes for the policy to propagate. Give it some time.

[LiamKarlMitchell]

On Lightsail instance with bucket storage, I don't seem to have the issue I did have to add.

ACL 'public-read' to the media-library remote settings as an extra header.

    'remote' => [
        /*
         * Any extra headers that should be included when uploading media to
         * a remote disk. Even though supported headers may vary between
         * different drivers, a sensible default has been provided.
         *
         * Supported by S3: CacheControl, Expires, StorageClass,
         * ServerSideEncryption, Metadata, ACL, ContentEncoding
         */
        'extra_headers' => [
            'CacheControl' => 'max-age=604800',
            'ACL' => 'public-read' // Make the files able to be read from S3 bucket.
        ],
    ],

[jaap]

ACL 'public-read' to the media-library remote settings as an extra header.

I think this way you'd be setting the cors option for each file specifically. This would mean that files that were already uploaded will still give you the cors error. Something to keep in mind.

In my case I have a specific bucket for publicly available files. Setting the policy on the entire bucket makes more sense.