refactor(comp:upload): fix review

packages/components/config/src/defaultConfig.ts

@@ -212,7 +212,7 @@ const upload: UploadConfig = {
 }
 
 const uploadList: UploadListConfig = {
-  listType: 'text',
+  type: 'text',
   icon: {
     file: 'paper-clip',
     remove: 'delete',

packages/components/config/src/types.ts

@@ -200,7 +200,7 @@ export interface UploadConfig {
 }
 
 export interface UploadListConfig {
-  listType: UploadListType
+  type: UploadListType
   icon: Partial<Record<UploadIconType, string | VNode>>
 }
 

packages/components/upload/__tests__/__snapshots__/upload.spec.ts.snap

@@ -1,11 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Upload render render work 1`] = `
-"<div>
+"<div class=\\"ix-upload\\">
   <div class=\\"ix-upload-selector\\"><input class=\\"ix-upload-input\\" type=\\"file\\">
     <!---->
   </div>
   <!---->
+  <!---->
   <div class=\\"ix-upload-tip\\">
     <!---->
   </div>

packages/components/upload/__tests__/list.spec.ts

@@ -43,7 +43,7 @@ describe('Upload list render', () => {
           [uploadToken as symbol]: {
             files: ref([
               {
-                uid: 'test1',
+                key: 'test1',
                 name: 'idux.svg',
                 thumbUrl: '/icons/logo.svg',
               },
@@ -72,7 +72,7 @@ describe('Upload list render', () => {
           [uploadToken as symbol]: {
             files: ref([
               {
-                uid: 'test1',
+                key: 'test1',
                 name: 'idux.svg',
                 errorTip: 'error',
                 status: 'error',
@@ -94,7 +94,7 @@ describe('Upload list render', () => {
           [uploadToken as symbol]: {
             files: ref([
               {
-                uid: 'test1',
+                key: 'test1',
                 name: 'idux.svg',
                 status: 'success',
               },
@@ -121,7 +121,7 @@ describe('Upload list render', () => {
     const onDownload = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.svg',
         status: 'success',
       },
@@ -152,7 +152,7 @@ describe('Upload list render', () => {
     const onPreview = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.svg',
         status: 'success',
       },
@@ -189,7 +189,7 @@ describe('Upload list render', () => {
     const upload = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.svg',
         status: 'error',
       },
@@ -223,10 +223,10 @@ describe('Upload list render', () => {
     const abort = jest.fn()
     const defaultFiles = [
       {
-        uid: 'test1',
+        key: 'test1',
         name: 'idux.png',
         status: 'uploading',
-        raw: Object.assign(new File(['test1'], 'idux.png', { type: 'image/png' }), { uid: 'test1' }),
+        raw: new File(['test1'], 'idux.png', { type: 'image/png' }),
       },
     ]
 

packages/components/upload/__tests__/upload.spec.ts

@@ -16,12 +16,12 @@ import { UploadProps } from '../src/types'
 
 const defaultFiles: UploadFile[] = [
   {
-    uid: 'test1',
+    key: 'test1',
     name: 'idux.svg',
     thumbUrl: '/icons/logo.svg',
   },
   {
-    uid: 'error',
+    key: 'error',
     name: 'error.png',
     status: 'error',
     errorTip: 'Upload failed.',
@@ -105,7 +105,7 @@ describe('Upload render', () => {
 
     expect(wrapper.findAll('.ix-upload-file').length).toBe(2)
 
-    await wrapper.setProps({ files: [{ uid: 'files test', name: 'files test' }] })
+    await wrapper.setProps({ files: [{ key: 'files test', name: 'files test' }] })
 
     expect(wrapper.findAll('.ix-upload-file').length).toBe(1)
 
@@ -210,7 +210,7 @@ describe('Upload render', () => {
       props: {
         files: [
           {
-            uid: 'test2',
+            key: 'test2',
             name: 'idux.svg',
             status: 'uploading',
             percent: 50,

packages/components/upload/demo/Action.vue

@@ -15,8 +15,8 @@ import { ref } from 'vue'
 const files = ref([])
 const action = (file: UploadFile) => {
   if (file.raw?.type === 'image/png') {
-    return Promise.resolve('/upload/png')
+    return Promise.resolve('https://run.mocky.io/v3/41a4b385-bf7e-4808-b1e4-d2ef1e0cdc11')
   }
-  return '/upload'
+  return 'https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354'
 }
 </script>

packages/components/upload/demo/Basic.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" />

packages/components/upload/demo/ButtonDisplay.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <a>Click here</a>
     <template #list>
       <IxUploadList type="text" />

packages/components/upload/demo/Check.vue

@@ -1,5 +1,11 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" accept=".png" @select="onSelect" @beforeUpload="onBeforeUpload">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    accept=".png"
+    @select="onSelect"
+    @beforeUpload="onBeforeUpload"
+  >
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
@@ -8,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadFile, UploadRawFile } from '@idux/components/upload'
+import type { UploadFile } from '@idux/components/upload'
 
 import { ref } from 'vue'
 
@@ -28,7 +34,7 @@ const onBeforeUpload = (file: UploadFile) =>
     resolve(true)
   })
 
-const onSelect = (files: UploadRawFile[]) => {
+const onSelect = (files: File[]) => {
   if (files.some(file => file.name.length > 6)) {
     warning('Check from onSelect: The file size exceeds the limitFile name exceeds length.')
     return false

packages/components/upload/demo/CustomFileList.vue

@@ -1,8 +1,8 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list="{ abort, upload }">
-      <div v-for="file in files" :key="file.uid" class="upload-file">
+      <div v-for="file in files" :key="file.key" class="upload-file">
         <a :class="`file file-${file.status}`" href="file.thumbUrl">{{ file.name }}</a>
         <div>
           <span>{{ file.percent.toFixed(2) }}% </span>

packages/components/upload/demo/CustomRequest.vue

@@ -1,5 +1,10 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" :customRequest="customRequest" @requestChange="onRequestChange">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    :customRequest="customRequest"
+    @requestChange="onRequestChange"
+  >
     <IxButton>Custom upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
@@ -13,7 +18,8 @@ import type { UploadRequestChangeOption, UploadRequestOption } from '@idux/compo
 import { ref } from 'vue'
 
 const files = ref([])
-const customRequest = (option: UploadRequestOption<Response>) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const customRequest = (option: UploadRequestOption<any>) => {
   const formData = new FormData()
   const controller = new AbortController()
   const signal = controller.signal
@@ -32,7 +38,7 @@ const customRequest = (option: UploadRequestOption<Response>) => {
     })
   }
 
-  formData.append(option.filename, option.file, option.file.name)
+  formData.append(option.name, option.file, option.file.name)
 
   fetch(option.action, {
     method: option.requestMethod,

packages/components/upload/demo/Dragable.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" dragable>
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354" dragable>
     <div class="drag-panel">
       <IxIcon name="upload" class="drag-panel-icon"></IxIcon>
       <p>Drag and drop files or click to select files to upload.</p>

packages/components/upload/demo/FilesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList />
@@ -12,12 +12,12 @@ import { ref } from 'vue'
 
 const files = ref([
   {
-    uid: 'test1',
+    key: 'test1',
     name: 'idux.svg',
     thumbUrl: '/icons/logo.svg',
   },
   {
-    uid: 'error',
+    key: 'error',
     name: 'error.png',
     status: 'error',
     errorTip: 'Upload failed.',

packages/components/upload/demo/Hooks.vue

@@ -1,7 +1,7 @@
 <template>
   <IxUpload
     v-model:files="files"
-    action="/upload"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
     :maxCount="1"
     @beforeUpload="onBeforeUploadMessage"
     @select="onSelectMessage"
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadFile, UploadRawFile, UploadRequestChangeOption } from '@idux/components/upload'
+import type { UploadFile, UploadRequestChangeOption } from '@idux/components/upload'
 import type { Ref } from 'vue'
 
 import { ref, watch } from 'vue'
@@ -34,7 +34,7 @@ const onBeforeUploadMessage = (file: UploadFile) => {
   timelineList.value.push(`${file.name}: beforeUpload`)
   return true
 }
-const onSelectMessage = (file: UploadRawFile[]) => {
+const onSelectMessage = (file: File[]) => {
   console.log('select', file)
   timelineList.value.push(`${file[0].name}: select`)
   return true

packages/components/upload/demo/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" :icon="icon" />

packages/components/upload/demo/ListDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <IxSpace direction="vertical">
     <IxRadioGroup v-model:value="curType" :options="listType"></IxRadioGroup>
-    <IxUpload v-model:files="files" action="/upload">
+    <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
       <IxButton>Upload</IxButton>
       <template #list>
         <IxUploadList :type="curType" />
@@ -21,8 +21,9 @@ const listType = [
 const curType = ref('text')
 const files = ref([
   {
-    uid: 'default',
+    key: 'default',
     name: 'idux.svg',
+    status: 'success',
     thumbUrl: '/icons/logo.svg',
   },
 ])

packages/components/upload/demo/Manual.vue

@@ -1,5 +1,9 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload" @beforeUpload="onBeforeUpload">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    @beforeUpload="onBeforeUpload"
+  >
     <IxButton>Manual upload</IxButton>
     <template #list>
       <IxUploadList type="text" />
@@ -25,7 +29,7 @@ const onBeforeUpload = (file: UploadFile) => {
     formData.append('file', file.raw!.slice(start, end))
 
     // custom request
-    fetch('/upload', {
+    fetch('https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354', {
       method: 'POST',
       body: formData,
     })

packages/components/upload/demo/MaxCount.vue

@@ -1,6 +1,10 @@
 <template>
   <IxInputNumber v-model:value="maxCount" style="margin-bottom: 8px" />
-  <IxUpload v-model:files="files" action="/upload" :maxCount="maxCount">
+  <IxUpload
+    v-model:files="files"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
+    :maxCount="maxCount"
+  >
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList type="text" />

packages/components/upload/demo/Operation.md

@@ -7,8 +7,12 @@ order: 13
 
 ## zh
 
-支持对文件进行操作
+支持对单文件操作如预览（onPreview）、下载（onDownload）、移除（onRemove）、失败重试（onRetry）。
+
+> IxUpload内置默认预览，上传成功后，若文件file存在thumbUrl可展示图片预览，若配置了`onPreview`则会覆盖默认的预览
 
 ## en
 
-Support operations on files.
+Supports single file operations such as preview (onPreview), download (onDownload), removal (onRemove), and failure retry (onRetry).
+
+> IxUpload has a built-in default preview. After the upload is successful, if the file file exists in the thumbUrl, the image preview can be displayed. If `onPreview` is configured, the default preview will be overwritten.

packages/components/upload/demo/Operation.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxUpload v-model:files="files" action="/upload">
+  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
     <IxButton>Upload</IxButton>
     <template #list>
       <IxUploadList
@@ -31,7 +31,7 @@ const icon = ref({
 })
 const files: Ref<UploadFile[]> = ref([
   {
-    uid: 'default',
+    key: 'default',
     name: 'error.png',
     status: 'error',
     errorTip: 'error',

packages/components/upload/demo/StrokeColor.vue

@@ -1,7 +1,7 @@
 <template>
   <IxUpload
     v-model:files="files"
-    action="/upload"
+    action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354"
     :progress="{
       strokeColor: {
         '0%': '#108ee9',