Update File Upload Modal

[mahid797]

Revise the ModalWrapper component to align with updated design requirements for the file upload modal. The current drag-and-drop functionality will be removed in favor of a standard file input field. The new modal must support multiple file uploads, displaying selected files with status indicators, and providing options to remove files before upload. Ensure the changes strictly follow the provided Figma designs.

Tasks

• Remove drag-and-drop functionality:
  • Remove the existing drag-and-drop box from the UploadBox component inside the ModalWrapper.
• Implement new file input mechanism:
  • Add a file input field to allow users to select files.
  • Ensure the file input supports multiple file selections.
• Display and manage selected files:
  • Display a list of selected files, including file names and sizes.
  • Add a "Remove" option for each file to allow users to deselect files before upload.
  • Show status indicators for each file, such as upload progress or error messages for failed uploads.
• Align with Figma design:
  • Verify layout, styling, and functionality match the new design exactly.
  • Add or adjust any elements in the modal to align with the design system.
• Integrate backend support for multi-file uploads:
  • Update the frontend to handle the new API for batch uploads once it's implemented.
  • Test and validate end-to-end functionality, including error handling for failed uploads.
• Validate modal responsiveness:
  • Ensure the updated modal works across various screen sizes and resolutions.
• Conduct manual testing:
  • Verify the UI and functionality for single and multiple file uploads.
  • Confirm the modal closes and resets properly after file uploads are completed or canceled.

Notes

• This issue depends on backend API support for batch uploads - Add Support for Batch File Uploads #131