No Media Library preview on Editor

@tiboryuzo Thanks for getting in touch! Happy to help with troubleshooting here.

This installations is running an offload media app (S3 with custom cname + CDN) for months with no issues.

Have you made any changes to this setup recently?

Can you please share your Site Health information privately via this form?

Hi @shetheliving thanks for your attention.

I just filled the form with the info requested.

Thanks,

Tibor

Thank you, @tiboryuzo! I’ve done some testing with WP Offload Media Lite with S3 and I’m not experiencing the issue that you are, but this has been reported by another user.

Are you able to share a screenshot with me of your WP Offload Media Lite settings? You can see them by going to Settings > Offload Media Lite. Here’s a screenshot of mine: https://jmp.sh/jkl7bkY+/offload-settings.png. The forums do not support screenshot uploads, so you can share one via a link generated by Imgur or JumpShare.

Yes @shetheliving, thank you again.

Here it is the preview:
https://jmp.sh/vvG93Kb

Thank you, @tiboryuzo! We’ll do some testing on our end to try to replicate this and determine next steps and get back to you next week. Have a great weekend!

@tiboryuzo Currently we are unable to replicate this issue from our side using the same settings as you have set.

Would you be able to check while in the editor if you are receiving any browser console errors.

Hi @adamdunnage thanks for trying it!

While logged in the Editor, the console shows many occurrences of a few different errors.

I only changed the main domain to “mydomain” for privacy, but this is the url structure:

ERROR 1 (post.php)
GET https://media.mydomain.com.br/2021/07/30074716/small-icon-white-20px-png.png net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

ERROR 2 (post.php)
Access to image at ‘https://media.mydomain.com.br/2021/11/16111109/0001-150×267.jpg’ from origin ‘https://mydomain.com.br’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

ERROR 3 (wp-story-editor.js)

wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:5 Uncaught (in promise) Event?{isTrusted: true, type: 'error', target: null, currentTarget: null, eventPhase: 0,?…}isTrusted: truebubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0path: [img]returnValue: truesrcElement: nulltarget: nulltimeStamp: 10376.849999964237type: "error"Prototype: Event
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:5
setTimeout (async)
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:5
Ol @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
t.unstable_runWithPriority @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
jr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Oj @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Lj @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
t.unstable_runWithPriority @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
jr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Ar @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Sr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Jg @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Oh @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
UO.timeout @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:175
requestIdleCallback (async)
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:175
Ol @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
t.unstable_runWithPriority @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
jr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Oj @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Lj @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
t.unstable_runWithPriority @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
jr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Ar @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Sr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Xj @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Nl @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
t.render @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:266
ot @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:266
wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:5 Uncaught (in promise) Event?{isTrusted: true, type: 'error', target: null, currentTarget: null, eventPhase: 0,?…}
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:5
setTimeout (async)
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:5
Ol @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
t.unstable_runWithPriority @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
jr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Oj @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Lj @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
t.unstable_runWithPriority @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
jr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Ar @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Sr @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Jg @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
Oh @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:244
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:147
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:1
requestAnimationFrame (async)
(anonymous) @ wp-story-editor.js?ver=1d1f606301213e85c081ee9e74f22ba4:1

I hope it helps you understand what I should to to solve this.

Thank you in advance for your efforts and time on this matter.

@tiboryuzo Thanks for this information it is very helpful. I can see that you are getting some CORS errors so can I check that your AWS S3 bucket is configured to allow cross-origin resource sharing (CORS)?

To check this you can follow this guide and following the ‘Using the S3 console’ steps. Example CORS configurations can be found here.

If this hasn’t been configured I would suggest doing this and then checking your Web Stories once more to see if you are still getting the issue. If you are then could you send me any further console errors you are seeing from the editor.

As we haven’t received a response, I’ll mark this as resolved. Feel free to open a new support topic if you continue to encounter issues, or reopen this topic and we’d be happy to assist. Thank you!

Hi @adamdunnage I’m terrible sorry! I started a draft reply last week and I just forgot to hit send!

Last week it was Black Week over here, tons of orders and issues, I will follow the guide you’ve send by tomorrow and I will give you prompt feedback about the results.

Thanks again and sorry for this delay!

Tibor

No problem at all! Okay thanks very much and yes please let us know how you get on.

Hi @adamdunnage

Good news: it worked!

Here is how to fix the CORS feature, in case someone face the same issue on this setup configuration: AWS CDN + WP Offload Media plugin + S3 bucket

1 – Go to Cloudfront > Distributions
2 – Select the Origins Tab menu (that will list your S3 buckets)
3 – Select the proper S3 origin and click on Edit
4 – At the bottom of the page you will find a Add custom header section
5 – Just click on Add header and fill it up with “Access-Control-Allow-Origin” on the left field (header name) and your public domain on the right (value)

Here is the screenshot of this section: https://jmp.sh/zbTNBiB

I want to thank you and all the staff for your time and attention on this matter.

Have a good one!!

Tibor

Thank you so much for the update, Tibor, and for sharing these steps for other users facing this issue in the future!