---
title: Upload Progress
description: Per-file and aggregate progress bars for in-flight uploads, reading the ambient state of a useFiles instance.
---

A drop-in progress view. It reads the ambient `uploads` and `progress` a [`useFiles`](/ui/client/react) instance exposes, so it lights up for **any** upload that instance starts — wherever the call originates. Returns `null` when idle.

<ComponentPreview name="upload-progress/upload-progress-basic" />

## Installation

<ComponentInstall name="upload-progress" />

## Usage

```tsx lineNumbers
import { useFiles } from "files-sdk/react";

import { UploadProgress } from "@/components/files-sdk/upload-progress";

export function Uploader() {
  const files = useFiles({ endpoint: "/api/files" });

  return (
    <>
      <button onClick={() => files.upload(/* … */)} type="button">
        Upload
      </button>
      <UploadProgress files={files} />
    </>
  );
}
```

Each row shows a file's name, percentage and status (uploading, success, error, aborted). When more than one file is in flight, an aggregate bar is shown on top.

## Props

<AutoTypeTable
  path="registry/files-sdk/upload-progress/upload-progress.tsx"
  name="UploadProgressProps"
/>