Edit Page V2: Allow Drag and Drop Functionality for Images in dotCMS

[fmontes]

Parent

#27546

Task description

As a user, I want to be able to drag and drop images from my file system directly into a container within dotCMS, so that I can easily upload and add images to my content without having to go through multiple steps.

Acceptance Criteria

1. Users can drag and drop images from their file system directly into a container within dotCMS.
2. The dropped images are successfully uploaded and displayed in the container.
3. Users receive a confirmation message upon successful upload.
4. The uploaded images are saved in the correct location within the dotCMS file structure.
5. The drag and drop functionality works across different browsers and operating systems.

External Links

N/A

Assumptions & Initiation Needs

• Users have the necessary permissions to upload images within dotCMS.
• The drag and drop functionality is supported by the browser being used.
• The container where images are dropped has been correctly set up to receive image uploads.

Quality Assurance Notes & Workarounds

• Test the drag and drop functionality on different browsers and operating systems to ensure compatibility.
• Verify that the uploaded images are displayed correctly in the container after the drag and drop action.
• Check for any error

[KevinDavilaDotCMS]

Passed IQA

Tested in master
VTL - Chromium Browser

Screen.Recording.2024-05-01.at.11.32.46.AM.mov

VTL - Firefox

Screen.Recording.2024-05-01.at.11.34.43.AM.mov

Headless - Chromium Browser

Screen.Recording.2024-05-01.at.11.35.47.AM.mov

Headless - Firefox

Screen.Recording.2024-05-01.at.11.36.21.AM.mov

[josemejias11]

Failed: Tested on trunk_58d55d2, Docker, macOS 13.0, FF v124.0.2

When using Firefox and trying to drop he asset and not releasing the mouse click (meaning if a don't want to added anymore) the application freezes and the edit mode doesn't work anymore

Screen.Recording.2024-05-03.at.7.57.01.AM.mov

Only System containers are showing the thumbnail of the uploaded asset (not sure if this is by desing)

[zJaaal]

Note to QA

The images not showing on default container is a known issue, we need to update the starter to change the url that is being used to render the image. Here is the ticket to update the starter #28269

You can see that the editor is flickering when you drop an image outside of the browser, that's expected at the moment we have to work on a fix. @KevinDavilaDotCMS already has some code that will fix that #28419

[josemejias11]

Approved: Tested on trunk_5921e6a, Docker, macOS 13.0, FF v124.0.2