Merge pull request #2349 from epam/fix-uploading-files

[SlateEditor] Fix files upload
epam · Jun 12, 2024 · 7596a1b · 7596a1b
2 parents 53940b0 + 6320c75
commit 7596a1b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/uui-editor/src/plugins/uploadFilePlugin/file_uploader.ts b/uui-editor/src/plugins/uploadFilePlugin/file_uploader.ts
@@ -3,7 +3,6 @@ import type { FileUploadResponse } from '@epam/uui-core';
 import {
     PlateEditor,
     getPlugin,
-    KEY_INSERT_DATA,
     deleteBackward,
     insertEmptyElement,
     insertNodes,
@@ -15,18 +14,29 @@ import { IFRAME_TYPE } from '../iframePlugin/constants';
 import { TImageElement } from '../imagePlugin/types';
 import { TIframeElement } from '../iframePlugin/types';
 import { TAttachmentElement } from '../attachmentPlugin/types';
+import { UPLOAD_PLUGIN_KEY } from './constants';
 
 export type UploadType = keyof typeof UPLOAD_BLOCKS;
 
-export interface UploadFileOptions {
-    uploadFile?: UploadFile;
-}
-
 type UploadFile = (
     file: File,
     onProgress?: (progress: number) => any
 ) => Promise<FileUploadResponse>;
 
+export interface UploadFileOptions {
+    uploadFile?: UploadFile;
+}
+
+type FileUploader = (
+    editor: PlateEditor,
+    files: File[],
+    overriddenAction?: UploadType,
+) => Promise<void>;
+
+export interface FileUploaderOptions {
+    uploadFiles?: FileUploader;
+}
+
 const UPLOAD_BLOCKS = {
     attachment: (file: FileUploadResponse): TAttachmentElement => ({
         type: ATTACHMENT_TYPE,
@@ -120,7 +130,8 @@ export const createFileUploader = (options?: UploadFileOptions) =>
 export const useFilesUploader = (editor: PlateEditor) => {
     return useCallback(
         (files: File[], overriddenAction?: UploadType): Promise<void> => {
-            const callback = getPlugin(editor, KEY_INSERT_DATA)?.options?.uploadFiles;
+            const callback = getPlugin<FileUploaderOptions>(editor, UPLOAD_PLUGIN_KEY)?.options.uploadFiles;
+
             if (callback) {
                 return callback(
                     editor,

diff --git a/uui-editor/src/plugins/uploadFilePlugin/uploadFilePlugin.ts b/uui-editor/src/plugins/uploadFilePlugin/uploadFilePlugin.ts
@@ -6,6 +6,7 @@ import {
 } from '@udecode/plate-common';
 import { UPLOAD_PLUGIN_KEY } from './constants';
 import {
+    FileUploaderOptions,
     UploadFileOptions,
     createFileUploader,
 } from './file_uploader';
@@ -20,7 +21,7 @@ const isFilesUploadEvent = (dataTransfer: DataTransfer) => {
 };
 
 export const uploadFilePlugin = (uploadOptions?: UploadFileOptions): PlatePlugin => {
-    const createUploadPlugin = createPluginFactory({
+    const createUploadPlugin = createPluginFactory<FileUploaderOptions>({
         key: UPLOAD_PLUGIN_KEY,
         options: { uploadFiles: createFileUploader(uploadOptions) },
         handlers: {
@@ -37,7 +38,7 @@ export const uploadFilePlugin = (uploadOptions?: UploadFileOptions): PlatePlugin
                     select(editor, at);
 
                     const { files } = event.dataTransfer;
-                    plugin.options.uploadFiles(editor, Array.from(files));
+                    plugin.options.uploadFiles?.(editor, Array.from(files));
                     return true;
                 };
             },
@@ -49,7 +50,7 @@ export const uploadFilePlugin = (uploadOptions?: UploadFileOptions): PlatePlugin
                     event.stopPropagation();
 
                     const { files } = event.clipboardData;
-                    plugin.options.uploadFiles(editor, Array.from(files));
+                    plugin.options.uploadFiles?.(editor, Array.from(files));
                     return true;
                 };
             },