[FEAT] - Components - MediaFileUpload

[stephen-gift]

Description

Create a reusable Media file upload component with drag-and-drop functionality using TypeScript (TSX) and Shadcn in a Next.js application. The component should support file selection through drag-and-drop and manual file input, displaying previews of the uploaded files with an option to delete uploaded images. It should also include a label prop and a customizable button component.

Acceptance Criteria

• The component should support drag-and-drop file uploads.
• The component should allow manual file selection via a file input.
• Uploaded files should be displayed with previews (images).
• Each uploaded file should have a delete button to remove the file.
• The component should handle multiple file uploads.
• The component should pass the uploaded files to the parent component through a callback function.
• The component should pass the deleted file to the parent component through a callback function.
• The component should include a label prop for the file input.
• The component should accept a button component for customization.

Requirements

• Use TypeScript (TSX) for type safety and better developer experience.
• Ensure the component is reusable and can be integrated into different parts of the application.
• Ensure accessibility for file input and drag-and-drop area.
• Include necessary and acceptable props:
  • onUpload: (files: File[]) => void
  • onDelete: (file: File) => void
  • label: string
  • buttonComponent: React.FC

Tests

• Ensure the drag-and-drop functionality works correctly.
• Ensure manual file input selection works.
• Ensure file previews are displayed correctly after upload.
• Ensure the delete button removes the correct file and triggers the onDelete callback.
• Test the callback functions to ensure uploaded and deleted files are passed to the parent component.
• Validate that multiple files can be uploaded and displayed.
• Validate that the label prop is displayed correctly.
• Validate that the custom button component is rendered and functional.

Tasks

• [ ] Create a MediaUpload component:
  • [ ] Implement drag-and-drop area.
  • [ ] Implement file input for manual selection.
  • [ ] Display previews of uploaded files.
  • [ ] Implement a delete button to remove uploaded files.
  • [ ] Pass uploaded files to the parent component through a callback.
  • [ ] Pass deleted files to the parent component through a callback.
  • [ ] Include a label prop for the file input.
  • [ ] Accept a custom button component.
• [ ] Create a test page to demonstrate the MediaUpload component.
• [ ] Write tests to validate functionality and requirements.
• [ ] Document the component usage and integration.

LINKS

Figma Link

IMAGES

[authcornelius]

I am here

[Peliah]

hi, I have a question about the custom button in the requirement, Should the component only accept the functional component as a prop or is there something in here that it's supposed to do?

please can you kindly clarify @stephen-gift @abiona01

[stephen-gift]

hi, I have a question about the custom button in the requirement, Should the component only accept the functional component as a prop or is there something in here that it's supposed to do?

please can you kindly clarify @stephen-gift @abiona01

The custom button mentioned Is the button from the main design.

[Peliah]

Understood. Thank you very much for the clarificaion