Added uploadProgressPercentage State

no issue

- prototyping how to implement and handle the upload progress status.

ghost/admin/app/components/koenig-lexical-editor.js

@@ -89,27 +89,6 @@ const KoenigEditor = (props) => {
     return <_KoenigEditor {...props} />;
 };
 
-async function imageUploader(files) {
-    function uploadToUrl(formData, url) {
-        return new Promise((resolve, reject) => {
-            const xhr = new XMLHttpRequest();
-            xhr.open('POST', url);
-            xhr.onload = () => resolve(xhr.response);
-            xhr.onerror = () => reject(xhr.statusText);
-            xhr.send(formData);
-        });
-    }
-    const formData = new FormData();
-    formData.append('file', files[0]);
-    const url = `${ghostPaths().apiRoot}/images/upload/`;
-    const response = await uploadToUrl(formData, url);
-    const dataset = JSON.parse(response);
-    const imageUrl = dataset?.images?.[0].url;
-    return {
-        src: imageUrl
-    };
-}
-
 export default class KoenigLexicalEditor extends Component {
     @service config;
 
@@ -130,14 +109,44 @@ 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 = (event) => {
+        //     const percentComplete = (event.loaded / event.total) * 100;
+        //     setUploadProgressPercentage(percentComplete);
+        // };
+
+        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.onload = () => resolve(xhr.response);
+                    xhr.onerror = () => reject(xhr.statusText);
+                    xhr.send(formData);
+                });
+            }
+            const formData = new FormData();
+            formData.append('file', files[0]);
+            const url = `${ghostPaths().apiRoot}/images/upload/`;
+            const response = await uploadToUrl(formData, url);
+            const dataset = JSON.parse(response);
+            const imageUrl = dataset?.images?.[0].url;
+            return {
+                src: imageUrl
+            };
+        }
         return (
             <div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
                 <ErrorHandler>
                     <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
                         <KoenigComposer 
                             initialEditorState={this.args.lexical} 
                             onError={this.onError} 
-                            imageUploadFunction={imageUploader} >
+                            imageUploadFunction={{imageUploader, uploadProgressPercentage}} >
                             <KoenigEditor onChange={this.args.onChange} />
                         </KoenigComposer>
                     </Suspense>