From d301383084747cf8bf4714ec402bdc20ff67cddb Mon Sep 17 00:00:00 2001
From: Zulqarnain <zulqarnain.huda@venturedive.com>
Date: Mon, 27 Mar 2023 10:53:47 +0500
Subject: [PATCH] dotCMS/core#24362 Handle multiple files in dot-upload-file
 web component and add custom plugin for upload file for dot-asset-drop-zone
 component and render dot-upload-file component in dojo

---
 .../dot-file-upload/dot-file-upload.scss      | 23 +++---
 .../dot-file-upload.stories.js                |  3 +-
 .../dot-file-upload/dot-file-upload.tsx       | 76 ++++++++++++++-----
 .../ext/contentlet/field/edit_field.jsp       | 47 +++++++++++-
 .../ext/contentlet/field/edit_field_js.jsp    | 22 ++++--
 5 files changed, 133 insertions(+), 38 deletions(-)

diff --git a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss
index 3208305e6f3e..ee5f986880cb 100644
--- a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss
+++ b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss
@@ -11,18 +11,25 @@
 }
 
 dot-file-upload {
+    @mixin box-style($border-style) {
+        border: 1px $border-style var(--color-main);
+        border-radius: 4px;
+    }
     mwc-icon {
         color: var(--color-grey);
         font-size: 24px;
+        cursor: pointer;
+    }
+
+    mwc-button {
+        border: 1.5px solid var(--color-main);
+        border-radius: 8px;
+        color: var(--color-main);
     }
 
     input[type="file"] {
         display: none;
     }
-    @mixin box-style($border-style) {
-        border: 1px $border-style var(--color-main);
-        border-radius: 4px;
-    }
     .dot-file-upload {
         width: 100%;
         padding: 16px;
@@ -50,17 +57,15 @@ dot-file-upload {
         :first-child {
             margin-right: 8px;
         }
-        mwc-button {
-            border: 1.5px solid var(--color-main);
-            border-radius: 8px;
-            color: var(--color-main);
-        }
     }
 
     .dot-file-list {
         @include box-style(solid);
         margin-top: 10px;
         padding: 16px;
+        mwc-icon {
+            color: var(--color-main);
+        }
         .dot-file-list-item {
             display: flex;
             align-items: center;
diff --git a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js
index d805a1049d32..7f1cd31ec176 100644
--- a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js
+++ b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js
@@ -12,7 +12,8 @@ export default {
         browserButtonText: 'Browse',
         writeCodeButtonText: 'Write Code',
         cancelButtonText: 'Cancel',
-        currentState: 'UPLOADFILE'
+        currentState: 'UploadFile',
+        assets: []
     }
 };
 
diff --git a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx
index 21f4903913a6..98debdaefb7b 100644
--- a/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx
+++ b/core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.tsx
@@ -1,11 +1,12 @@
-import { Component, Host, State, h, Prop, Element, Event, EventEmitter } from '@stencil/core';
+import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';
 import '@material/mwc-button';
 import '@material/mwc-icon';
+import { DotCMSTempFile } from '@dotcms/dotcms-models';
 
 enum DotFileCurrentStatus {
     UPLOADFILE = 'UploadFile',
     CODEEDITOR = 'CodeEditor',
-    FileList = 'FileList'
+    FILELIST = 'FileList'
 }
 
 @Component({
@@ -15,24 +16,52 @@ enum DotFileCurrentStatus {
 export class DotFileUpload {
     @Element() el: HTMLElement;
 
-    @State() currentState: DotFileCurrentStatus = DotFileCurrentStatus.UPLOADFILE;
+    @Prop() currentState: DotFileCurrentStatus = DotFileCurrentStatus.UPLOADFILE;
 
     @Prop() dropFilesText = 'Drag and Drop or paste a file';
     @Prop() browserButtonText = 'Browser';
     @Prop() writeCodeButtonText = 'Write Code';
     @Prop() cancelButtonText = 'Cancel';
 
-    @Event() fileUploaded: EventEmitter;
+    @Prop({ reflect: true, mutable: true }) assets: DotCMSTempFile[] = [];
+    @Watch('assets')
+    watchAssets(newAssets: DotCMSTempFile[], _oldAssets: DotCMSTempFile[]) {
+        if (newAssets.length > 0 && this.currentState !== DotFileCurrentStatus.FILELIST) {
+            this.currentState = DotFileCurrentStatus.FILELIST;
+        }
+    }
+
+    @Event() fileUploaded: EventEmitter<File[]>;
+    @Event() dataChanges: EventEmitter<File[]>;
 
-    updateCurrentStatus(status: DotFileCurrentStatus) {
+    private updateCurrentStatus(status: DotFileCurrentStatus) {
         this.currentState = status;
+        if (this.currentState !== DotFileCurrentStatus.FILELIST) {
+            this.assets = [];
+        }
     }
 
-    fileChangeHandler(event: Event) {
-        this.fileUploaded.emit(event);
+    private fileChangeHandler(event: Event) {
+        let files: File[] = [];
+        if (
+            (event.target as HTMLInputElement).files &&
+            (event.target as HTMLInputElement).files.length
+        ) {
+            Array.from((event.target as HTMLInputElement).files).map((file: File) => {
+                files.push(file);
+            });
+        }
+        this.fileUploaded.emit(files);
     }
-    getCurrentElement() {
-        if (this.currentState === DotFileCurrentStatus.UPLOADFILE) {
+
+    private removeAssetFromFileList(assetId) {
+        this.assets = this.assets.filter(({ id }: DotCMSTempFile) => id !== assetId);
+        if (this.assets.length === 0) {
+            this.currentState = DotFileCurrentStatus.UPLOADFILE;
+        }
+    }
+    private getCurrentElement(currentState: DotFileCurrentStatus) {
+        if (currentState === DotFileCurrentStatus.UPLOADFILE) {
             return (
                 <div class="dot-file-upload">
                     <div class="dot-file-upload-drop-message">
@@ -59,18 +88,22 @@ export class DotFileUpload {
                     </div>
                 </div>
             );
-        } else if (this.currentState === DotFileCurrentStatus.FileList) {
+        } else if (currentState === DotFileCurrentStatus.FILELIST) {
             return (
                 <div class="dot-file-list">
-                    <div class="dot-file-list-item">
-                        <div>
-                            <mwc-icon>insert_drive_file</mwc-icon>
-                        </div>
-                        <div>File12345</div>
-                        <div>
-                            <mwc-icon>delete</mwc-icon>
+                    {this.assets.map((asset: DotCMSTempFile) => (
+                        <div class="dot-file-list-item">
+                            <div>
+                                <mwc-icon>insert_drive_file</mwc-icon>
+                            </div>
+                            <div>{asset.fileName}</div>
+                            <div>
+                                <mwc-icon onClick={() => this.removeAssetFromFileList(asset.id)}>
+                                    delete
+                                </mwc-icon>
+                            </div>
                         </div>
-                    </div>
+                    ))}
 
                     <div class="dot-file-list-cancel-box">
                         <mwc-button
@@ -84,7 +117,7 @@ export class DotFileUpload {
                     </div>
                 </div>
             );
-        } else if (this.currentState === DotFileCurrentStatus.CODEEDITOR) {
+        } else if (currentState === DotFileCurrentStatus.CODEEDITOR) {
             return (
                 <div class="dot-file-editor">
                     <slot />
@@ -120,9 +153,12 @@ export class DotFileUpload {
 
     componentDidLoad(): void {
         this.fileInput = this.el.querySelector('.dot-file-upload input');
+        if (this.assets.length > 0) {
+            this.currentState = DotFileCurrentStatus.FILELIST;
+        }
     }
 
     render() {
-        return <Host>{this.getCurrentElement()}</Host>;
+        return <Host>{this.getCurrentElement(this.currentState)}</Host>;
     }
 }
diff --git a/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp b/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp
index 24d62b6e94f7..cd4d7c2781ef 100644
--- a/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp
+++ b/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field.jsp
@@ -792,18 +792,61 @@
             accept="<%=accept %>" >
     </div>
     <div class="file-asset-container">
-        <dot-asset-drop-zone id="dot-asset-drop-zone-<%=field.getVelocityVarName()%>" class="file-asset__drop-zone"></dot-asset-drop-zone>
+        <dot-asset-drop-zone 
+            id="dot-asset-drop-zone-<%=field.getVelocityVarName()%>"
+            class="file-asset__drop-zone"
+        ></dot-asset-drop-zone>
             <dot-file-upload
                 id="dot-file-upload-<%=field.getVelocityVarName()%>"
                 dropFilesText='Drag and Drop or paste a file'
                 browserButtonText="Browser"
                 writeCodeButtonText="Write Code"
                 cancelButtonText="Cancel"
+                assets="[]"
             ></dot-file-upload>
     </div>
     <script type="text/javascript">
         dojo.addOnLoad(() => {
-            bindDotFileUploadListener("<%=field.getVelocityVarName()%>")
+
+        const uploadPlugin = ({files, onSuccess, updateProgress, onError}) => {
+                // Check if we get an array of files otherwise create array.
+                const data = Array.isArray(files) ? files : [files];
+
+                // Create Form Data
+                const formData = new FormData();
+                data.forEach((file) => formData.append('file', file));
+                
+                return new Promise((res, rej) => {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', '/api/v1/temp?maxFileLength=<%= maxFileLength%>');
+                    xhr.onload = () => res(xhr);
+                    xhr.onerror = rej;
+
+                    // Get Upload Process
+                    if (xhr.upload && updateProgress) {
+                        xhr.upload.onprogress = (e) => {
+                            const percentComplete = (e.loaded / e.total) * 100;
+                            updateProgress(percentComplete);
+                        };
+                    }
+
+                    xhr.send(formData);
+
+                }).then(async (request) => {
+                    if (request.status !== 200) {
+                        throw request;
+                    }
+                    onSuccess();
+                    return JSON.parse(request.response)?.tempFiles || [];
+                })
+                .catch((request) => {
+                    const response = typeof (request.response) === 'string' ? JSON.parse(request.response) : request.response;
+                    const errorMesage = response.errors[0].message;
+                    onError(headerError, errorMesage);
+                    throw response;
+                });
+            }
+            bindDotFileUploadListener("<%=field.getVelocityVarName()%>", uploadPlugin)
         })
         function saveBinaryFileOnContent<%=field.getVelocityVarName()%>(fileName, dijitReference){
             saveBinaryFileOnContent('<%=field.getInode()%>','<%=field.getVelocityVarName()%>','<%=field.getFieldContentlet()%>', dijitReference.fileNameField.value);
diff --git a/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field_js.jsp b/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field_js.jsp
index 549826a08d27..4afe2d09e52d 100644
--- a/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field_js.jsp
+++ b/dotCMS/src/main/webapp/html/portlet/ext/contentlet/field/edit_field_js.jsp
@@ -95,14 +95,24 @@ function enableSiteKeyUpdate(dialogId, siteKeyInputId) {
 
 // Dot Upload File
 
-function bindDotFileUploadListener(id){
-	const dotFileUpload = document.querySelector(`#dot-file-upload-${id}`)
-	dotFileUpload.addEventListener('fileUploaded', function (event){
+
+	function bindDotFileUploadListener(id, uploadPlugin){
 		const dotFileUpload = document.querySelector(`#dot-file-upload-${id}`)
-		const dotAssetDropZone = document.querySelector(`#ddot-asset-drop-zone-${id}`)
+		const dotAssetDropZone = document.querySelector(`#dot-asset-drop-zone-${id}`);
+		dotFileUpload.addEventListener('fileUploaded', function (event){
+			event.dataTransfer = {};
+			event.dataTransfer.files = event.detail;
+			dotAssetDropZone.ondrop(event);
+		})
 
-	})
-}
+
+		dotAssetDropZone.customUploadFiles = uploadPlugin;
+		dotAssetDropZone.addEventListener('uploadComplete', function(asset){
+			console.log("data", asset)
+			dotFileUpload.assets = [...asset.detail];
+			dotAssetDropZone.style.pointerEvents = "none";
+		})
+	}