[Issue] file upload issue in WYSIWYG editor on product page

m2-assistant[bot] commented 1 year ago

This issue is automatically created based on existing pull request: magento/magento2#38025: file upload issue in WYSIWYG editor on product page

Title

The folder-tree are not visible and getting error “We can't upload the file to the current folder right now. Please try another folder.” when we try to upload image

Description (*)

There is an issue encountered when attempting to upload an image to a folder within the WYSIWYG editor on a product page, specifically within the short description in content section. The folders are not visible, and as a result, we cannot upload the image and we receive an error message stating, 'We can't upload the file to the current folder right now. Please try another folder.' This problem only occurs when you expand the 'Image and Video' tab first. And getting the error in console as shown in below image

Manual testing scenarios (*)

1: Access the Magento admin panel and navigate to 'Catalog' -> 'Products.' and Select any product.

2: in the product page, first, expand the 'Image and Videos' tab, as shown in the image below.

3: Next, expand the 'Content' tab and in 'Short Description' section click on the 'Insert Image' button and select the 'Source' button in the WYSIWYG editor, as indicated in the image below

4: after clicking the 'Source' button, you may notice that the folders are not displayed, and as a result, you are unable to upload images within the 'Short Description.' as you can see in below image

Expected result

After expanding image and videos tab first we should be able to see folder option and can insert image in short description

Actual result

After expanding image and videos tab first we can not see folder option and can not insert image in short-description

Aditional information

In this issue, when we expand the 'Image and Videos' tab and then attempt to upload an image within the 'Short Description' content section, it triggers the 'tmp.init(el,options);' in the lib/web/jquery/jstree/jquery.jstree.js file at line 123, as illustrated in the image below.

After the 'tmp.init(el, options)' function is triggered in the 'jquery.jstree.js' file, it call the init function in the 'tree-suggest.js' file. Please note that it call init function in the 'tree-suggest.js' file only when we initially expand the 'Image and Videos' tab first.

In the lib/web/mage/backend/tree-suggest.js file, it calls the ‘init’ function at line 58 however, an issue arises because the ‘init’ function does not receive the element. Consequently, ‘this.get_container’ becomes undefined

This issue likely plays a significant role in the failure to display folders in the WYSIWYG editor when attempting to upload an image.the element contains the data of folder-tree so if it not assign correct we can not see folder tree when we try to insert image using WYSIWYG editor in short-description

In the image provided above, you can see on line 77 and also on line 102, there is a call to the '_get_node' method. However, there isn't a method with this name in the file or jquery.jstree.js file. Instead, the correct method name is 'get_node.' Therefore, we need to make this correction to ensure the proper function is called.

Solution

To resolve the issue, we need to make changes in the 'lib/web/mage/backend/tree-suggest.js' file. Specifically, we should pass the 'element' in the 'init' function at line 58. Afterward, we should call the 'init' function before 'get_container' and pass the 'data' (consisting of 'element' and 'option') to ensure that the 'init' function receives the required element. This modification ensures that the 'container' variable is not undefined.

Additionally, we should replace instances of '_get_node' with 'get_node' on lines 77 and 102 to ensure that the correct method is called.

Once these modifications are implemented, the issue should be successfully resolved.you can see changes in below image

Questions or comments

Contribution checklist (*)

[ ] Pull request has a meaningful description of its purpose
[ ] All commits are accompanied by meaningful commit messages
[ ] All new or changed code is covered with unit/integration tests (if applicable)
[ ] README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
[ ] All automated tests passed successfully (all builds are green)

engcom-Bravo commented 1 year ago

Hi @Dhruvbasan,

Thank you for reporting and collaboration.

Verified the issue on Magento 2.4-develop instance and the issue is reproducible.Kindly refer the screenshots.

Steps to reproduce

Access the Magento admin panel and navigate to 'Catalog' -> 'Products.' and Select any product.
in the product page, first, expand the 'Image and Videos' tab, as shown in the image below.
Next, expand the 'Content' tab and in 'Short Description' section click on the 'Insert Image' button and select the 'Source' button in the WYSIWYG editor, as indicated in the image below
after clicking the 'Source' button, you may notice that the folders are not displayed, and as a result, you are unable to upload images within the 'Short Description.' as you can see in below image

After expanding image and videos tab first we are able not see folder option and can not insert image in short-description and also when we try upload image we are getting Error.

Hence Confirming the issue.

Thanks.

m2-assistant[bot] commented 1 year ago

Hi @engcom-Bravo. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

[ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
[ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
[ ] 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
[ ] 4. Verify that the issue is reproducible on 2.4-develop branch
Details
- Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
- If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
[ ] 5. Add label Issue: Confirmed once verification is complete.
[ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

github-jira-sync-bot commented 1 year ago

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/AC-9638 is successfully created for this GitHub issue.

m2-assistant[bot] commented 1 year ago

:white_check_mark: Confirmed by @engcom-Bravo. Thank you for verifying the issue.
Issue Available: @engcom-Bravo, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

engcom-Bravo commented 6 months ago

Hi,

As per this comment https://github.com/magento/magento2/pull/38025#issuecomment-2116319878 since issue has been fixed we are closing this issue.

Thanks.

magento / magento2