feat(upload): adds input-prop prop, closes #2204

tusen-ai · Jan 22, 2022 · 42a4092 · 42a4092
1 parent dea4278
commit 42a4092
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 3 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -36,6 +36,7 @@
 - `n-checkbox` adds `blur` method, closes [#2202](https://github.com/TuSimple/naive-ui/issues/2202).
 - `n-cascader` adds `focus` method, closes [#2202](https://github.com/TuSimple/naive-ui/issues/2202).
 - `n-cascader` adds `blur` method, closes [#2202](https://github.com/TuSimple/naive-ui/issues/2202).
+- `n-upload` adds `input-prop` prop, closes [#2204](https://github.com/TuSimple/naive-ui/issues/2204).
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -36,6 +36,7 @@
 - `n-checkbox` 新增 `blur` 方法，关闭 [#2202](https://github.com/TuSimple/naive-ui/issues/2202)
 - `n-cascader` 新增 `focus` 方法，关闭 [#2202](https://github.com/TuSimple/naive-ui/issues/2202)
 - `n-cascader` 新增 `blur` 方法，关闭 [#2202](https://github.com/TuSimple/naive-ui/issues/2202)
+- `n-upload` 新增 `input-prop` 属性，关闭 [#2204](https://github.com/TuSimple/naive-ui/issues/2204)
 
 ### i18n
 

diff --git a/design-notes/todo.md b/design-notes/todo.md
@@ -2,8 +2,8 @@
 
 ## Urgent
 
-- message render XXX
 - carousel refactor arrow style
+- use resolve slot!!!
 
 ## DataTable
 

diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md
@@ -37,6 +37,7 @@ download
 | file-list-style | `Object` | `undefined` | The style of file list area |  |
 | file-list | `Array<UploadFileInfo>` | `undefined` | The file list of component. If set, the component will work in controlled manner. |  |
 | headers | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | The additional HTTP Headers of request. |  |
+| input-props | `Object` | `undefined` | Attributes of file input. | NEXT_VERSION |
 | image-group-props | `ImageGroupProps` | `undefined` | Props of `n-image` inside upload. See [ImageGroup Props](image#ImageGroup-Props). | 2.24.0 |
 | list-type | `string` | `'text'` | Built-in styles for file lists, `text`, `image` and `image-card`. |  |
 | max | `number` | `undefined` | Uploaded files limit. |  |

diff --git a/src/upload/demos/zhCN/index.demo-entry.md b/src/upload/demos/zhCN/index.demo-entry.md
@@ -39,6 +39,7 @@ retry-debug
 | file-list | `Array<UploadFileInfo>` | `undefined` | 文件列表，如果传入组件会处于受控状态 |  |
 | headers | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | HTTP 请求需要附加的 Headers |  |
 | image-group-props | `ImageGroupProps` | `undefined` | Upload 中预览图片组件的属性，参考 [ImageGroup Props](image#ImageGroup-Props) | 2.24.0 |
+| input-props | `Object` | `undefined` | file input 元素的属性 | NEXT_VERSION |
 | list-type | `string` | `'text'` | 文件列表的内建样式，`text`、`image` 和 `image-card` |  |
 | max | `number` | `undefined` | 限制上传文件数量 |  |
 | method | `string` | `'POST'` | HTTP 请求的方法 |  |

diff --git a/src/upload/src/Upload.tsx b/src/upload/src/Upload.tsx
@@ -9,7 +9,8 @@ import {
   CSSProperties,
   Fragment,
   Teleport,
-  nextTick
+  nextTick,
+  InputHTMLAttributes
 } from 'vue'
 import { createId } from 'seemly'
 import { useMergedState } from 'vooks'
@@ -319,7 +320,8 @@ const uploadProps = {
     type: Boolean,
     default: true
   },
-  imageGroupProps: Object as PropType<ImageGroupProps>
+  imageGroupProps: Object as PropType<ImageGroupProps>,
+  inputProps: Object as PropType<InputHTMLAttributes>
 } as const
 
 export type UploadProps = ExtractPublicPropTypes<typeof uploadProps>
@@ -629,6 +631,7 @@ export default defineComponent({
 
     const inputNode = (
       <input
+        {...this.inputProps}
         ref="inputElRef"
         type="file"
         class={`${mergedClsPrefix}-upload-file-input`}