New Content Edit: Implement Image field

[john-thomas-dotcms]

Parent Issue

#25445

User Story

As a content editor, I want to use the new Image field in the new content edit screen, so I can easily select existing images, or upload new images.

Acceptance Criteria

1. Adhere to the UX design.
   • The design in the design system is here.
2. Provide the following options in the Image field (not in the popup):
   • Main field area:
     • Drag and Drop or Choose file
   • Right-side Links:
     • Select Existing Image
       • When selected, open a popup to select the image file.
       • This popup should be the same as other content selection popups (such as in the Relationships field).
     • Import from URL
       • When selected, open a popup for the user to enter the URL.
       • If the URL doesn't resolve to an appropriate file, the popup should stay open and display the error (rather than closing).
     • Generate with dotAI
       • When selected, open the dotAI image generation popup.
3. By default, the content type for any new image should be dotAsset.
   • If the image is imported from a URL, we should choose the dotAsset content type as if the image had been dragged and dropped into dotCMS.
   • If Create New Image was selected, the default content type should be the generic dotAsset.
4. There must be a field variable to allow the content architect to specify a different file content type.
   • If this field variable is set, then the default content type for all new images should be what it specifies.

Proposed Objective

User Experience

Proposed Priority

Priority 2 - Important

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

Tasks

Preview Give feedback

1. Image Field: Drag and drop functionality for image upload #30059
   OKR : Core Features QA : Approved QA : Passed Internal Release : 24.10.02 Team : Falcon +5
   
2. Image Field: "Import from URL" functionality #30061
   OKR : Core Features QA : Approved Release : 24.10.16 Team : Falcon dotCMS : Content Management +5
   
3. Image Field: "Generate with dotAI" functionality #30062
   QA : Approved QA : Passed Internal Release : 24.10.25 Team : Falcon Type : Task dotCMS : AI +6
   
4. Image Field: "Select Existing File" functionality #30060
   OKR : Core Features QA : Approved QA : Passed Internal Release : 24.11.29 Team : Falcon Type : New Functionality dotCMS : Content Management +7
   

[oidacra]

IQA Passed ✅:

Drag and Drop Functionality ✅

• The user can add a file ✅
• The user can check the metadata ✅
• The user can download the file ✅
• The user can remove the file ✅
• Only accept 1 file, do not allow adding multiple files. ✅
  https://github.com/user-attachments/assets/a2b5d0a6-69a2-42d3-b5f9-e7c38f687de7

Import from URL

• Handle the 404 case ✅
• Import the file from a URL ✅
• The user can check the metadata ✅
• The user can download the file ✅
• The user can remove the file ✅
  https://github.com/user-attachments/assets/2d57e7de-c502-4823-8d41-25a1d1e57e81

Generate image using AI

• The user can generate the image ✅
• The user can check the metadata ✅
• The user can download the file ✅
• The user can remove the file ✅
• No dotAI active, make disabled the button of AI image generation. ✅

CleanShot.2024-12-04.at.11.39.36.mp4

Select an Existing file

• The user can select the image ✅
• The user can check the metadata ✅
• The user can download the file ✅
• The user can remove the file ✅

CleanShot.2024-12-04.at.11.44.23.mp4

Images uploaded and generated need to be dotAsset