feat: add progress bar to file upload dialog (#982)

* feat: add progress bar to file upload dialog

* feat: update progress

* feat: don't paste filename into editor

* feat: show image after upload a glance

Author: honwhy

apps/web/src/components/CodemirrorEditor/UploadImgDialog.vue

@@ -387,15 +387,45 @@ onChange((files) => {
 
   const file = files[0]
 
-  beforeImageUpload(file) && emit(`uploadImage`, file)
+  beforeImageUpload(file) && emitUploads(file)
   reset()
 })
 
 function onDrop(e: DragEvent) {
   dragover.value = false
   e.stopPropagation()
   const file = Array.from(e.dataTransfer!.files)[0]
-  beforeImageUpload(file) && emit(`uploadImage`, file)
+  beforeImageUpload(file) && emitUploads(file)
+}
+const progressValue = ref(0)
+const imageUrl = ref(``)
+function emitUploads(file: File) {
+  progressValue.value = 0
+  const intervalId = setInterval(() => {
+    const newProgress = progressValue.value + 1
+    if (newProgress >= 100) {
+      return
+    }
+    progressValue.value = newProgress
+  }, 100)
+
+  // 监听上传完成事件，在真正完成后清除定时器和设置100%
+  const cleanup = (_url: string, data: string) => {
+    clearInterval(intervalId)
+    progressValue.value = 100 // 设置完成状态
+    if (data) {
+      imageUrl.value = `data:image/png;base64,${data}`
+    }
+    // 可选：延迟一段时间后重置进度
+    setTimeout(() => {
+      progressValue.value = 0
+      imageUrl.value = ``
+    }, 1000)
+  }
+
+  // 假设有一个上传完成的事件可以监听
+  // 或者需要修改 uploadImage 方法使其返回 Promise
+  emit(`uploadImage`, file, cleanup, true)
 }
 </script>
 
@@ -437,7 +467,7 @@ function onDrop(e: DragEvent) {
             </Select>
           </Label>
           <div
-            class="bg-clip-padding mt-4 h-50 flex flex-col cursor-pointer items-center justify-evenly border-2 rounded border-dashed transition-colors hover:border-gray-700 hover:bg-gray-400/50 dark:hover:border-gray-200 dark:hover:bg-gray-500/50"
+            class="bg-clip-padding mt-4 h-50 relative flex flex-col cursor-pointer items-center justify-evenly border-2 rounded border-dashed transition-colors hover:border-gray-700 hover:bg-gray-400/50 dark:hover:border-gray-200 dark:hover:bg-gray-500/50"
             :class="{
               'border-gray-700 bg-gray-400/50 dark:border-gray-200 dark:bg-gray-500/50': dragover,
             }"
@@ -446,11 +476,15 @@ function onDrop(e: DragEvent) {
             @dragover.prevent="dragover = true"
             @dragleave.prevent="dragover = false"
           >
+            <Progress v-model="progressValue" class="absolute left-0 right-0 rounded-none" style="top: -24px; height: 2px;" />
             <UploadCloud class="size-20" />
             <p>
               将图片拖到此处，或
               <strong>点击上传</strong>
             </p>
+            <div v-if="imageUrl" class="absolute left-0 right-0 h-full w-full flex items-center justify-center bg-white dark:bg-black">
+              <img :src="imageUrl" class="max-h-40 object-contain">
+            </div>
           </div>
         </TabsContent>
 

apps/web/src/components/ui/progress/Progress.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from 'radix-vue'
+import { ProgressIndicator, ProgressRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<ProgressRootProps>()
+const emits = defineEmits<{
+  (e: `update:modelValue`, payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, `modelValue`, emits, {
+  passive: true,
+  defaultValue: 0,
+})
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="forwarded"
+    v-model="modelValue"
+    class="relative overflow-hidden bg-blackA9 rounded-full w-full h-4 sm:h-5"
+    style="transform: translateZ(0)"
+  >
+    <ProgressIndicator
+      class="bg-primary rounded-full w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
+      :style="`transform: translateX(-${100 - (modelValue || 0)}%)`"
+    />
+  </ProgressRoot>
+</template>

apps/web/src/components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as progress } from './Progress.vue'

apps/web/src/views/CodemirrorEditor.vue

@@ -179,7 +179,9 @@ function uploaded(imageUrl: string) {
     toast.error(`上传图片未知异常`)
     return
   }
-  toggleShowUploadImgDialog(false)
+  setTimeout(() => {
+    toggleShowUploadImgDialog(false)
+  }, 1000)
   // 上传成功，获取光标
   const cursor = editor.value!.getCursor()
   const markdownImage = `![](${imageUrl})`
@@ -192,19 +194,23 @@ const isImgLoading = ref(false)
 
 async function uploadImage(
   file: File,
-  cb?: { (url: any): void, (arg0: unknown): void } | undefined,
+  cb?: { (url: any, data: string): void, (arg0: unknown): void } | undefined,
+  applyUrl?: boolean,
 ) {
   try {
     isImgLoading.value = true
 
     const base64Content = await toBase64(file)
     const url = await fileUpload(base64Content, file)
     if (cb) {
-      cb(url)
+      cb(url, base64Content)
     }
     else {
       uploaded(url)
     }
+    if (applyUrl) {
+      return uploaded(url)
+    }
   }
   catch (err) {
     toast.error((err as any).message)
@@ -329,7 +335,7 @@ function mdLocalToRemote() {
 const changeTimer = ref<NodeJS.Timeout>()
 
 const editorRef = useTemplateRef<HTMLTextAreaElement>(`editorRef`)
-
+const progressValue = ref(0)
 function createFormTextArea(dom: HTMLTextAreaElement) {
   const textArea = fromTextArea(dom, {
     mode: `text/x-markdown`,
@@ -359,17 +365,32 @@ function createFormTextArea(dom: HTMLTextAreaElement) {
   })
 
   // 粘贴上传图片并插入
-  textArea.on(`paste`, (_editor, event) => {
+  textArea.on(`paste`, async (_editor, event) => {
     if (!(event.clipboardData?.items) || isImgLoading.value) {
       return
     }
-
     const items = [...event.clipboardData.items].map(item => item.getAsFile()).filter(item => item != null && beforeUpload(item)) as File[]
-
+    // start progress
+    const intervalId = setInterval(() => {
+      const newProgress = progressValue.value + 1
+      if (newProgress >= 100) {
+        return
+      }
+      progressValue.value = newProgress
+    }, 100)
     for (const item of items) {
-      uploadImage(item)
       event.preventDefault()
+      await uploadImage(item)
+    }
+    const cleanup = () => {
+      clearInterval(intervalId)
+      progressValue.value = 100 // 设置完成状态
+      // 可选：延迟一段时间后重置进度
+      setTimeout(() => {
+        progressValue.value = 0
+      }, 1000)
     }
+    cleanup()
   })
 
   return textArea
@@ -437,6 +458,7 @@ onUnmounted(() => {
 
 <template>
   <div class="container flex flex-col">
+    <Progress v-model="progressValue" class="absolute left-0 right-0 rounded-none" style="height: 2px;" />
     <EditorHeader
       @start-copy="startCopy"
       @end-copy="endCopy"