:art: fix #872

CHANGELOG.md

@@ -88,6 +88,8 @@
 
 ### v3.7.5 / 2020-12-xx
 
+* [872](https://github.com/Vanessa219/vditor/issues/872) vditor.options.upload.file 支持 await `改进功能`
+
 ### v3.7.4 / 2020-12-26
 
 * [871](https://github.com/Vanessa219/vditor/issues/871) 大纲标题过长需显示省略号 `改进功能`

src/ts/upload/index.ts

@@ -140,117 +140,118 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
     vditor.upload.range = getSelection().getRangeAt(0).cloneRange();
 };
 
-const uploadFiles = (vditor: IVditor, files: FileList | DataTransferItemList | File[], element?: HTMLInputElement) => {
-    // FileList | DataTransferItemList | File[] => File[]
-    let fileList = [];
-    const filesMax = vditor.options.upload.multiple === true ? files.length : 1;
-    for (let i = 0; i < filesMax; i++) {
-        let fileItem = files[i];
-        if (fileItem instanceof DataTransferItem) {
-            fileItem = fileItem.getAsFile();
+const uploadFiles =
+    async (vditor: IVditor, files: FileList | DataTransferItemList | File[], element?: HTMLInputElement) => {
+        // FileList | DataTransferItemList | File[] => File[]
+        let fileList = [];
+        const filesMax = vditor.options.upload.multiple === true ? files.length : 1;
+        for (let i = 0; i < filesMax; i++) {
+            let fileItem = files[i];
+            if (fileItem instanceof DataTransferItem) {
+                fileItem = fileItem.getAsFile();
+            }
+            fileList.push(fileItem);
         }
-        fileList.push(fileItem);
-    }
 
-    if (vditor.options.upload.handler) {
-        const isValidate = vditor.options.upload.handler(fileList);
-        if (typeof isValidate === "string") {
-            vditor.tip.show(isValidate);
+        if (vditor.options.upload.handler) {
+            const isValidate = vditor.options.upload.handler(fileList);
+            if (typeof isValidate === "string") {
+                vditor.tip.show(isValidate);
+                return;
+            }
             return;
         }
-        return;
-    }
 
-    if (!vditor.options.upload.url || !vditor.upload) {
-        if (element) {
-            element.value = "";
+        if (!vditor.options.upload.url || !vditor.upload) {
+            if (element) {
+                element.value = "";
+            }
+            vditor.tip.show("please config: options.upload.url");
+            return;
         }
-        vditor.tip.show("please config: options.upload.url");
-        return;
-    }
 
-    if (vditor.options.upload.file) {
-        fileList = vditor.options.upload.file(fileList);
-    }
+        if (vditor.options.upload.file) {
+            fileList = await vditor.options.upload.file(fileList);
+        }
 
-    if (vditor.options.upload.validate) {
-        const isValidate = vditor.options.upload.validate(fileList);
-        if (typeof isValidate === "string") {
-            vditor.tip.show(isValidate);
-            return;
+        if (vditor.options.upload.validate) {
+            const isValidate = vditor.options.upload.validate(fileList);
+            if (typeof isValidate === "string") {
+                vditor.tip.show(isValidate);
+                return;
+            }
         }
-    }
-    const editorElement = getElement(vditor);
+        const editorElement = getElement(vditor);
 
-    vditor.upload.range = getEditorRange(editorElement);
+        vditor.upload.range = getEditorRange(editorElement);
 
-    const validateResult = validateFile(vditor, fileList);
-    if (validateResult.length === 0) {
-        if (element) {
-            element.value = "";
+        const validateResult = validateFile(vditor, fileList);
+        if (validateResult.length === 0) {
+            if (element) {
+                element.value = "";
+            }
+            return;
         }
-        return;
-    }
 
-    const formData = new FormData();
+        const formData = new FormData();
 
-    const extraData = vditor.options.upload.extraData;
-    for (const key of Object.keys(extraData)) {
-        formData.append(key, extraData[key]);
-    }
+        const extraData = vditor.options.upload.extraData;
+        for (const key of Object.keys(extraData)) {
+            formData.append(key, extraData[key]);
+        }
 
-    for (let i = 0, iMax = validateResult.length; i < iMax; i++) {
-        formData.append(vditor.options.upload.fieldName, validateResult[i]);
-    }
+        for (let i = 0, iMax = validateResult.length; i < iMax; i++) {
+            formData.append(vditor.options.upload.fieldName, validateResult[i]);
+        }
 
-    const xhr = new XMLHttpRequest();
-    xhr.open("POST", vditor.options.upload.url);
-    if (vditor.options.upload.token) {
-        xhr.setRequestHeader("X-Upload-Token", vditor.options.upload.token);
-    }
-    if (vditor.options.upload.withCredentials) {
-        xhr.withCredentials = true;
-    }
-    setHeaders(vditor, xhr);
-    vditor.upload.isUploading = true;
-    editorElement.setAttribute("contenteditable", "false");
-    xhr.onreadystatechange = () => {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
-            vditor.upload.isUploading = false;
-            editorElement.setAttribute("contenteditable", "true");
-            if (xhr.status >= 200 && xhr.status < 300) {
-                if (vditor.options.upload.success) {
-                    vditor.options.upload.success(editorElement, xhr.responseText);
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", vditor.options.upload.url);
+        if (vditor.options.upload.token) {
+            xhr.setRequestHeader("X-Upload-Token", vditor.options.upload.token);
+        }
+        if (vditor.options.upload.withCredentials) {
+            xhr.withCredentials = true;
+        }
+        setHeaders(vditor, xhr);
+        vditor.upload.isUploading = true;
+        editorElement.setAttribute("contenteditable", "false");
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
+                vditor.upload.isUploading = false;
+                editorElement.setAttribute("contenteditable", "true");
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    if (vditor.options.upload.success) {
+                        vditor.options.upload.success(editorElement, xhr.responseText);
+                    } else {
+                        let responseText = xhr.responseText;
+                        if (vditor.options.upload.format) {
+                            responseText = vditor.options.upload.format(files as File [], xhr.responseText);
+                        }
+                        genUploadedLabel(responseText, vditor);
+                    }
                 } else {
-                    let responseText = xhr.responseText;
-                    if (vditor.options.upload.format) {
-                        responseText = vditor.options.upload.format(files as File [], xhr.responseText);
+                    if (vditor.options.upload.error) {
+                        vditor.options.upload.error(xhr.responseText);
+                    } else {
+                        vditor.tip.show(xhr.responseText);
                     }
-                    genUploadedLabel(responseText, vditor);
                 }
-            } else {
-                if (vditor.options.upload.error) {
-                    vditor.options.upload.error(xhr.responseText);
-                } else {
-                    vditor.tip.show(xhr.responseText);
+                if (element) {
+                    element.value = "";
                 }
+                vditor.upload.element.style.display = "none";
             }
-            if (element) {
-                element.value = "";
+        };
+        xhr.upload.onprogress = (event: ProgressEvent) => {
+            if (!event.lengthComputable) {
+                return;
             }
-            vditor.upload.element.style.display = "none";
-        }
+            const progress = event.loaded / event.total * 100;
+            vditor.upload.element.style.display = "block";
+            const progressBar = vditor.upload.element;
+            progressBar.style.width = progress + "%";
+        };
+        xhr.send(formData);
     };
-    xhr.upload.onprogress = (event: ProgressEvent) => {
-        if (!event.lengthComputable) {
-            return;
-        }
-        const progress = event.loaded / event.total * 100;
-        vditor.upload.element.style.display = "block";
-        const progressBar = vditor.upload.element;
-        progressBar.style.width = progress + "%";
-    };
-    xhr.send(formData);
-};
 
 export {Upload, uploadFiles};

src/ts/util/fixBrowserBehavior.ts

@@ -1196,7 +1196,7 @@ export const fixFirefoxArrowUpTable = (event: KeyboardEvent, blockElement: false
     return false;
 };
 
-export const paste = (vditor: IVditor, event: ClipboardEvent & { target: HTMLElement }, callback: {
+export const paste = async (vditor: IVditor, event: ClipboardEvent & { target: HTMLElement }, callback: {
     pasteCode(code: string): void,
 }) => {
     event.stopPropagation();
@@ -1346,7 +1346,7 @@ export const paste = (vditor: IVditor, event: ClipboardEvent & { target: HTMLEle
             }
             vditor.outline.render(vditor);
         } else if (event.clipboardData.files.length > 0 && vditor.options.upload.url) {
-            uploadFiles(vditor, event.clipboardData.files);
+            await uploadFiles(vditor, event.clipboardData.files);
         } else if (textPlain.trim() !== "" && event.clipboardData.files.length === 0) {
             if (vditor.currentMode === "ir") {
                 renderers.Md2VditorIRDOM = {renderLinkDest};