Edit Image
{/* biome-ignore lint/a11y/useAltText: alt is provided by getImageProps() */}
![]()
With grid
+
+ )
+}
+
+export default ImageEditor
diff --git a/examples/sveltekit/src/components/ImageEditor.svelte b/examples/sveltekit/src/components/ImageEditor.svelte
new file mode 100644
index 000000000..6d9bfef55
--- /dev/null
+++ b/examples/sveltekit/src/components/ImageEditor.svelte
@@ -0,0 +1,117 @@
+
+
+
+
+
+ Edit Image
+ +
+ {/* biome-ignore lint/a11y/useAltText: alt is provided by getImageProps() */}
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sveltekit/src/routes/+page.svelte b/examples/sveltekit/src/routes/+page.svelte
index a134ca9ed..c9832a059 100644
--- a/examples/sveltekit/src/routes/+page.svelte
+++ b/examples/sveltekit/src/routes/+page.svelte
@@ -1,5 +1,6 @@
@@ -59,18 +75,21 @@ function closeModal() {
{#if modalPlugin === 'screen-capture'}
+
+
+ Edit Image
+ +
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+With list
With grid
With list
With grid
+
+
+
+
diff --git a/packages/@uppy/components/package.json b/packages/@uppy/components/package.json
index 54754202a..13e4226f7 100644
--- a/packages/@uppy/components/package.json
+++ b/packages/@uppy/components/package.json
@@ -30,13 +30,14 @@
],
"scripts": {
"build": "tsc --build tsconfig.build.json",
- "build:css": "tailwindcss -m -i ./src/input.css -o ./dist/styles.css",
+ "build:css": "tailwindcss -m -i ./src/input.css -o ./dist/styles.css && postcss ./src/image-editor.css -u cssnano -o ./dist/image-editor.css",
"migrate": "node migrate.mjs",
"typecheck": "tsc --build"
},
"exports": {
".": "./lib/index.js",
"./css/style.css": "./dist/styles.css",
+ "./css/image-editor.css": "./dist/image-editor.css",
"./package.json": "./package.json"
},
"dependencies": {
@@ -48,6 +49,9 @@
"devDependencies": {
"@tailwindcss/cli": "^4.0.6",
"@uppy/core": "workspace:^",
+ "cssnano": "^7.0.7",
+ "postcss": "^8.5.6",
+ "postcss-cli": "^11.0.1",
"tailwindcss": "^4.0.6",
"typescript": "^5.8.3"
},
diff --git a/packages/@uppy/components/src/hooks/image-editor.ts b/packages/@uppy/components/src/hooks/image-editor.ts
new file mode 100644
index 000000000..25d7da483
--- /dev/null
+++ b/packages/@uppy/components/src/hooks/image-editor.ts
@@ -0,0 +1,283 @@
+import type { Uppy, UppyEventMap, UppyFile } from '@uppy/core'
+import type ImageEditor from '@uppy/image-editor'
+import type { AspectRatio } from '@uppy/image-editor'
+import { Subscribers } from './utils.js'
+
+export type { AspectRatio } from '@uppy/image-editor'
+
+export type ImageEditorState = {
+ angle: number
+ isFlippedHorizontally: boolean
+ aspectRatio: AspectRatio
+}
+
+type ButtonProps = {
+ type: 'button'
+ onClick: () => void
+ disabled: boolean
+ 'aria-label': string
+}
+
+type ButtonClickOptions = {
+ onClick?: () => void
+}
+
+type SliderProps
+
+
+ Edit Image
+ +
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+