Multi-Stage Upload Progress Tracker

Build a React component that tracks and displays progress for a multi-stage file upload operation using a top-loading progress bar controlled programmatically.

Requirements

Create a component that manages a file upload workflow with distinct stages. The component should:

• Display a file input for user to select a file
• Show a "Start Upload" button (enabled only when a file is selected)
• Use a loading bar at the top of the page to display progress
• Control the loading bar programmatically using imperative methods
• When upload starts, set progress to 30%
• During upload (simulate with 2-second delay), increment progress from 30% to 80%
• When upload completes, finish the loading bar at 100%
• Display current progress percentage on screen
• Show "Upload complete!" message when finished

Test Cases

• When a file is selected, the "Start Upload" button becomes enabled @test
• Clicking "Start Upload" initiates the loading bar and sets progress to 30% @test
• During upload simulation, progress increases from 30% to 80% in increments @test
• When upload completes, the loading bar reaches 100% and completes @test

Implementation

@generates

API

/**
 * Multi-stage file upload component with progress tracking
 */
export default function UploadProgressTracker(): JSX.Element;

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides a customizable top-loading progress bar with imperative control methods.

@satisfied-by