Unable to crop media

Questions and Answers
1
System Information
  • Strapi Version: 3.5.3
  • Operating System: Windows 10
  • Database: Mongo
  • Node Version: 12.18.3
  • NPM Version: 6.14.11
  • Yarn Version: 1.22.4

I’m unable to crop images on Strapi, the last version I noticed this worked on for me was 3.1.3, however since updating to later versions, I’m unable to use this feature anymore, now when I try to crop, the cropping overlay on the image no longer appears, and when I attempt to click and drag, it just drags the image.

I have an example below of attempting to use the cropping feature:

https://gyazo.com/fecd38f9dd792a1ef9d33be68ac36986https://i.gyazo.com/fecd38f9dd792a1ef9d33be68ac36986.gif(image larger than 4096KB)

2

So, I haven’t found the exact problem yet, but I narrowed it down to happening not when I use Strapi 3.5.3, but instead when I add the strapi-provider-upload-aws-s3 package.
If anyone’s got any ideas, I’m all ears, but in the mean time, if I can work this out, I’ll post it here too.

1 Like
3

Do you find any solution…??

4

Hey Vasu, I found somewhat of a solution, it allowed me to crop the media, but it still came up with an error in the console saying:
Access to XMLHttpRequest at 'https://s3_url' from origin 'https://strapi_url' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But basically I followed the guide on here to make exceptions to the CORS policy:
https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

currently mine is setup as follows:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*",
            "https://strapi_url"
        ],
        "ExposeHeaders": []
    }
]

I’m not too knowledgeable with the CORS policy, so if anyone has any more info on how to get this right, please do share :pray:

1 Like
5

Hi Henry,

Thanks and Can you please tell me the solution. I add plugin.js file into config
module.exports = ({ env }) => ({
upload: {
provider: ‘aws-s3’,
providerOptions: {
accessKeyId: env(‘AWS_ACCESS_KEY_ID’),
secretAccessKey: env(‘AWS_ACCESS_SECRET’),
region: env(‘region’),
params: {
Bucket: env(‘Bucket’),
},
},
},
});

Not able to crop. If I will get a solution then I will try to resolve the cors error. If I resolved the surely share with you

6

No problem Vasu,

So basically, it’s not an issue within the Strapi plugin configs, it’s on AWS S3.
Let’s go with step by step:

  1. Login to AWS.

  2. Navigate to S3.

  3. Navigate/click into your S3 bucket.

  4. Click on the “Permissions” tab

  5. Scroll all the way down to “Cross-origin resource sharing (CORS)”

  6. Click on “Edit” on the top right of the section.

  7. Copy and paste the following into your CORS:

    [
    {
    “AllowedHeaders”: [
    “"
    ],
    “AllowedMethods”: [
    “GET”,
    “PUT”,
    “POST”,
    “DELETE”,
    “HEAD”
    ],
    “AllowedOrigins”: [
    "    ”
    ]
    }
    ]

  8. Click “Save changes”

This should enable you to use the crop tool.
Should look like this:

image
image839×588 17.4 KB

Hope that helps

7

This article is useful.
https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

When you use s3 in production, you should set AllowedOrigins your actual domain.