chore(edit-content): upload file #29875

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/utils/editor.ts

@@ -0,0 +1,29 @@
+export function extractFileExtension(fileName: string): string {
+    const includesDot = fileName.includes('.');
+
+    if (!includesDot) {
+        return '';
+    }
+
+    return fileName.split('.').pop() || '';
+}
+
+export function getInfoByLang(extension: string) {
+    if (extension === 'vtl') {
+        return {
+            lang: 'html',
+            mimeType: 'text/x-velocity',
+            extension: '.vtl'
+        };
+    }
+
+    const language = monaco.languages
+        .getLanguages()
+        .find((language) => language.extensions?.includes(`.${extension}`));
+
+    return {
+        lang: language?.id || 'text',
+        mimeType: language?.mimetypes?.[0] || 'text/plain',
+        extension: language?.extensions?.[0] || '.txt'
+    };
+}

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html

@@ -30,15 +30,15 @@
             data-testId="code-editor"
             formControlName="content" />
 
-        @let mimeType = store.file()?.mimeType;
-        <div [class.editor-mode__helper--visible]="mimeType" class="editor-mode__helper">
+        @let file = store.file();
+        <div [class.editor-mode__helper--visible]="file.mimeType" class="editor-mode__helper">
             <i class="pi pi-info-circle"></i>
-            <small>Mime Type: {{ mimeType }}</small>
+            <small>Mime Type: {{ file.mimeType }}</small>
         </div>
     </div>
     <div class="editor-mode__actions">
         <p-button
-            (click)="cancel.emit()"
+            (click)="cancelUpload()"
             [label]="'dot.common.cancel' | dm"
             aria-label="Cancel button"
             data-testId="cancel-button"

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts

@@ -9,16 +9,19 @@ import {
     Component,
     effect,
     inject,
-    output,
-    viewChild, OnInit
+    viewChild,
+    OnInit,
+    untracked
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { ButtonModule } from 'primeng/button';
 import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import { InputTextModule } from 'primeng/inputtext';
 
-import { DotMessageService } from '@dotcms/data-access';
+import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+
 import { DotMessagePipe, DotFieldValidationMessageComponent } from '@dotcms/ui';
 
 import { FormFileEditorStore } from './store/form-file-editor.store';
@@ -29,7 +32,7 @@ type DialogProps = {
     allowFileNameEdit: boolean;
     userMonacoOptions: Partial<MonacoEditorConstructionOptions>;
     uploadedFile: UploadedFile | null;
-}
+};
 
 @Component({
     selector: 'dot-form-file-editor',
@@ -50,7 +53,6 @@ type DialogProps = {
 export class DotFormFileEditorComponent implements OnInit {
     readonly store = inject(FormFileEditorStore);
     readonly #formBuilder = inject(FormBuilder);
-    readonly #dotMessageService = inject(DotMessageService);
     readonly #dialogRef = inject(DynamicDialogRef);
     readonly #dialogConfig = inject(DynamicDialogConfig<DialogProps>);
 
@@ -59,14 +61,9 @@ export class DotFormFileEditorComponent implements OnInit {
         content: ['']
     });
 
-
-    tempFileUploaded = output<UploadedFile>();
-    cancel = output<void>();
-
     $editorRef = viewChild.required(MonacoEditorComponent);
 
     constructor() {
-
         effect(() => {
             const isUploading = this.store.isUploading();
 
@@ -76,6 +73,33 @@ export class DotFormFileEditorComponent implements OnInit {
                 this.#enableEditor();
             }
         });
+
+        effect(
+            () => {
+                const isDone = this.store.isDone();
+                const uploadedFile = this.store.uploadedFile();
+
+                untracked(() => {
+                    if (isDone) {
+                        this.#dialogRef.close(uploadedFile);
+                    }
+                });
+            },
+            {
+                allowSignalWrites: true
+            }
+        );
+
+        this.nameField.valueChanges
+            .pipe(
+                debounceTime(350),
+                distinctUntilChanged(),
+                filter((value) => value.length > 0),
+                takeUntilDestroyed()
+            )
+            .subscribe((value) => {
+                this.store.setFileName(value);
+            });
     }
 
     ngOnInit(): void {
@@ -92,7 +116,10 @@ export class DotFormFileEditorComponent implements OnInit {
 
         this.store.initLoad({
             monacoOptions: userMonacoOptions || {},
-            allowFileNameEdit: allowFileNameEdit || true
+            allowFileNameEdit: allowFileNameEdit || true,
+            uploadedFile,
+            acceptedFiles: [],
+            uploadType: 'dotasset'
         });
     }
 
@@ -104,15 +131,16 @@ export class DotFormFileEditorComponent implements OnInit {
             return;
         }
 
-        this.store.uploadFile();
+        const values = this.form.getRawValue();
+        this.store.uploadFile(values);
     }
 
     get nameField() {
-        return this.form.get('name');
+        return this.form.controls.name;
     }
 
     get contentField() {
-        return this.form.get('content');
+        return this.form.controls.content;
     }
 
     #disableEditor() {
@@ -133,4 +161,8 @@ export class DotFormFileEditorComponent implements OnInit {
             content: file.content
         });
     }
+
+    cancelUpload(): void {
+        this.#dialogRef.close();
+    }
 }

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.conts.ts

@@ -1,7 +1,5 @@
 import { MonacoEditorConstructionOptions } from '@materia-ui/ngx-monaco-editor';
 
-export const DEFAULT_FILE_TYPE = 'text';
-
 export const DEFAULT_MONACO_CONFIG: MonacoEditorConstructionOptions = {
     theme: 'vs',
     minimap: {