Canvas: Upload images to S3 but return Cloudfront URL

[abishekrsrikaanth]

I came across this issue on how to setup Canvas to use s3 (https://github.com/cnvs/canvas/issues/566), but the s3 buckets are restricted and are allowed only through cloudfront to be cost effective. Is there a way to setup to upload through S3, but have cloudfront url's instead?

[austintoddj]

Yes, that's not a problem. Just make sure you have the following credentials defined in your .env file:

CANVAS_STORAGE_DISK=s3
CANVAS_STORAGE_PATH=path-to-images

AWS_ACCESS_KEY_ID=your-s3-key
AWS_SECRET_ACCESS_KEY=your-s3-secret-key
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=your-s3-bucket
AWS_URL=your-cloudfront-url

Now, your images will upload to your bucket, but the URL that's returned to save in the database is based on your CloudFront address.

[abishekrsrikaanth]

OK, let me give this a try and get back to you.

[abishekrsrikaanth]

Thanks, this works well. Appreciate the help.

[abishekrsrikaanth]

@austintoddj, can't seem to get this to work with the latest version of the package. I have the same configuration set to the following

AWS_ACCESS_KEY_ID=ID
AWS_SECRET_ACCESS_KEY=KEY
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=BUCKET_NAME
AWS_CLOUDFRONT_URL='CLOUDFRONT_URL_HERE'

CANVAS_STORAGE_DISK=s3
CANVAS_STORAGE_PATH="/${APP_ENV}/blog"

I keep getting the following error when I try to upload

Aws\S3\Exception\S3Exception: Error executing "PutObject" on "https://s3.amazonaws.com/BUCKET_NAME/local/blog/images/u0sEb9Cv2gn8xv5Dqva2FDuNh4nkv2oywz4fJgws.png"

Could you please clarify what the issue may be.

[austintoddj]

Looks like you don't have a bucket name specified in that configuration. That's the reason AWS is failing like that.

Try adding your bucket name and see if it works.

[abishekrsrikaanth]

@austintoddj The bucket name is in there. It is there on the above config I added as well

[austintoddj]

Is your bucket actually called BUCKET_NAME? If not, this error Aws\S3\Exception\S3Exception: Error executing "PutObject" on "https://s3.amazonaws.com/BUCKET_NAME/local/blog/images/u0sEb9Cv2gn8xv5Dqva2FDuNh4nkv2oywz4fJgws.png" is just not finding the correct path.

[abishekrsrikaanth]

Well, I added BUCKET_NAME as an example here. But I have the actual bucket name on my config. The only thing I see as an issue is that the endpoint on the URL doesn't have the region and I am not sure why.

[abishekrsrikaanth]

@austintoddj, also a note I wanted to add, I do have the rest of the app working perfectly with the S3 uploads. I do have Spatie Media Library Package and also Livewire uploads working perfectly with my current config settings. Just need to figure out why I can't get Canvas to upload.

[abishekrsrikaanth]

@austintoddj, would the method call storePublicly cause this issue? Because S3 is restricted public access as AWS recommends and has these URL's working only through cloudfront?

[abishekrsrikaanth]

OK, that's probably it. I updated that to just use $file->store() locally and that worked. Any workaround for this? If you think it is OK to use store instead of storePublicly, I can create a PR and send it to the repo. Let me know.

[austintoddj]

That makes sense. Thanks for digging into that. Go ahead and send a PR in and I can get that into the next release.

Just want to verify that it can store in both public and private instances.

[abishekrsrikaanth]

Sent PR. Look forward to the release

[austintoddj]

Great, thanks for doing that @abishekrsrikaanth. Hoping to get a hotfix in there by tonight.

[austintoddj]

Fixed in v5.3.10