Implement the UI for create files using code

[fmontes]

Parent Issue

#23603

User Story

As a user, I want to be able to create code file easily.

VTL files are widely used in dotCMS and the only way to create one is to create one with a code editor and then upload it.

Acceptance Criteria

• Implement the design provided

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

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

The "backend" of this was done in this issue #23603 and in this PR: #24267

• Figma file
• Figma Prototype

Kapture.2023-03-16.at.11.56.22.mp4

Assumptions & Initiation Needs

1. This is a "Binary" field, so it should work in all content types with a Binary Field
2. We already have a Web Component that does drag and drop here. Let's see how much we can reuse for this.
3. We are using that web component in the content search screen, you can try by drag and drop a file in the content search screen

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

• Edit Contentlet: create a contenttype fields library #25781
• Edit Contentlet: Create dropzone component #25782

[fmontes]

In the freezer until we figure it out web component for binary and file field.

[fmontes]

We are doing this with this: #25434

[rjvelazco]

To achieve this, we are going to create a library called dotcms-fields and a dotcms-fields-builder app. The implementation of this approach was thoroughly investigated and documented in this ticket #25434 and PR: #25581

[rjvelazco]

This ticket was moved to this one: #26045 and fixed in this PR: #26433