File Upload Progress Indicator

Build a React component that shows a top-loading progress bar during file uploads and completes the animation when uploads finish.

Requirements

Create a FileUploader component that:

1. Renders a file input element and a top-loading progress bar
2. When a file is selected, simulates an upload by waiting 3 seconds
3. Starts the loading bar when the upload begins
4. Completes the loading bar when the upload finishes
5. Shows "Upload complete!" message after completion
6. Supports multiple sequential uploads

The loading bar must:

• Use ref-based control (not state-based)
• Be blue colored with 3px height
• Start in continuous mode when upload begins
• Call the completion method when upload finishes

Implementation

@generates

API

import React from "react";

/**
 * Component that displays a file upload input with a top-loading progress bar.
 * The loading bar automatically starts when a file is selected and completes
 * when the upload simulation finishes.
 */
export default function FileUploader(): JSX.Element;

Test Cases

• When a file is selected, the loading bar starts automatically @test
• When the simulated upload completes after 3 seconds, the loading bar reaches 100% @test
• After the loading bar completes, the message "Upload complete!" is displayed @test
• Multiple sequential uploads each properly start and complete the loading bar @test

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides the top-loading progress bar component with imperative control methods for starting and completing the loading animation.

react { .dependency }

Provides the React framework for building the component.

@testing-library/react { .dependency }

Provides testing utilities for React components.