React File Upload with Image Preview

This challenge focuses on building a common and user-friendly feature for web applications: allowing users to upload files and see a preview of the selected images before committing to the upload. This enhances the user experience by providing immediate visual feedback.

Problem Description

Your task is to create a React component that allows users to select one or more image files from their local system and display a preview of each selected image within the browser.

Key Requirements:

File Selection: The component should provide an input element (e.g., a button or a styled input type="file") that allows users to select image files.
Multiple File Support: The component should be able to handle the selection of multiple image files at once.
Image Preview: For each selected image file, a preview of the image should be displayed. This preview should be generated dynamically from the selected file data.
File Type Filtering (Optional but Recommended): Ideally, the component should accept only image file types (e.g., JPEG, PNG, GIF).
Clear Previous Selections: When new files are selected, the existing previews should be cleared and replaced with the new selections. (Alternatively, you could allow appending, but clearing is a good starting point).
Error Handling (Basic): If a non-image file is selected (if filtering is implemented), display a simple error message.

Expected Behavior:

The user interacts with a file selection element.
The user selects one or more image files using their operating system's file dialog.
The component processes the selected files.
For each valid image file, a thumbnail preview is rendered on the page.
If an invalid file type is selected, an error message is displayed.

Edge Cases:

User cancels the file selection dialog.
User selects a very large image file (consider performance implications of large previews).
User selects files with different image formats.
No files are selected.

Examples

Example 1: Selecting a Single Image

Input: User clicks a "Choose Files" button and selects 'profile.jpg' (a valid JPEG image).

Output: A single image element is rendered, displaying the content of 'profile.jpg'.

Example 2: Selecting Multiple Images

Input: User clicks a "Choose Files" button and selects 'photo1.png' and 'photo2.gif'.

Output: Two image elements are rendered side-by-side (or in a list), displaying previews of 'photo1.png' and 'photo2.gif'.

Example 3: Selecting an Invalid File (if filtering is implemented)

Input: User clicks a "Choose Files" button and selects 'document.pdf'.

Output: An error message like "Invalid file type. Please select an image." is displayed, and no preview is shown.

Constraints

The solution must be implemented using React and TypeScript.
File previews should be generated client-side without server interaction.
The maximum number of files to preview simultaneously can be capped at 10 for this challenge.
The maximum file size for previewing is 5MB per file.

Notes

You'll likely need to use the FileReader API in JavaScript to read the contents of the selected files and convert them into a data URL that can be used for image previews.
Consider how to manage the state of the selected files and their corresponding previews within your React component.
Styling the file input and preview area is not the primary focus but can be improved for a better user experience.
Think about how to handle the cleanup of FileReader instances or any other resources if necessary, especially when the component unmounts or new files are selected.

Problem Description

Your task is to create a React component that allows users to select one or more image files from their local system and display a preview of each selected image within the browser.

Key Requirements:

File Selection: The component should provide an input element (e.g., a button or a styled input type="file") that allows users to select image files.

Multiple File Support: The component should be able to handle the selection of multiple image files at once.

Image Preview: For each selected image file, a preview of the image should be displayed. This preview should be generated dynamically from the selected file data.

File Type Filtering (Optional but Recommended): Ideally, the component should accept only image file types (e.g., JPEG, PNG, GIF).

Clear Previous Selections: When new files are selected, the existing previews should be cleared and replaced with the new selections. (Alternatively, you could allow appending, but clearing is a good starting point).

Error Handling (Basic): If a non-image file is selected (if filtering is implemented), display a simple error message.

Expected Behavior:

The user interacts with a file selection element.

The user selects one or more image files using their operating system's file dialog.

The component processes the selected files.

For each valid image file, a thumbnail preview is rendered on the page.

If an invalid file type is selected, an error message is displayed.

Edge Cases:

User cancels the file selection dialog.

User selects a very large image file (consider performance implications of large previews).

User selects files with different image formats.

No files are selected.

Examples

Example 1: Selecting a Single Image

Input: User clicks a "Choose Files" button and selects 'profile.jpg' (a valid JPEG image). Output: A single image element is rendered, displaying the content of 'profile.jpg'.

Example 2: Selecting Multiple Images

Input: User clicks a "Choose Files" button and selects 'photo1.png' and 'photo2.gif'. Output: Two image elements are rendered side-by-side (or in a list), displaying previews of 'photo1.png' and 'photo2.gif'.

Example 3: Selecting an Invalid File (if filtering is implemented)

Input: User clicks a "Choose Files" button and selects 'document.pdf'. Output: An error message like "Invalid file type. Please select an image." is displayed, and no preview is shown.

Notes

You'll likely need to use the FileReader API in JavaScript to read the contents of the selected files and convert them into a data URL that can be used for image previews.

Consider how to manage the state of the selected files and their corresponding previews within your React component.

Styling the file input and preview area is not the primary focus but can be improved for a better user experience.

Think about how to handle the cleanup of FileReader instances or any other resources if necessary, especially when the component unmounts or new files are selected.