Content Edit: Allow Drag&Drop and select file

core-web/apps/contenttype-fields-builder/project.json

@@ -40,8 +40,8 @@
                         },
                         {
                             "type": "anyComponentStyle",
-                            "maximumWarning": "2kb",
-                            "maximumError": "4kb"
+                            "maximumWarning": "400kb",
+                            "maximumError": "400kb"
                         }
                     ],
                     "outputHashing": "all"

core-web/apps/contenttype-fields-builder/src/app/app.module.ts

@@ -1,11 +1,9 @@
-import { HttpClientModule } from '@angular/common/http';
 import { DoBootstrap, Injector, NgModule, Type } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { ContenttypeFieldsModule } from '@dotcms/contenttype-fields';
-import { DotMessageService } from '@dotcms/data-access';
+import { DotBinaryFieldComponent } from '@dotcms/contenttype-fields';
 
 import { AppComponent } from './app.component';
 
@@ -14,13 +12,16 @@ interface ContenttypeFieldElement {
     component: Type<unknown>; // Expected to be a component
 }
 
-const CONTENTTYPE_FIELDS: ContenttypeFieldElement[] = [];
+const CONTENTTYPE_FIELDS: ContenttypeFieldElement[] = [
+    {
+        tag: 'dotcms-binary-field',
+        component: DotBinaryFieldComponent
+    }
+];
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [BrowserModule, BrowserAnimationsModule, HttpClientModule, ContenttypeFieldsModule],
-    providers: [DotMessageService],
-    bootstrap: [AppComponent]
+    imports: [BrowserModule, BrowserAnimationsModule, DotBinaryFieldComponent]
 })
 export class AppModule implements DoBootstrap {
     constructor(private readonly injector: Injector) {}

core-web/apps/contenttype-fields-builder/tsconfig.json

@@ -1,14 +1,5 @@
 {
-    "compilerOptions": {
-        "target": "es2022",
-        "useDefineForClassFields": false,
-        "forceConsistentCasingInFileNames": true,
-        "strict": true,
-        "noImplicitOverride": true,
-        "noPropertyAccessFromIndexSignature": true,
-        "noImplicitReturns": true,
-        "noFallthroughCasesInSwitch": true
-    },
+    "extends": "../../tsconfig.base.json",
     "files": [],
     "include": [],
     "references": [
@@ -22,11 +13,7 @@
             "path": "./tsconfig.editor.json"
         }
     ],
-    "extends": "../../tsconfig.base.json",
-    "angularCompilerOptions": {
-        "enableI18nLegacyMessageIdFormat": false,
-        "strictInjectionParameters": true,
-        "strictInputAccessModifiers": true,
-        "strictTemplates": true
+    "compilerOptions": {
+        "target": "es2020"
     }
 }

core-web/libs/contenttype-fields/.eslintrc.json

@@ -9,15 +9,15 @@
                     "error",
                     {
                         "type": "attribute",
-                        "prefix": "dotcms",
+                        "prefix": "dot",
                         "style": "camelCase"
                     }
                 ],
                 "@angular-eslint/component-selector": [
                     "error",
                     {
                         "type": "element",
-                        "prefix": "dotcms",
+                        "prefix": "dot",
                         "style": "kebab-case"
                     }
                 ]

core-web/libs/contenttype-fields/project.json

@@ -3,7 +3,7 @@
     "$schema": "../node_modules/nx/schemas/project-schema.json",
     "projectType": "library",
     "sourceRoot": "libs/contenttype-fields/src",
-    "prefix": "dotcms",
+    "prefix": "dot",
     "targets": {
         "test": {
             "executor": "@nrwl/jest:jest",

core-web/libs/contenttype-fields/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/contenttype-fields.module';
+export * from './lib/fields/binary-field/binary-field.component';

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.html

@@ -1,7 +1,98 @@
-<p-button (click)="showCodeEditor()" data-testId="code-button">{{ labelCode }}</p-button>
+<div
+    class="binary-field__container"
+    *ngIf="vm$ | async as vm"
+    [ngClass]="{
+        'binary-field__container--uploading': vm.status === BINARY_FIELD_STATUS.UPLOADING
+    }">
+    <div
+        class="binary-field__drop-zone-container"
+        *ngIf="vm.status === BINARY_FIELD_STATUS.INIT || vm.status === BINARY_FIELD_STATUS.ERROR"
+        data-testId="binary-field__drop-zone-container">
+        <div
+            class="binary-field__drop-zone"
+            [ngClass]="{ 'binary-field__drop-zone--active': vm.dropZoneActive }">
+            <dot-drop-zone
+                [accept]="vm.rules.accept"
+                [maxFileSize]="vm.rules.maxFileSize"
+                (fileDragOver)="setDropZoneActiveState(true)"
+                (fileDragLeave)="setDropZoneActiveState(false)"
+                (fileDropped)="handleFileDrop($event)"
+                data-testId="dropzone">
+                <dot-ui-message
+                    [message]="vm.UiMessage.message | dm : vm.UiMessage.args"
+                    [icon]="vm.UiMessage.icon"
+                    [severity]="vm.UiMessage.severity">
+                    <button
+                        class="binary-field__drop-zone-btn"
+                        (click)="openFilePicker()"
+                        data-testId="choose-file-btn">
+                        {{ 'dot.binary.field.action.choose.file' | dm }}
+                    </button>
+                </dot-ui-message>
+            </dot-drop-zone>
+            <input
+                class="binary-field__input"
+                #inputFile
+                [accept]="vm.rules.accept.join(',')"
+                (change)="handleFileSelection($event)"
+                data-testId="binary-field__file-input"
+                type="file" />
+        </div>
 
-<p-dialog [(visible)]="visible" [style]="{ width: '80rem' }" [header]="labelCode">
-    <ngx-monaco-editor
-        class="binary-field__code-editor"
-        data-testId="code-editor"></ngx-monaco-editor>
-</p-dialog>
+        <div class="binary-field__actions">
+            <p-button
+                [label]="'dot.binary.field.action.import.from.url' | dm"
+                (click)="openDialog(BINARY_FIELD_MODE.URL)"
+                data-testId="action-url-btn"
+                styleClass="p-button-link"
+                icon="pi pi-link"></p-button>
+            <p-button
+                [label]="'dot.binary.field.action.create.new.file' | dm"
+                (click)="openDialog(BINARY_FIELD_MODE.EDITOR)"
+                data-testId="action-editor-btn"
+                styleClass="p-button-link"
+                icon="pi pi-code">
+            </p-button>
+        </div>
+    </div>
+
+    <dot-spinner
+        *ngIf="vm.status === BINARY_FIELD_STATUS.UPLOADING"
+        data-testId="loading"></dot-spinner>
+
+    <!-- This component is another ticket -->
+    <div *ngIf="vm.status === BINARY_FIELD_STATUS.PREVIEW" data-testId="preview">
+        <span>
+            {{ vm.tempFile.fileName }}
+        </span>
+        <br />
+        <p-button
+            class="p-button-outlined"
+            [label]="'dot.binary.field.action.remove' | dm"
+            (click)="removeFile()"
+            data-testId="action-remove-btn"
+            icon="pi pi-trash"></p-button>
+    </div>
+
+    <p-dialog
+        [visible]="vm.dialogOpen"
+        [modal]="true"
+        [header]="dialogHeaderMap[vm.mode] | dm"
+        [draggable]="false"
+        [resizable]="false"
+        (visibleChange)="visibleChange($event)">
+        <div [ngSwitch]="vm.mode">
+            <div *ngSwitchCase="BINARY_FIELD_MODE.URL" data-testId="url">
+                TODO: Implement Import from URL
+            </div>
+            <div *ngSwitchCase="BINARY_FIELD_MODE.EDITOR" data-testId="editor">
+                TODO: Implement Write Code
+            </div>
+        </div>
+    </p-dialog>
+</div>
+
+<div class="binary-field__helper" *ngIf="helperText">
+    <i class="pi pi-info-circle binary-field__helper-icon"></i>
+    <span data-testId="helper-text">{{ helperText }}</span>
+</div>

core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.scss

@@ -1,5 +1,109 @@
 @use "variables" as *;
 
+@import "libs/block-editor/src/fonts"; // Import PrimeNG Icon
+
+:host ::ng-deep {
+    @import "libs/dotcms-scss/angular/styles";
+    @import "node_modules/primeng/resources/primeng.min";
+    @import "node_modules/primeicons/primeicons";
+}
+
+.binary-field__container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    gap: $spacing-3;
+    border-radius: $border-radius-md;
+    border: $boder-width-md solid $color-palette-gray-300;
+    padding: $spacing-1;
+    margin-bottom: $spacing-1;
+    height: 10rem;
+}
+
+.binary-field__container--uploading {
+    border: $boder-width-lg dashed $color-palette-gray-300;
+}
+
+.binary-field__helper-icon {
+    color: $color-palette-gray-600;
+}
+
+.binary-field__helper {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: $spacing-1;
+    color: $color-palette-gray-700;
+    font-weight: $font-size-sm;
+}
+
+.binary-field__actions {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-3;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.binary-field__actions ::ng-deep {
+    .p-button-link {
+        .p-button-label {
+            color: $black;
+        }
+
+        .p-button-icon {
+            color: $color-palette-secondary-500;
+        }
+    }
+}
+
+.binary-field__drop-zone-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.binary-field__drop-zone {
+    border: $boder-width-lg dashed $input-border-color;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: $border-radius-md;
+    user-select: none;
+    cursor: default;
+    flex-grow: 1;
+    height: 100%;
+
+    .binary-field__drop-zone-btn {
+        border: none;
+        background: none;
+        color: $color-palette-primary-500;
+        text-decoration: underline;
+        font-size: $font-size-md;
+        font-family: $font-default;
+    }
+}
+
+.binary-field__drop-zone--active {
+    border-radius: $border-radius-md;
+    border-color: $color-palette-secondary-500;
+    background: $white;
+    box-shadow: $md-shadow-6;
+}
+
+.binary-field__drop-zone dot-drop-zone {
+    height: 100%;
+    width: 100%;
+}
+
+.binary-field__input {
+    display: none;
+}
+
 .binary-field__code-editor {
     border: 1px solid $input-border-color;
     display: block;