cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
cwoodruf
Community Member

Uploaded images no longer function in Safari

Jump to solution

Uploading and embedding images in Canvas during last academic term worked fine...

[Addendum: Following suggestion from browser guide, I tried using in a Safari "private window." That workaround revealed the images. I've cleared cache and history, and the problem in a normal window remains.]

Now, the images I had uploaded into the course images folder no longer appear--in the desktop Safari environment (ver. 13.1). They are working on the Canvas iPhone app and in desktop Firefox (ver. 74) browser. This is true for courses successfully run last term AND courses I'm creating for the term that starts next week.

I have cleared desktop Safari's history and cache. Here's what I'm seeing"

• Course home page banner:

coure home page image

• Embed images window showing the icon. Note the images that came in with the template import are fine. They also embed just fine if I choose to use those instead. It's just the images I uploaded into the Canvas course that are unavailable--though they USED to be.

embed images window

• And here's what it looks like when I go to the Files course images folder. The two images with blank thumbnails are images I uploaded. Again, this is true for course I created last quarter AND for this coming quarter.

course images folder

Any guidance on this will be helpful as I create content and assessment for music that are image intensive!

79 Replies
kdolan1
Community Participant

Hi, I'm going to make a separate ticket for the CORS image S3 redirect header cached header check issue with the details about the error, as show  in Safari, and soon to be seen in FF & Chrome, for the preFlight Check CORS issue for cached redirect related images.

kdolan1
Community Participant

Hi Instructure, the following curl  checked Access-Control-Allow-Methods for instructure-uploads.s3.amazonaws.com as recommended in AWS S3 ticket referenced below. The OPTIONS method is not listed as one of the accepted methods. Please, can you verify that the Safari preflight OPTIONS method is allowed on https://instructure-uploads.s3.amazonaws.com?

Access-Control-Allow-Methods: GET, PUT, POST, OPTIONS

$ curl -H "origin: any" -v "https://instructure-uploads.s3.amazonaws.com"

> GET / HTTP/1.1
> Host: instructure-uploads.s3.amazonaws.com

< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, PUT, POST
< Access-Control-Max-Age: 3000
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
< x-amz-bucket-region: us-east-1
< Server: AmazonS3



"By default, CloudFront allows only the GET and HEAD methods, but some web browsers [i.e. Safari] might issue requests for the OPTIONS method."

The CloudFront distribution's cache behavior allows the OPTIONS method for HTTP requests

If you're still seeing errors after you update your CORS policy and forward the appropriate headers, try allowing the OPTIONS HTTP method in your distribution's cache behavior. By default, CloudFront allows only the GET and HEAD methods, but some web browsers might issue requests for the OPTIONS method.

To enable the OPTIONS method on your CloudFront distribution, follow these steps:

  1. Open your distribution from the CloudFront console.
  2. Choose the Behaviors tab.
  3. Choose Create Behavior, or choose an existing behavior, and then choose Edit.
  4. For Allowed HTTP Methods, select GET, HEAD, OPTIONS.

https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

 

This is not working for me, nor my students. Being that a major portion of faculty and students use Macs (and Safari) I would think this would be a priority for you.  I don't have this issue with your competitors. @Renee_Carney

david_turk
Community Participant

Jumping in with a "me too" the disabling "Prevent cross-site tracking" didn't work for me.

Sub'd

watsonnk
Community Participant

Confirming that this does not work, as others have pointed out.

Only solution I've found, other than using a different browser (not really a solution, but short- (now medium-) term way to sidestep the problem) is to upload the images again to the course in question, which does make images viewable.

 

This solution does not for for me or many other users.

watsonnk
Community Participant

Hello,

  Just wondering if there was any timescale for this being fixed? Current solution is to change browser as the other suggestions do not, only straightforward workaround is to bulk download/reupload older images to the course in question.

best regards,

         Nigel W.

pennedav
Community Participant

I just got hit with this issue again. Re-uploading the images seemed to resolve the issue, but I don't consider that to be a valid solution since it requires to touch every single case of this manually. Canvas needs to fix this. Definitely seems like a cross-origin issue. That was the error I saw in the Safari developer tools. Sadly did not screenshot it and I'm not sure how to replicate the issue once it's been resolved. If I encounter this again I'll remember to screenshot and submit a ticket, but this time I was under time pressure to just get it fixed. 🙂

farnwomt
Community Member

This supposed fix relating to cross site doesn't work for me, I still have exactly the same problem after changing the preferences in Safari.

watsonnk
Community Participant

Sorry, this _still_ seems to be broken, just came across the very old problem in a course that I don't own, cannot upload images again even though this seems to be the actual workaround.  Disabling cross-site tracking is not a solution that works in any case I have tested in the last couple of years.

Just wondering whether this problem is going to remain unfixed? 

 best regards,

           Nigel W.