React File Upload with Preview

This challenge asks you to build a React component that allows users to upload files and displays a preview of the selected image(s) before submission. Implementing file upload with preview is a common requirement in web applications, enabling users to verify their selections and improving the overall user experience. This challenge will test your understanding of React state management, file handling in JavaScript, and rendering dynamic content.

Problem Description

You need to create a React component called FileUploadWithPreview that allows users to select one or more image files from their local storage. Upon selection, the component should:

1. Display a preview: Show a thumbnail of each selected image. If multiple images are selected, display them in a row or grid.
2. Handle multiple file selection: The component should allow the user to select multiple files at once.
3. Clear selection: Provide a mechanism (e.g., a button) to clear the selected files and remove their previews.
4. File type validation: Only allow image files (e.g., .jpg, .jpeg, .png, .gif) to be uploaded. Display an error message if a non-image file is selected.
5. File size validation: Limit the maximum file size for each image to 2MB (2048KB). Display an error message if a file exceeds this limit.
6. State Management: Use React state to manage the selected files and their previews.

Expected Behavior:

• When a user clicks the "Choose Files" button, a file input dialog opens.
• Upon selecting image files, the component updates its state with the selected files.
• The component dynamically renders previews for each selected image.
• The "Clear Selection" button removes all selected files and their previews.
• Error messages are displayed for invalid file types or sizes.

Examples

Example 1:

Input: User selects a single .png image file (100KB).
Output: A thumbnail preview of the .png image is displayed.
Explanation: The component successfully handles a single image upload and displays its preview.

Example 2:

Input: User selects three .jpg images (50KB, 150KB, 250KB).
Output: Three thumbnails are displayed in a row or grid, representing the three selected images.
Explanation: The component correctly handles multiple image uploads and displays all previews.

Example 3:

Input: User selects a .txt file.
Output: An error message "Invalid file type. Only images are allowed." is displayed, and the .txt file is not added to the preview.
Explanation: The component correctly validates the file type and prevents non-image files from being uploaded.

Example 4:

Input: User selects a .jpg image file (3MB).
Output: An error message "File size exceeds the limit of 2MB." is displayed, and the file is not added to the preview.
Explanation: The component correctly validates the file size and prevents files exceeding the limit from being uploaded.

Constraints

• File Types: Only allow .jpg, .jpeg, .png, and .gif files.
• Maximum File Size: 2MB (2048KB) per file.
• React Version: Use functional components and hooks.
• UI Library: You can use basic HTML elements for the UI or a simple UI library like Material UI or Ant Design. The focus is on the file upload logic, not the styling.
• Performance: The component should render previews efficiently, even with multiple selected files. Avoid unnecessary re-renders.

Notes

• Consider using the FileReader API to read the contents of the selected files and generate image previews.
• You can use the useState hook to manage the state of the selected files.
• Think about how to handle errors gracefully and provide informative feedback to the user.
• The component does not need to actually upload the files to a server. The focus is on the client-side file selection and preview functionality.
• You can use a library like react-dropzone if you prefer, but the core logic of file selection, validation, and preview generation should be implemented. If using a library, clearly state which one you are using.