Fix: Upload images to Page Editor from File Manager Successfully

[TommyJackson85]

Related Issue

Closes #1113

Your solution

UPDATE: issues relating to uploading images to file manager and modal have been fixed and so have been removed from this PR draft.

Replacing pb-editor-page-element-images-list-component with correct Plugin type pb-page-element-images-list-component. Images now load to editor after saving the selected images. See the screenshots below for more details.

How Has This Been Tested?

Console log and manual testing so far.

Screenshots (if relevant):

When dragging an image gallary in it first displays "No images to display" in the element you're trying to create a gallary in.

After saving selected images in the modal, the images appear.

[TommyJackson85]

Can someone please tell me how to turn an Open PR into a Draft instead after already making it Open?

[Pavel910]

@TommyJackson85 When creating a PR, this is how you create a Draft PR:

If you want to convert an existing PR to Draft PR, it's in the top right corner of the PR:

[TommyJackson85]

@Pavel910 you can delete that comment about changing a PR into a draft if you wish :) then I will delete mine as its not relevant anymore to this PR.

I've narrowed this PR down to the issue of the error "Selected image gallery component not found!" appearing in the editor, as issues of uploading images to the file manager have already been fixed. If you have any advice on files to look at let me know. :)

[TommyJackson85]

@Pavel910 does the ImageList rendering in the index.js file have anything to do with why the "Selected image gallery component not found!" error is added to editor straight away after initially dropping an Image Gallary button component? (its added at the same time the intial modal pop up happens)

I think if we first prevent this from happening, and by only adding an Image Gallery element (error or not) to be dropped once a user saves the Added Images (in the initial modal popup), we can narrow this error down at least. I feel nothing should happen to the editor until a user clicks save.

Furthermore testing: after dropping the Image Gallery button to the editor and clicking cancel on the modal popup, the newly added image gallary / error message remains there.

I want to find the files in "app-page-builder" that call the image drop functions. So far I found this list in editor/components but I don't know if this is the correct folder:

[Pavel910]

@TommyJackson85 the fix for all of this is very simple because it's all caused by a mismatch in plugin type. So at this here reference: packages/app-page-builder/src/editor/plugins/elements/imagesList/ImagesList.tsx:10 simply update the type of the plugin being fetched to pb-page-element-images-list-component. You'll find that the wrong type prefix creeped in (pb-editor-) and that's the only thing that is causing that message to render at packages/app-page-builder/src/editor/plugins/elements/imagesList/ImagesList.tsx:15.

[TommyJackson85]

@Pavel910 thanks again! I guess it was rendering the error as the other plugin didn't have a componentName key.
I make the changes and its working well! It now loads a "No Images To Display" message when first dropping in an ImageList button, but once you select images and save them it adds the images.

[TommyJackson85]

@Pavel910 take a look and let me know if there are other changes needed. Merge this PR if you feel it is ready.

[Pavel910]

@TommyJackson85 that's it, thanks! It was rendering an error because there were no plugins registered with that type at all. We messed up the plugin type during one of our updates (I guess it was a bad find/replace).

Merging this! 🚀