# @blocklet/uploader

> blocklet upload component

Latest version **0.15.4** (published 2026-04-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @blocklet/uploader
pnpm add @blocklet/uploader
yarn add @blocklet/uploader
bun add @blocklet/uploader
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.15.4 |
| Published | 2026-04-26 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 36 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | arcblock |
| Maintainers | wangshijun, gxw |
| Keywords | blocklet, uploader |

## Links

- npm: https://www.npmjs.com/package/@blocklet/uploader
- npm.io page: https://npm.io/package/@blocklet/uploader

## Dependencies (36)

- [ufo](https://npm.io/package/ufo.md) ^1.5.4
- [axios](https://npm.io/package/axios.md) ^1.15.2
- [exifr](https://npm.io/package/exifr.md) ^7.1.3
- [ahooks](https://npm.io/package/ahooks.md) ^3.8.1
- [fflate](https://npm.io/package/fflate.md) ^0.8.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [preact](https://npm.io/package/preact.md) 10.20.1
- [xbytes](https://npm.io/package/xbytes.md) ^1.9.1
- [url-join](https://npm.io/package/url-join.md) ^4.0.1
- [@uppy/tus](https://npm.io/package/@uppy/tus.md) 3.5.5
- [@uppy/url](https://npm.io/package/@uppy/url.md) 3.6.1
- [dompurify](https://npm.io/package/dompurify.md) ^3.4.1
- [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.5
- [spark-md5](https://npm.io/package/spark-md5.md) ^3.0.2
- [@mui/utils](https://npm.io/package/@mui/utils.md) 7.2.0
- [@uppy/core](https://npm.io/package/@uppy/core.md) 3.13.1
- [micromatch](https://npm.io/package/micromatch.md) ^4.0.8
- [mime-types](https://npm.io/package/mime-types.md) ^2.1.35
- [@uppy/react](https://npm.io/package/@uppy/react.md) 3.4.0
- [@uppy/webcam](https://npm.io/package/@uppy/webcam.md) 3.4.2
- [react-player](https://npm.io/package/react-player.md) ^2.16.0
- [@mui/material](https://npm.io/package/@mui/material.md) 7.2.0
- [@uppy/locales](https://npm.io/package/@uppy/locales.md) 3.5.4
- [@uppy/unsplash](https://npm.io/package/@uppy/unsplash.md) 3.3.1
- [@uppy/dashboard](https://npm.io/package/@uppy/dashboard.md) 3.9.1
- [@uppy/drag-drop](https://npm.io/package/@uppy/drag-drop.md) 3.1.1
- [@uppy/file-input](https://npm.io/package/@uppy/file-input.md) 3.1.2
- [@uppy/status-bar](https://npm.io/package/@uppy/status-bar.md) 3.3.3
- [@uppy/drop-target](https://npm.io/package/@uppy/drop-target.md) 2.1.0
- [@blocklet/ui-react](https://npm.io/package/@blocklet/ui-react.md) ^3.5.3
- [@uppy/image-editor](https://npm.io/package/@uppy/image-editor.md) 2.4.6
- [@uppy/progress-bar](https://npm.io/package/@uppy/progress-bar.md) 3.1.1
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) 7.2.0
- [@uppy/provider-views](https://npm.io/package/@uppy/provider-views.md) 3.13.0
- [@uppy/golden-retriever](https://npm.io/package/@uppy/golden-retriever.md) 3.2.0
- [@lottiefiles/react-lottie-player](https://npm.io/package/@lottiefiles/react-lottie-player.md) ^3.5.4

## Recent versions

- 0.15.4 (latest) — 2026-04-26
- 0.3.20 — 2026-04-10
- 0.3.19 — 2026-01-04
- 0.3.18 — 2025-12-22
- 0.3.17 — 2025-12-22
- 0.3.16 — 2025-12-17
- 0.3.15 — 2025-12-15
- 0.3.14 — 2025-12-05
- 0.3.13 — 2025-11-28
- 0.3.12 — 2025-11-24
- 0.3.11 — 2025-11-14
- 0.3.10 — 2025-11-13
- 0.3.9 — 2025-11-10
- 0.3.8 — 2025-11-07
- 0.3.7 — 2025-11-06
- … 188 more at https://npm.io/package/@blocklet/uploader/versions

## README

# @blocklet/uploader

**@blocklet/uploader** is a package that integrates the **uppy** service to provide universal upload capability for blocklets. For more information about uppy, refer to the [official documentation](https://uppy.io/docs/quick-start/).

## Package Structure

The package is composed of both frontend and backend components. The frontend code resides in the `react` folder.

## Development

### Install In Blocklet

```
# You can use npm / yarn
pnpm add @blocklet/uploader
```

### Install Dependencies

To install the required dependencies, run the following command:

```
pnpm i
```

### Build Packages

To build the packages, execute the following command:

```
pnpm build
```

### Build, Watch, and Run Development Server

For building, watching changes, and running the development server, use the following command:

```
pnpm run dev
```

## Frontend Example

```jsx
import { lazy } from 'react';

// eslint-disable-next-line import/no-unresolved
const UploaderComponent = lazy(() => import('@blocklet/uploader').then((res) => ({ default: res.Uploader })));

<UploaderComponent
  key="uploader"
  ref={uploaderRef}
  popup
  onUploadFinish={(result) => {
    prependUpload(result.data);
  }}
  plugins={['ImageEditor', 'Url', 'Webcam', canUseUnsplash && 'Unsplash'].filter(Boolean)}
  coreProps={{
    restrictions: {
      allowedFileTypes,
      maxFileSize,
    },
  }}
  apiPathProps={{
    uploader: '/api/uploads',
    companion: '/api/companion',
    disableMediaKitPrefix: false,
    disableAutoPrefix: false,
    disableMediaKitStatus: false,
  }}
/>;
```

## License

This package is licensed under the MIT license.

---
_Source: https://npm.io/package/@blocklet/uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._