@layers-app/editor 0.4.1-progress.1 → 0.5.0

package/README.md

@@ -150,7 +150,7 @@ Use **StylesProvider** to add styling to your HTML content.
 ## Image upload
 
 To start working with image uploads, use the **fetchUploadMedia** function, which takes three parameters: **file**, **success**, and **error**. After successfully uploading the image to your service, you should call the **success** function and pass two required arguments: the **URL** of the image and its **ID**.
-
+Optional: You can also pass two optional parameters: **signal** and **onProgress**. The **signal** allows you to cancel an ongoing upload using an AbortController, and **onProgress** provides the current upload progress in percent — useful for displaying a progress bar or loading state.
 ```
   const fetchUploadMedia = async (
     file: File,
@@ -187,6 +187,42 @@ To start working with image uploads, use the **fetchUploadMedia** function, whic
     }
   };
 
+  const fetchUploadMedia = async (
+  file: File,
+  success: (url: string, id: string, data: any) => void,
+  error?: (err: Error) => void,
+  signal?: AbortSignal,
+  onProgress?: (percent: number) => void,
+) => {
+    const formData = new FormData();
+    formData.append('File', file);
+    formData.append('FileAccessModifier', '0');
+
+  const xhr = new XMLHttpRequest();
+  xhr.open('POST', '/api/v1/Files/Upload');
+  xhr.withCredentials = true;
+
+  if (signal) signal.addEventListener('abort', () => xhr.abort());
+  if (onProgress) {
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) onProgress(Math.round((e.loaded / e.total) * 100));
+    };
+  }
+
+  xhr.onload = () => {
+    try {
+      const data = JSON.parse(xhr.responseText);
+      success(`/v1/attachments/${data.id}`, data.id, data);
+    } catch {
+      error?.(new Error('Invalid response'));
+    }
+  };
+
+  xhr.onerror = () => error?.(new Error('Upload error')));
+  xhr.send(formData);
+};
+
+
 <Editor
   ...props
   fetchUploadMedia={fetchUploadMedia}