fix: Local file import, drag and drop upload method to upload files in formats other than allowed

[shaohuzhang1]

fix: Local file import, drag and drop upload method to upload files in formats other than allowed

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

There are several improvements and potential issues to consider in your Vue component code:

@@ -65,7 +66,7 @@ import { computed, useAttrs, nextTick, inject, ref } from 'vue'

This line doesn't seem related to the changes you made.

Potential Issues

1. Duplicated v-loading Usage: The v-loading directive is duplicated within the same <div>, which might not be necessary and could cause confusion.
2. Lack of Type Checking for File Name: There's no error handling when a file name ends with .DS_Store.
3. Missing Error Handling for Size Limitation: It would be good to add more robust validation messages or error states for size limitations beyond just removing files.

Suggestions for Optimization / Improvement

1. Combine Destructuring and Default Values:

   const {
     attrs,
     updateModelValueEvent,
     modelValue,
   } = defineProps<{
     attrs: any;
     updateModelValueEvent?: (value: any) => void;
     modelValue: any[];
   }>({
     attrs: {},
     updateModelValueEvent: undefined,
     modelValue: [],
   });

2. Use Composition API More Consistently:
   Ensure consistent usage of the composition API throughout the component, especially around reactive state management.

3. Add Additional Validation Error Messages:
   You can enhance user experience by providing more descriptive error messages, especially for non-image types like spreadsheets or PDFs.

Here's an updated version incorporating some of these suggestions:

@@ -82,6 +83,7 @@ const onExceed = () => {

@@ -91,6 +93,13 @@ const fileHandleChange = (file: any, fileList: UploadFiles) => {

+  // Validate file type against list
+  if (!file_type_list.value.includes(file.type.toUpperCase())) {
+    if (file?.name !== '.DS_Store') {
+      MsgError(t('views.document.upload.errorMessage2', { fileName: file.name }));
+    }
+    fileList.splice(-1, 1);
+    return false;
+  }

@@ -105,10 +114,7 @@ const fileHandleChange = (file: any, fileList: UploadFiles) => {
}

function deleteFile(index: number) {
-  emit(
-    'update:modelValue',
-    props.modelValue.filter((item: any, i: number) => index != i),
-  );
+  emit(updateModelValueEvent ? updateModelValueEvent : 'update:modelValue', modelValue.filter(item => item.index !== index));
}

Note that I've used computed properties to access attrs.file_type_list. This makes reading them easier and prevents repeated accesses to props.attrs.

These modifications should enhance the reliability and functionality of your upload component while maintaining readability and maintainability.