Webiny-js: "image gallery component not found" when using the image gallery page element

[AlbionaHoti]

This is:

• Bug

Specifications

• version: 4.4.0
• OS: Mac
• Browser: Chrome

Expected Behavior

1. When drag&drop an image gallery page element, and click Add Images button and the upload view appears, the modal should be closed.
2. When selecting the images, and upload to the page, the images should show up.

Actual Behavior

1. When drag&drop an image gallery page element, and click Add Images button and the upload view appears, the modal is staying open, only when we click outside the modal, or on the save button, the modal closes.
2. When selecting the images, and upload to the page, the images are not showing on the page.

Steps to Reproduce the Problem

1. Create a new page
2. Add an image gallery page element
3. Add a couple of images and upload them.

Possible Solution

1. Check on the image gallery plugin type -> render function.

[TommyJackson85]

@AlbionaHoti I have been having issues uploading images to page builder and trying to render them. Do you think this could be related to this issue? Check the console logs in these screenshots:

[AlbionaHoti]

Hi @TommyJackson85

The bug is occurring only with the image gallery page element.

If you are interested to jump in and see what is causing the bug, you are more than welcome :)

[TommyJackson85]

@AlbionaHoti yeah no problem :) I will look into this and create a PR on it if needs be.

[TommyJackson85]

@AlbionaHoti so far I see your point, but I think the modal not closing is a separate issue to the images not showing. Regardless I am looking into both at the same time anyway. Thanks for highlighting this!
I am getting this issue when attempting to upload the images to document. This could be to do with images not being saved properly:

@Pavel910 should we create a separate issue for the uploading of images and keep this one related to closing of the modal?

[Pavel910]

@TommyJackson85 yes, definitely split the issues 👍 Thanks!

[TommyJackson85]

@Pavel910 @AlbionaHoti I created a separate issue for closing Modals (issue #1156). See the link above.
So feel free to edit this initial post to be more suited to the "image gallery component not found" issue.

[TommyJackson85]

@Pavel910 @AlbionaHoti I created a PR for this but I am wondering is this just something related to data storage of images in development. Maybe I need to upgrade my AWS package to allow more image storage.

As I highlight above and in the newest PR, there is 500 errors with get requests of images.

[Pavel910]

@TommyJackson85 it's definitely not related to any AWS limits on storage (there are no limits on AWS, except your wallet capacity :D ).

A potential explanation is that maybe your CDN URL in the database, doesn't match your actual API URL. Open your MongoDB client, go to Settings collection, find a record with key: "file-manager". See if the srcPrefix matches your actual API URL:

If not, update this value in the database to include your actual API URL.
Let me know how this goes.

[TommyJackson85]

@Pavel910 yeah under file-manager in my Mongodb Atlas database I found this:
srcPrefix: "https://d1n9phpywaycl3.cloudfront.net/files/"
Where should my API URL be located in the local repository so I can find the correct URL?

[Pavel910]

@TommyJackson85 it's your API CDN domain, just see where your React app is sending requests for the API.
Or, you can go to .webiny/state/api/local/Webiny.cdn.json and find it there.

[TommyJackson85]

@Pavel910 after rerunning yarn webiny deploy api --env=local from the root folder I got the following links:

  🔗 Main GraphQL API: https://d34fijhsk92afx.cloudfront.net/graphql
  🔗 CMS API:
     - Content Delivery API: https://d34fijhsk92afx.cloudfront.net/cms/read/production
     - Content Preview API: https://d34fijhsk92afx.cloudfront.net/cms/preview/production

So you're correct, they are not matching with the Mongodb file manager srcPrefix! I will update the srcPrefix to https://d34fijhsk92afx.cloudfront.net/files.

[TommyJackson85]

@Pavel910 It worked! After changing the url I ran yarn start from apps/admin again. The previous images I attempted to upload were uploaded to the database anyway, and are now appearing, which tells me it had issues loading the mongodb client link data :

@AlbionaHoti can you try what I did to see if it works on your end?

[TommyJackson85]

From the image library:

[TommyJackson85]

@AlbionaHoti just realised "image gallery component not found" still appears in the editor when dropping a gallery in. Will take another look at this when I can.
In the mean time, the PR for this Issue is still relevant.
@Pavel910 please take another look at the PR.