Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .changeset/bright-buses-listen.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
'upup-react-file-uploader': major
"upup-react-file-uploader": major
---

This major release adds built-in image editing, full localization support, resumable multipart uploads with pause/resume, improved progress and retry behavior, and stronger Google Drive and OneDrive integrations.
This release moves the modern npm package line from 1.5.2 to 2.0.0 and adds optional image editing, bundled locale packs, resumable multipart uploads with pause/resume, richer progress and retry UX, Google Workspace export support, and stronger Google Drive, OneDrive, and Dropbox flows. Existing 1.5.2 integrations can adopt these capabilities incrementally; the locale to localePack rename only affects consumers who tested unpublished builds after 1.5.2.
32 changes: 16 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,25 +43,25 @@ Works with **Next.js**, **Vite**, **Remix**, **Gatsby**, and any React framework
npm i upup-react-file-uploader # or yarn add / pnpm add / bun install
```

> Note for local development: the package API had a breaking rename — the `locale` prop is now `localePack`. Update any examples or local usage accordingly; see [`packages/upup/CHANGELOG.md#unreleased`](packages/upup/CHANGELOG.md#unreleased) for details.
> Note for local development: current localization examples use `localePack` for full locale packs and `translations` for per-key overrides. If you tested unpublished builds that used `locale`, update those examples to `localePack`. See [`packages/upup/CHANGELOG.md#unreleased`](packages/upup/CHANGELOG.md#unreleased) for the current 2.x release notes.

`pnpm dev` launches the landing page and documentation in watch mode via Turborepo while the package builds in watch mode for local consumption. All services use ports defined in `local-dev/.env.ports` to avoid conflicts with other projects.

### Frontend (React / Next.js / Vite / Remix)

```tsx
'use client'
"use client";

import { UpupUploader, UpupProvider } from 'upup-react-file-uploader'
import 'upup-react-file-uploader/styles'
import { UpupUploader, UpupProvider } from "upup-react-file-uploader";
import "upup-react-file-uploader/styles";

export default function Uploader() {
return (
<UpupUploader
provider={UpupProvider.AWS}
tokenEndpoint="/api/upload-token"
/>
)
return (
<UpupUploader
provider={UpupProvider.AWS}
tokenEndpoint="/api/upload-token"
/>
);
}
```

Expand Down Expand Up @@ -132,12 +132,12 @@ pnpm dev # runs landing + docs + package watcher via Turborepo

### Commands

| Command | Description |
| --- | --- |
| `pnpm dev` | Run everything in watch mode |
| `pnpm dev:package` | Storybook + local mock server |
| `pnpm build` | Build all (package → docs → landing) |
| `pnpm lint` / `pnpm test` / `pnpm typecheck` | Workspace-wide pipelines |
| Command | Description |
| -------------------------------------------- | ------------------------------------ |
| `pnpm dev` | Run everything in watch mode |
| `pnpm dev:package` | Storybook + local mock server |
| `pnpm build` | Build all (package → docs → landing) |
| `pnpm lint` / `pnpm test` / `pnpm typecheck` | Workspace-wide pipelines |

### Publishing

Expand Down
71 changes: 44 additions & 27 deletions packages/upup/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,72 +2,89 @@

## Unreleased

### Versioning Note

- This release moves the modern npm package line from `1.5.2` to `2.0.0`. Older GitHub `v2.x` tags belong to a legacy code line and are not the baseline for this release.

### Breaking Changes

- Renamed the `locale` prop to `localePack` to make it clear that a full `Translations` object is expected. This is a breaking change for callers: update any places that passed `locale={...}` to `localePack={...}`. The provider still accepts `translations` for partial overrides.
- No required migration was identified for consumers upgrading from the published npm package `1.5.2`.
- If you tested unpublished builds from `master` or `dev` after `1.5.2`, the full locale prop is now `localePack`, while `translations` remains the prop for partial overrides.

### Migration
### Features

- Replace occurrences of `locale={...}` with `localePack={...}` in your code and docs. Example:
- Added optional built-in image editing with inline and modal flows, configurable editor tabs and tools, and save/cancel hooks.
- Added first-class localization with bundled locale packs, `localePack`, `translations`, and a `upup-react-file-uploader/locales` export.
- Added resumable multipart uploads for S3-compatible providers, including pause/resume controls and persisted upload sessions.
- Added richer progress feedback, including retry controls, uploaded-byte tracking, speed, ETA, and pause/play actions.
- Added Google Workspace export support and native Google Drive export URLs to bypass the earlier 10 MB export limitation.
- Expanded and hardened Google Drive, OneDrive, and Dropbox integrations, including better fallback/auth flows.

### Improvements

- Improved mini-mode layout and responsive sizing.
- Improved upload cancellation handling to avoid orphaned multipart uploads.
- Expanded automated coverage with new Jest and Playwright tests around uploads, image editing, and multipart helpers.

### Migration

```tsx
import { ja_JP } from 'upup-react-file-uploader/locales'
;<UpupUploader localePack={ja_JP} />
```
- Existing `1.5.2` integrations can keep their current upload flow and adopt the new features incrementally.
- To enable localization on this release line, pass a full locale pack via `localePack` and use `translations` for per-key overrides.
- To enable image editing, install the optional editor peer dependencies before turning on `imageEditor`.

## 1.0.0

### 1.0.0 Major changes

- Initial release
- Initial release

## 1.0.1

### 1.0.1 Major changes

- Bug fixes
- Bug fixes

## 1.0.2

### 1.0.2 Major changes

- Bug fixes
- Bug fixes

## 1.1.0

### Features

- Added new `customProps` prop for passing custom provider-specific configurations
- Added `enableAutoCorsConfig` prop to control automatic CORS configuration for S3 providers
- Added new `customProps` prop for passing custom provider-specific configurations
- Added `enableAutoCorsConfig` prop to control automatic CORS configuration for S3 providers

### Fixes

- Resolved file preview rendering issues
- Fixed unmet peer dependencies warning
- Replaced problematic install command in CI/CD pipelines
- Improved file preview styling layout
- Enhanced default warning and error message styling
- Minor styling fixes and consistency improvements
- Resolved file preview rendering issues
- Fixed unmet peer dependencies warning
- Replaced problematic install command in CI/CD pipelines
- Improved file preview styling layout
- Enhanced default warning and error message styling
- Minor styling fixes and consistency improvements

### Maintenance

- Updated build scripts and documentation
- Updated build scripts and documentation

## 1.2.0

### Features

- Extracted CSS to a separate file that can be imported explicitly to solve styling precedence issues
- Added new CSS export path via `upup-react-file-uploader/styles`
- Extracted CSS to a separate file that can be imported explicitly to solve styling precedence issues
- Added new CSS export path via `upup-react-file-uploader/styles`

### Fixes

- Fixed CSS precedence issues when host projects use SCSS that loads after package styles
- Improved component styling to better handle external style overrides
- Changed "cancel" button text to "remove all files" in files preview state
- Removed supported file type text from component UI for cleaner interface
- Fixed CSS precedence issues when host projects use SCSS that loads after package styles
- Improved component styling to better handle external style overrides
- Changed "cancel" button text to "remove all files" in files preview state
- Removed supported file type text from component UI for cleaner interface

### Maintenance

- Updated build configuration to extract CSS instead of injecting it
- Updated documentation to include instructions for proper CSS import ordering
- Updated build configuration to extract CSS instead of injecting it
- Updated documentation to include instructions for proper CSS import ordering
40 changes: 20 additions & 20 deletions packages/upup/README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Upup React File Uploads Made Easy ☁️
# Upup - React File Uploads Made Easy

[![CI](https://github.com/DevinoSolutions/upup/actions/workflows/publish.yml/badge.svg?branch=master)](https://github.com/DevinoSolutions/upup/actions/workflows/publish.yml)
[![npm version](https://img.shields.io/npm/v/upup-react-file-uploader)](https://www.npmjs.com/package/upup-react-file-uploader)
[![npm downloads](https://img.shields.io/npm/dw/upup-react-file-uploader)](https://www.npmjs.com/package/upup-react-file-uploader)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![Discord](https://img.shields.io/discord/1299099371647930502?label=discord&logo=discord&logoColor=white&color=5865F2)](https://discord.gg/ny5WUE9ayc)

Open-source, plug-and-play uploads to **S3, DigitalOcean Spaces, Backblaze B2, Azure Blob, Google Drive, OneDrive** and more with a single React component and tiny server helpers.
Open-source, plug-and-play uploads to **S3, DigitalOcean Spaces, Backblaze B2, Azure Blob, Google Drive, OneDrive** and more with a single React component and tiny server helpers.

👉 Try out the live demo: https://useupup.com#demo
Try out the live demo: https://useupup.com#demo

You can even play with the code without any setup: https://stackblitz.com/edit/stackblitz-starters-flxnhixb

Expand All @@ -21,27 +21,27 @@ npm i upup-react-file-uploader # or yarn add / pnpm add / bun install
## Quick start (React / Next.js)

```tsx
// On your frontend (aka React, Next.JS Pages, etc).
// On your frontend (aka React, Next.js Pages, etc.)

'use client'
"use client";

import { UpupUploader, UpupProvider } from 'upup-react-file-uploader'
import 'upup-react-file-uploader/styles'
import { UpupUploader, UpupProvider } from "upup-react-file-uploader";
import "upup-react-file-uploader/styles";

export default function Uploader() {
return (
<UpupUploader
provider={UpupProvider.AWS}
tokenEndpoint="/api/upload-token"
/>
)
return (
<UpupUploader
provider={UpupProvider.AWS}
tokenEndpoint="/api/upload-token"
/>
);
}
```

> Note: Breaking change — the `locale` prop has been renamed to `localePack` in recent versions. Update examples and code to use `localePack={...}`. See [CHANGELOG.md#unreleased](CHANGELOG.md#unreleased) for migration details.
> Note: current localization examples use `localePack` for full locale packs and `translations` for per-key overrides. If you tested unpublished builds that used `locale`, update those examples to `localePack`. See [CHANGELOG.md#unreleased](CHANGELOG.md#unreleased) for the current 2.x release notes.

```tsx
// On your backend (aka, NextJS APIs, Express.JS server, NestJS, etc.)
// On your backend (aka Next.js APIs, Express.js, NestJS, etc.)

import { s3GeneratePresignedUrl } from "upup-react-file-uploader/server";

Expand Down Expand Up @@ -82,16 +82,16 @@ export async function POST(req: Request) {
}
```

☞ **Full documentation & code examples[https://useupup.com/documentation/docs/getting-started](https://useupup.com/documentation/docs/getting-started)**
Full documentation and code examples: [https://useupup.com/documentation/docs/getting-started](https://useupup.com/documentation/docs/getting-started)

## Contributing

We love PRs! Please see [CONTRIBUTING](CONTRIBUTING.md) and adhere to our [Code of Conduct](CODE_OF_CONDUCT.md).

## Battle-tested in production:
## Battle-tested in production

- 📚 uNotes AI doc uploads for past exams https://unotes.net
- 🎙 Shorty media uploads for transcripts https://aishorty.com
- uNotes - AI doc uploads for past exams -> https://unotes.net
- Shorty - media uploads for transcripts -> https://aishorty.com

## Security

Expand All @@ -105,4 +105,4 @@ Please join our Discord if you need any support: https://discord.com/invite/ny5W

[MIT](LICENSE)

Made with ❤️ by [Devino](https://devino.ca/)
Made by [Devino](https://devino.ca/)
Loading