From c70a1f262d2a7028bd81c7c3d8a360b1312730af Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 21 Nov 2022 10:52:37 +0700
Subject: [PATCH] Added image upload progress to Koenig-Lexical-Editor (#15852)

ref https://github.com/TryGhost/Team/issues/2237

- Adds an upload progress function, to be used with Koenig-Lexical.
---
 .../app/components/koenig-lexical-editor.js   | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/app/components/koenig-lexical-editor.js b/ghost/admin/app/components/koenig-lexical-editor.js
index 0e842d7cea..781eb8e0f6 100644
--- a/ghost/admin/app/components/koenig-lexical-editor.js
+++ b/ghost/admin/app/components/koenig-lexical-editor.js
@@ -109,21 +109,24 @@ export default class KoenigLexicalEditor extends Component {
     }
 
     ReactComponent = () => {
-        const [uploadProgressPercentage] = React.useState(0); // not in use right now, but will need to decide how to handle the percentage state and pass to the Image Cards
+        const [uploadProgress, setUploadProgress] = React.useState(0);
 
-        // const uploadProgress = (event) => {
-        //     const percentComplete = (event.loaded / event.total) * 100;
-        //     setUploadProgressPercentage(percentComplete);
-        // };
+        const uploadProgressHandler = (event) => {
+            const percentComplete = (event.loaded / event.total) * 100;
+            setUploadProgress(percentComplete);
+            if (percentComplete === 100) {
+                setUploadProgress(0);
+            }
+        };
 
         async function imageUploader(files) {
             function uploadToUrl(formData, url) {
                 return new Promise((resolve, reject) => {
                     const xhr = new XMLHttpRequest();
                     xhr.open('POST', url);
-                    // xhr.upload.onprogress = (event) => {
-                    //     uploadProgress(event);
-                    // };
+                    xhr.upload.onprogress = (event) => {
+                        uploadProgressHandler(event);
+                    };
                     xhr.onload = () => resolve(xhr.response);
                     xhr.onerror = () => reject(xhr.statusText);
                     xhr.send(formData);
@@ -146,7 +149,7 @@ export default class KoenigLexicalEditor extends Component {
                         <KoenigComposer
                             initialEditorState={this.args.lexical}
                             onError={this.onError}
-                            imageUploadFunction={{imageUploader, uploadProgressPercentage}} >
+                            imageUploadFunction={{imageUploader, uploadProgress}} >
                             <KoenigEditor onChange={this.args.onChange} />
                         </KoenigComposer>
                     </Suspense>