fix(upload): file can't be removed when file count limit is reached, closes #1401

CHANGELOG.en-US.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+## Fixes
+
+- Fix `n-upload`'s file can't be removed when file count limit is reached, closes [#1401](https://github.com/TuSimple/naive-ui/issues/1401).
+
 ### Feats
 
 - `n-tabs` add `on-before-leave` prop, closes [#1337](https://github.com/TuSimple/naive-ui/issues/1337).

CHANGELOG.zh-CN.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+## Fixes
+
+- 修复 `n-upload` 在达到最大文件数量后无法删除文件，关闭 [#1401](https://github.com/TuSimple/naive-ui/issues/1401)
+
 ### Feats
 
 - `n-tabs` 新增 `on-before-leave` 属性，关闭 [#1337](https://github.com/TuSimple/naive-ui/issues/1337)

src/upload/src/Upload.tsx

@@ -282,11 +282,8 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const formItem = useFormItem(props)
-    const mergedDisabledRef = computed(() => {
+    const maxReachedRef = computed(() => {
       const { max } = props
-      if (formItem.mergedDisabledRef.value) {
-        return true
-      }
       if (max !== undefined) {
         return mergedFileListRef.value.length >= max
       }
@@ -515,7 +512,8 @@ export default defineComponent({
       openFileDialog,
       draggerInsideRef,
       handleFileAddition,
-      mergedDisabledRef,
+      mergedDisabledRef: formItem.mergedDisabledRef,
+      maxReachedRef,
       fileListStyleRef: toRef(props, 'fileListStyle'),
       abstractRef: toRef(props, 'abstract'),
       cssVarsRef

src/upload/src/UploadTrigger.tsx

@@ -22,6 +22,7 @@ export default defineComponent({
     const {
       mergedClsPrefixRef,
       mergedDisabledRef,
+      maxReachedRef,
       listTypeRef,
       dragOverRef,
       openFileDialog,
@@ -34,7 +35,7 @@ export default defineComponent({
     )
 
     function handleTriggerClick (): void {
-      if (mergedDisabledRef.value) return
+      if (mergedDisabledRef.value || maxReachedRef.value) return
       openFileDialog()
     }
     function handleTriggerDragOver (e: DragEvent): void {
@@ -51,7 +52,13 @@ export default defineComponent({
     }
     function handleTriggerDrop (e: DragEvent): void {
       e.preventDefault()
-      if (!draggerInsideRef.value || mergedDisabledRef.value) return
+      if (
+        !draggerInsideRef.value ||
+        mergedDisabledRef.value ||
+        maxReachedRef.value
+      ) {
+        return
+      }
       const dataTransfer = e.dataTransfer
       const files = dataTransfer?.files
       if (files) {
@@ -74,7 +81,7 @@ export default defineComponent({
         <div
           class={[
             `${mergedClsPrefix}-upload-trigger`,
-            mergedDisabledRef.value &&
+            (mergedDisabledRef.value || maxReachedRef.value) &&
               `${mergedClsPrefix}-upload-trigger--disabled`,
             isImageCardTypeRef.value &&
               `${mergedClsPrefix}-upload-trigger--image-card`

src/upload/src/interface.ts

@@ -72,6 +72,7 @@ export interface UploadInjection {
   draggerInsideRef: { value: boolean }
   fileListStyleRef: Ref<string | CSSProperties | undefined>
   mergedDisabledRef: Ref<boolean>
+  maxReachedRef: Ref<boolean>
   abstractRef: Ref<boolean>
   cssVarsRef: Ref<CSSProperties>
   submit: (fileId?: string) => void