diff --git a/.changeset/fast-points-leave.md b/.changeset/fast-points-leave.md
new file mode 100644
index 000000000..8ba4fa38f
--- /dev/null
+++ b/.changeset/fast-points-leave.md
@@ -0,0 +1,5 @@
+---
+"@uppy/svelte": patch
+---
+
+Fix props reactivity. Now when the value of a prop you pass to a component changes, it is actually picked up.
diff --git a/examples/sveltekit/src/components/test/props-reactivity.svelte b/examples/sveltekit/src/components/test/props-reactivity.svelte
new file mode 100644
index 000000000..ea4847214
--- /dev/null
+++ b/examples/sveltekit/src/components/test/props-reactivity.svelte
@@ -0,0 +1,23 @@
+
+
+
+ (disabled = !disabled)}>Toggle dashboard
+
+ (hideUploadButton = !hideUploadButton)}>Toggle statusbar
+
+
+
+
diff --git a/examples/sveltekit/test/index.test.ts b/examples/sveltekit/test/index.test.ts
index 077064907..3c33fd04b 100644
--- a/examples/sveltekit/test/index.test.ts
+++ b/examples/sveltekit/test/index.test.ts
@@ -1,6 +1,7 @@
import { userEvent } from '@vitest/browser/context'
import { describe, expect, test } from 'vitest'
import { render } from 'vitest-browser-svelte'
+import PropsReactivity from '../src/components/test/props-reactivity.svelte'
import App from '../src/routes/+page.svelte'
const createMockFile = (name: string, type: string, size: number = 1024) => {
@@ -124,3 +125,27 @@ describe('RemoteSource Component', () => {
await expect.element(loginButton).toBeInTheDocument()
})
})
+
+test('Dashboard reacts to prop changes', async () => {
+ const screen = render(PropsReactivity)
+ const toggleButton = screen.getByText('Toggle dashboard')
+ const dashboard = screen.container.querySelector('.uppy-Dashboard')
+
+ expect(dashboard).toBeTruthy()
+ expect(dashboard?.ariaDisabled).toEqual('false')
+ await userEvent.click(toggleButton)
+ expect(dashboard?.ariaDisabled).toEqual('true')
+})
+
+test('StatusBar reacts to prop changes', async () => {
+ const screen = render(PropsReactivity)
+ const toggleButton = screen.getByText('Toggle statusbar')
+
+ expect(
+ screen.container.querySelector('#statusbar-container .uppy-c-btn-primary'),
+ ).toBeVisible()
+ await userEvent.click(toggleButton)
+ expect(
+ screen.container.querySelector('#statusbar-container .uppy-c-btn-primary'),
+ ).toEqual(null)
+})
diff --git a/packages/@uppy/svelte/src/lib/components/Dashboard.svelte b/packages/@uppy/svelte/src/lib/components/Dashboard.svelte
index e9d61f98f..7b501b29b 100644
--- a/packages/@uppy/svelte/src/lib/components/Dashboard.svelte
+++ b/packages/@uppy/svelte/src/lib/components/Dashboard.svelte
@@ -40,7 +40,7 @@ $: {
...props,
target: container,
} satisfies DashboardOptions;
- uppy.setOptions(options);
+ plugin?.setOptions(options);
}
diff --git a/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte b/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte
index 475d119b0..e3ae3d4ad 100644
--- a/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte
+++ b/packages/@uppy/svelte/src/lib/components/DashboardModal.svelte
@@ -42,7 +42,7 @@ $: {
...props,
target: container,
} satisfies DashboardOptions;
- uppy.setOptions(options);
+ plugin?.setOptions(options);
}
$: {
if (open && !lastOpen) {
diff --git a/packages/@uppy/svelte/src/lib/components/StatusBar.svelte b/packages/@uppy/svelte/src/lib/components/StatusBar.svelte
index e47870e55..714e297e4 100644
--- a/packages/@uppy/svelte/src/lib/components/StatusBar.svelte
+++ b/packages/@uppy/svelte/src/lib/components/StatusBar.svelte
@@ -35,7 +35,7 @@ $: {
...props,
target: container,
} satisfies StatusBarOptions;
- uppy.setOptions(options);
+ plugin?.setOptions(options);
}