chore(edit-content) #26270 Content Edit: Allow Drag&Drop and select f…

…ile - Feedback (#26270) * dev: improve icon styles * dev: send maxFileSize in megabytes (MB) to the temp API
dotCMS · Sep 27, 2023 · 5c27e3e · 5c27e3e
1 parent a8e37d3
commit 5c27e3e
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 6 deletions.
diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.scss b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/binary-field.component.scss
@@ -6,6 +6,7 @@
     @import "libs/dotcms-scss/angular/dotcms-theme/components/buttons/button";
     @import "libs/dotcms-scss/angular/dotcms-theme/components/dialog";
     @import "node_modules/primeicons/primeicons";
+    @import "libs/dotcms-scss/angular/dotcms-theme/_misc.scss";
 }
 
 .binary-field__container {

diff --git a/...y-field/components/dot-binary-field-ui-message/dot-binary-field-ui-message.component.html b/...y-field/components/dot-binary-field-ui-message/dot-binary-field-ui-message.component.html
@@ -1,5 +1,5 @@
 <div class="icon-container" [ngClass]="severity" data-testId="ui-message-icon-container">
-    <i [ngClass]="icon" data-testId="ui-message-icon" style="font-size: 2rem"></i>
+    <i [ngClass]="icon" data-testId="ui-message-icon" style="font-size: 2rem; width: auto"></i>
 </div>
 <div class="text">
     <span [innerHTML]="message" data-testId="ui-message-span"></span><ng-content></ng-content>

diff --git a/...-web/libs/contenttype-fields/src/lib/fields/binary-field/store/binary-field.store.spec.ts b/...-web/libs/contenttype-fields/src/lib/fields/binary-field/store/binary-field.store.spec.ts
@@ -40,6 +40,7 @@ describe('DotBinaryFieldStore', () => {
     let spectator: SpectatorService<DotBinaryFieldStore>;
     let store: DotBinaryFieldStore;
 
+    let dotUploadService: DotUploadService;
     let initialState;
 
     const createStoreService = createServiceFactory({
@@ -63,6 +64,7 @@ describe('DotBinaryFieldStore', () => {
     beforeEach(() => {
         spectator = createStoreService();
         store = spectator.inject(DotBinaryFieldStore);
+        dotUploadService = spectator.inject(DotUploadService);
 
         store.setState(INITIAL_STATE);
         store.state$.subscribe((state) => {
@@ -153,6 +155,25 @@ describe('DotBinaryFieldStore', () => {
 
                 expect(spyUploading).toHaveBeenCalled();
             });
+
+            it('should called tempFile API with 1MB', (done) => {
+                const file = new File([''], 'filename');
+                const spyOnUploadService = jest.spyOn(dotUploadService, 'uploadFile');
+
+                // 1MB
+                store.setMaxFileSize(1048576);
+                store.handleUploadFile(file);
+
+                // Skip initial state
+                store.tempFile$.pipe(skip(1)).subscribe(() => {
+                    expect(spyOnUploadService).toHaveBeenCalledWith({
+                        file,
+                        maxSize: '1MB',
+                        signal: null
+                    });
+                    done();
+                });
+            });
         });
     });
 });
diff --git a/core-web/libs/contenttype-fields/src/lib/fields/binary-field/store/binary-field.store.ts b/core-web/libs/contenttype-fields/src/lib/fields/binary-field/store/binary-field.store.ts
@@ -35,7 +35,7 @@ export enum BINARY_FIELD_STATUS {
 
 @Injectable()
 export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
-    private _maxFileSize: number;
+    private _maxFileSizeInMB: number;
 
     // Selectors
     readonly vm$ = this.select((state) => state);
@@ -148,15 +148,21 @@ export class DotBinaryFieldStore extends ComponentStore<BinaryFieldState> {
         return url$.pipe();
     });
 
-    setMaxFileSize(maxFileSize: number) {
-        this._maxFileSize = maxFileSize;
+    /**
+     * Set the max file size in Bytes
+     *
+     * @param {number} bytes
+     * @memberof DotBinaryFieldStore
+     */
+    setMaxFileSize(bytes: number) {
+        this._maxFileSizeInMB = bytes / (1024 * 1024);
     }
 
     private uploadTempFile(file: File): Observable<DotCMSTempFile> {
         return from(
             this.dotUploadService.uploadFile({
                 file,
-                maxSize: `${this._maxFileSize}`,
+                maxSize: this._maxFileSizeInMB ? `${this._maxFileSizeInMB}MB` : '',
                 signal: null
             })
         ).pipe(

diff --git a/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.ts b/core-web/libs/ui/src/lib/components/dot-drop-zone/dot-drop-zone.component.ts
@@ -37,6 +37,10 @@ export class DotDropZoneComponent {
     @Output() fileDragOver = new EventEmitter<boolean>();
     @Output() fileDragLeave = new EventEmitter<boolean>();
 
+    /*
+     * Max file size in bytes.
+     * See Docs: https://www.dotcms.com/docs/latest/binary-field#FieldVariables
+     */
     @Input() maxFileSize: number;
 
     @Input() set accept(types: string[]) {

diff --git a/dotCMS/src/main/webapp/html/contenttype-fields.js b/dotCMS/src/main/webapp/html/contenttype-fields.js