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

Beta 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 Team : Falcon Type : New Functionality dotCMS : Content Management +4