Skip to content

Conversation

@armaang1729
Copy link
Collaborator

Fix: File Upload Re-upload Issue

Description

This PR fixes a critical bug in the FileUpload component where users could not re-upload the same file after removing it. Another was to support the file upload feature in which the user can upload multiple files with same name.

Key Changes:

  • Clear file input value after file selection to enable re-uploading the same file
  • Implement unique identifier (UID) system for better file tracking and duplicate handling
  • Added tests for re-upload scenarios and duplicate filename handling

Related Issue

Motivation and Context

How Has This Been Tested?

  • Unit Tests Added:

    • should allow re-uploading same file after removal - Tests the core bug fix
    • should handle duplicate filenames correctly without removing wrong file - Tests improved file tracking with UIDs
  • Manual Testing:

    1. Upload a file → verify it appears in the list
    2. Remove the file → verify it's removed from the list
    3. Upload the same file again → verify it can be re-uploaded successfully
    4. Test with multiple files having the same name → verify correct file is removed

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

const newFiles = Array.from<File>(e.dataTransfer?.files || e?.target?.files || e.clipboardData?.files || []);

// Clear the input value to allow re-uploading the same file again
if (e.target && e.target.type === 'file') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can upload multiple files at once as well, I don't think that use-case is handled here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sir multiple files upload use case was already handled before, the 2 main issues which we were experiencing was re-uploading the removed file and uploading 2 files having same name.

the use case achieved.

Screenshot 2025-08-27 at 2 42 12 PM

onClick={(e) => {
// Prevent form submit bubbling when used inside a <form>
e.preventDefault();
e.stopPropagation();

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be prevented at form level

@armaang1729 armaang1729 deleted the fix/file-upload-component branch August 28, 2025 10:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants