@useupup/react

React file uploader with drag-and-drop, a progress bar, file previews, cloud-drive sources (Google Drive, OneDrive, Dropbox, Box), resumable uploads, an image editor, theming, and ICU i18n. This is the canonical upup UI — every other framework package mirrors its DOM.

Requires React 19 (react and react-dom are peer dependencies).

Install

npm i @useupup/react

Usage (Client Mode)

Client Mode uploads directly from the browser to your storage; your server only issues short-lived upload credentials at uploadEndpoint.

'use client'

import { UpupUploader } from '@useupup/react'
import '@useupup/react/styles'

export default function Uploader() {
    return (
        <UpupUploader
            provider="aws"
            uploadEndpoint="/api/upload-token"
            onFileUploadComplete={(file, key) =>
                console.log('Uploaded', file.name, 'to', key)
            }
        />
    )
}

uploadEndpoint is your own route that returns a presigned upload URL — see the quickstart for a ready-made handler, or use @useupup/server.

The stylesheet is a separate import so projects without Tailwind get the same look.

Server Mode

For credential isolation and server-proxied cloud drives, add @useupup/server and point the uploader at it:

<UpupUploader mode="server" serverUrl="/api/upup" provider="aws" />

Also exported

UpupThemeProvider, the brand source icons (GoogleDriveIcon, OneDriveIcon, DropboxIcon, BoxIcon, CameraIcon, and more), and the use* uploader hooks (useUpupUpload, useUploaderFiles, useUploaderContext, and more) for building custom UIs on the same engine.

Links

• React quickstart
• Documentation
• Source & monorepo

License

MIT