feat: Support uploading files by copying, pasting, dragging and dropping

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[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.

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/test-infra 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.

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]

The code you provided has several areas that could be improved or checked for irregularities:

1. Variable Naming and Clarity: The variable names like localLoading, imageExtensions, documentExtensions, etc., are descriptive but some might be more concise or informative.

2. Event Handlers:

   • Ensure all events have appropriate checks to prevent unauthorized operations, especially when file uploads are disabled (applicationDetails.file_upload_enable).

3. Styling and Flexibility:

   • Check if the styles used (like .flex.align-center) are compatible with your design requirements.

4. Performance Considerations:

   • For handling pasting, consider optimizing performance by preventing unecessary computations inside loops and using asynchronous functions where possible.

5. Error Handling:

   • Implement error handling in both paste and drop event handlers to manage cases where files fail to upload properly.

6. Refactoring Upload Logic:

   • Combine the logic for uploading files and processing them into a reusable function to reduce redundancy.

Here's an updated version of the key sections with some suggestions:

// Simplify extension arrays
<template>
  <!-- Existing template content -->
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

const props = defineProps({
  // existing props
})

const localLoading = computed(() => ({
  show: false,
  text: '',
}))

const isFileUploadEnabled = computed(() => {
  return !!props.applicationDetails.file_upload_enable;
});

// Other methods

<script>

/**
 * Updated method to handle drag and drop
 */
const handleDrop = async (e: DragEvent): Promise<void> => {
  e.preventDefault();
  
  let transferredFiles: File[] = [];
  
  try {
    const dataTransfer = e.dataTransfer || window.e; // Fix for web components
  
    if (!dataTransfer) throw new Error('No data transfer available.');
    
    transferredFiles = [...(Array.prototype.filter.call(dataTransfer.items, item => !item.webkit kind))];

    await handleFileList(transferredFiles);
  } catch (error) {
    console.error(error)
  }
}

/**
 * Updates fileList based on input type
 *
 * @param files list of files to process
 */
async function updateFileList(files: any[]): Promise<void> {
  if(!files.length) return;

  const elFiles = files.map(file => ({
    uid: Date.now(),
    name: file.name,
    size: file.size,
    raw: file.raw ?? file,
    status: "ready",
    percentage: 0
  }));

  await handleFileList(elFiles); // Continue with original implementation
}

</script>

Summary Changes:

• Removed redundant code blocks.
• Improved naming conventions for clarity.
• Added comments to explain specific functionalities.
• Ensured better practices for file manipulation.
• Enhanced readability by organizing similar tasks together.

Regularly review such changes after implementation to ensure they work as anticipated without causing unexpected bugs.