Merge branch 'main' into ai-image-generator

Murderlon · Murderlon · commit ff7bc6a095b3 · 2025-10-02T15:32:29.000+02:00
* main: [ci] release (#5997) Use assembly_ssl_url for final status fetch (#5996) [ci] release (#5988) @uppy/svelte: fix props reactivity (#5991) Improve changeset again Improve a changeset fixup! Use workspace:* for all packages in packages/uppy Use workspace:* for all packages in packages/uppy Re-use types from the Transloadit node-sdk (#5992)
diff --git a/.changeset/swift-pens-flow.md b/.changeset/swift-pens-flow.md
diff --git a/BUNDLE-README.md b/BUNDLE-README.md
@@ -2,7 +2,7 @@
 
 Hi, thanks for trying out the bundled version of the Uppy File Uploader. You can
 use this from a CDN
-(`<script src="https://releases.transloadit.com/uppy/v5.1.2/uppy.min.js"></script>`)
+(`<script src="https://releases.transloadit.com/uppy/v5.1.4/uppy.min.js"></script>`)
 or bundle it with your webapp.
 
 Note that the recommended way to use Uppy is to install it with yarn/npm and use
diff --git a/README.md b/README.md
@@ -103,7 +103,7 @@ npm install @uppy/core @uppy/dashboard @uppy/tus
 ```
 
 Add CSS
-[uppy.min.css](https://releases.transloadit.com/uppy/v5.1.2/uppy.min.css),
+[uppy.min.css](https://releases.transloadit.com/uppy/v5.1.4/uppy.min.css),
 either to your HTML page’s `<head>` or include in JS, if your bundler of choice
 supports it.
 
@@ -117,7 +117,7 @@ CDN. In that case `Uppy` will attach itself to the global `window.Uppy` object.
 ```html
 <!-- 1. Add CSS to `<head>` -->
 <link
-  href="https://releases.transloadit.com/uppy/v5.1.2/uppy.min.css"
+  href="https://releases.transloadit.com/uppy/v5.1.4/uppy.min.css"
   rel="stylesheet"
 />
 
@@ -128,7 +128,7 @@ CDN. In that case `Uppy` will attach itself to the global `window.Uppy` object.
     Uppy,
     Dashboard,
     Tus,
-  } from 'https://releases.transloadit.com/uppy/v5.1.2/uppy.min.mjs'
+  } from 'https://releases.transloadit.com/uppy/v5.1.4/uppy.min.mjs'
 
   const uppy = new Uppy()
   uppy.use(Dashboard, { target: '#files-drag-drop' })
diff --git a/examples/sveltekit/src/components/test/props-reactivity.svelte b/examples/sveltekit/src/components/test/props-reactivity.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/svelte/dashboard'
+import StatusBar from '@uppy/svelte/status-bar'
+
+import '@uppy/core/css/style.css'
+import '@uppy/dashboard/css/style.css'
+import '@uppy/status-bar/css/style.css'
+
+const uppy = new Uppy()
+uppy.addFile(new File(['hello world'], 'hello.txt'))
+let disabled = false
+let hideUploadButton = false
+</script>
+
+<main class="p-5 max-w-xl mx-auto">
+  <button onclick={() => (disabled = !disabled)}>Toggle dashboard</button>
+  <Dashboard props={{disabled: disabled}} uppy={uppy} />
+  <button onclick={() => (hideUploadButton = !hideUploadButton)}>Toggle statusbar</button>
+  <div id="statusbar-container">
+    <StatusBar props={{ hideUploadButton }} uppy={uppy} />
+  </div>
+</main>
diff --git 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/components/CHANGELOG.md b/packages/@uppy/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @uppy/components
 
+## 1.0.3
+
+### Patch Changes
+
+- 34639ba: add imageThumbnail prop to FilesList/FilesGrid
+
 ## 1.0.2
 
 ### Patch Changes
diff --git a/packages/@uppy/components/package.json b/packages/@uppy/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@uppy/components",
   "description": "Headless Uppy components, made in Preact",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
diff --git a/packages/@uppy/svelte/CHANGELOG.md b/packages/@uppy/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @uppy/svelte
 
+## 5.0.2
+
+### Patch Changes
+
+- da754b7: Fix props reactivity. Now when the value of a prop you pass to a component changes, it is actually picked up.
+- Updated dependencies [34639ba]
+  - @uppy/components@1.0.3
+
 ## 5.0.1
 
 ### Patch Changes
diff --git a/packages/@uppy/svelte/package.json b/packages/@uppy/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uppy/svelte",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Uppy plugin that helps integrate Uppy into your Svelte project.",
   "type": "module",
   "sideEffects": [
diff --git 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<M, B>;
-	uppy.setOptions(options);
+	plugin?.setOptions(options);
 }
 </script>
 
diff --git 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<M, B>;
-	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
@@ -35,7 +35,7 @@ $: {
 		...props,
 		target: container,
 	} satisfies StatusBarOptions;
-	uppy.setOptions(options);
+	plugin?.setOptions(options);
 }
 </script>
 
diff --git a/packages/@uppy/transloadit/CHANGELOG.md b/packages/@uppy/transloadit/CHANGELOG.md
@@ -1,5 +1,24 @@
 # @uppy/transloadit
 
+## 5.1.1
+
+### Patch Changes
+
+- bc2d0ed: Ensure final assembly status fetch uses `assembly_ssl_url` so Transloadit requests stay on HTTPS.
+
+## 5.1.0
+
+### Minor Changes
+
+- 6f76412: Use the `transloadit` Node.js SDK's exported Assembly types instead of our inaccurate, hand-rolled ones.
+
+  **Warning**
+
+  The names of our type exports here are unchanged, but they do pack slightly different types. Overall you'll find they are both more complete, but also more loose. Runtime wise there should be no breaking changes, but it could mean you may need a couple of extra guards to make TypeScript happy.
+
+  A cool benefit from the new types tho, is that Robot parameters will now autocomplete for you.
+  More information on these types, and our approach rolling them out, can be found here https://transloadit.com/blog/2025/09/nodejs-sdk-v4/#our-approach-to-type-retrofitting
+
 ## 5.0.1
 
 ### Patch Changes
diff --git a/packages/@uppy/transloadit/package.json b/packages/@uppy/transloadit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@uppy/transloadit",
   "description": "The Transloadit plugin can be used to upload files to Transloadit for all kinds of processing, such as transcoding video, resizing images, zipping/unzipping, and more",
-  "version": "5.0.1",
+  "version": "5.1.1",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -55,6 +55,7 @@
     "@uppy/core": "workspace:^",
     "jsdom": "^26.1.0",
     "msw": "^2.10.4",
+    "transloadit": "^4.0.2",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
     "whatwg-fetch": "^3.6.2"
diff --git a/packages/@uppy/transloadit/src/Assembly.ts b/packages/@uppy/transloadit/src/Assembly.ts
@@ -6,7 +6,12 @@ import {
   NetworkError,
 } from '@uppy/utils'
 import Emitter from 'component-emitter'
-import type { AssemblyResponse } from './index.js'
+import {
+  type AssemblyFile,
+  type AssemblyResponse,
+  type AssemblyResult,
+  getAssemblyUrlSsl,
+} from './index.js'
 
 const ASSEMBLY_UPLOADING = 'ASSEMBLY_UPLOADING'
 const ASSEMBLY_EXECUTING = 'ASSEMBLY_EXECUTING'
@@ -24,7 +29,11 @@ const statusOrder = [ASSEMBLY_UPLOADING, ASSEMBLY_EXECUTING, ASSEMBLY_COMPLETED]
  * …so that we can emit the 'executing' event even if the execution step was so
  * fast that we missed it.
  */
-function isStatus(status: string, test: string) {
+function isStatus(status: unknown, test: string) {
+  if (typeof status !== 'string') {
+    return false
+  }
+
   return statusOrder.indexOf(status) >= statusOrder.indexOf(test)
 }
 
@@ -101,16 +110,22 @@ class TransloaditAssembly extends Emitter {
     })
 
     this.#sse.addEventListener('assembly_upload_finished', (e) => {
-      const file = JSON.parse(e.data)
+      const file = JSON.parse(e.data) as AssemblyFile
+      this.status.uploads ??= []
       this.status.uploads.push(file)
       this.emit('upload', file)
     })
 
     this.#sse.addEventListener('assembly_result_finished', (e) => {
-      const [stepName, result] = JSON.parse(e.data)
-      // biome-ignore lint/suspicious/noAssignInExpressions: ...
-      ;(this.status.results[stepName] ??= []).push(result)
-      this.emit('result', stepName, result)
+      const [stepName, rawResult] = JSON.parse(e.data) as [
+        string,
+        AssemblyResult,
+      ]
+
+      this.status.results ??= {}
+      this.status.results[stepName] ??= []
+      this.status.results[stepName].push(rawResult)
+      this.emit('result', stepName, rawResult)
     })
 
     this.#sse.addEventListener('assembly_execution_progress', (e) => {
@@ -165,9 +180,9 @@ class TransloaditAssembly extends Emitter {
 
     try {
       this.#previousFetchStatusStillPending = true
-      const response = await this.#fetchWithNetworkError(
-        this.status.assembly_ssl_url,
-      )
+      const statusUrl = getAssemblyUrlSsl(this.status)
+
+      const response = await this.#fetchWithNetworkError(statusUrl)
       this.#previousFetchStatusStillPending = false
 
       if (this.closed) return
@@ -244,29 +259,38 @@ class TransloaditAssembly extends Emitter {
     }
 
     // Only emit if the upload is new (not in prev.uploads).
-    Object.keys(next.uploads)
-      .filter((upload) => !has(prev.uploads, upload))
-      .forEach((upload) => {
-        // @ts-ignore either the types are wrong or the tests are wrong.
-        // types think next.uploads is an array, but the tests pass an object.
-        this.emit('upload', next.uploads[upload])
-      })
+    const prevUploads = prev.uploads
+    const nextUploads = next.uploads
+    if (nextUploads != null && prevUploads != null) {
+      Object.keys(nextUploads)
+        .filter((upload) => !has(prevUploads, upload))
+        .forEach((upload) => {
+          // This is a bit confusing. Not sure why Object.keys was chosen here, because nextUploads is an Array. Object.keys returns strings for array keys ("0", "1", etc.). Typescript expects arrays to be indexed with a number, not a string nextUploads[0], even though JavaScript is fine with it, so we need to type assert here:
+          this.emit('upload', nextUploads[upload as unknown as number])
+        })
+    }
 
     if (nowExecuting) {
       this.emit('metadata')
     }
 
     // Find new results.
-    Object.keys(next.results).forEach((stepName) => {
-      const nextResults = next.results[stepName]
-      const prevResults = prev.results[stepName]
-
-      nextResults
-        .filter((n) => !prevResults || !prevResults.some((p) => p.id === n.id))
-        .forEach((result) => {
-          this.emit('result', stepName, result)
-        })
-    })
+    const nextResultsMap = next.results
+    const prevResultsMap = prev.results
+    if (nextResultsMap != null && prevResultsMap != null) {
+      Object.keys(nextResultsMap).forEach((stepName) => {
+        const nextResults = nextResultsMap[stepName] ?? []
+        const prevResults = prevResultsMap[stepName] ?? []
+
+        nextResults
+          .filter(
+            (n) => !prevResults || !prevResults.some((p) => p.id === n.id),
+          )
+          .forEach((result) => {
+            this.emit('result', stepName, result)
+          })
+      })
+    }
 
     if (
       isStatus(nextStatus, ASSEMBLY_COMPLETED) &&
diff --git a/packages/@uppy/transloadit/src/AssemblyWatcher.ts b/packages/@uppy/transloadit/src/AssemblyWatcher.ts
@@ -49,38 +49,41 @@ class TransloaditAssemblyWatcher<
   }
 
   #onAssemblyComplete = (assembly: AssemblyResponse) => {
-    if (!this.#watching(assembly.assembly_id)) {
+    const assemblyId = assembly.assembly_id
+    if (assemblyId == null || !this.#watching(assemblyId)) {
       return
     }
 
     this.#uppy.log(
-      `[Transloadit] AssemblyWatcher: Got Assembly finish ${assembly.assembly_id}`,
+      `[Transloadit] AssemblyWatcher: Got Assembly finish ${assemblyId}`,
     )
 
-    this.emit('assembly-complete', assembly.assembly_id)
+    this.emit('assembly-complete', assemblyId)
 
     this.#checkAllComplete()
   }
 
   #onAssemblyCancel = (assembly: AssemblyResponse) => {
-    if (!this.#watching(assembly.assembly_id)) {
+    const assemblyId = assembly.assembly_id
+    if (assemblyId == null || !this.#watching(assemblyId)) {
       return
     }
 
     this.#checkAllComplete()
   }
 
   #onAssemblyError = (assembly: AssemblyResponse, error: Error) => {
-    if (!this.#watching(assembly.assembly_id)) {
+    const assemblyId = assembly.assembly_id
+    if (assemblyId == null || !this.#watching(assemblyId)) {
       return
     }
 
     this.#uppy.log(
-      `[Transloadit] AssemblyWatcher: Got Assembly error ${assembly.assembly_id}`,
+      `[Transloadit] AssemblyWatcher: Got Assembly error ${assemblyId}`,
     )
     this.#uppy.log(error)
 
-    this.emit('assembly-error', assembly.assembly_id, error)
+    this.emit('assembly-error', assemblyId, error)
 
     this.#checkAllComplete()
   }
@@ -90,7 +93,8 @@ class TransloaditAssemblyWatcher<
     fileID: string,
     error: Error,
   ) => {
-    if (!this.#watching(assembly.assembly_id)) {
+    const assemblyId = assembly.assembly_id
+    if (assemblyId == null || !this.#watching(assemblyId)) {
       return
     }
 
diff --git a/packages/@uppy/transloadit/src/Client.ts b/packages/@uppy/transloadit/src/Client.ts
diff --git a/packages/@uppy/transloadit/src/index.ts b/packages/@uppy/transloadit/src/index.ts
diff --git a/packages/uppy/CHANGELOG.md b/packages/uppy/CHANGELOG.md
diff --git a/packages/uppy/package.json b/packages/uppy/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@uppy/components",`
`3`	`3`	`"description": "Headless Uppy components, made in Preact",`
`4`		`- "version": "1.0.2",`
	`4`	`+ "version": "1.0.3",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"type": "module",`
`7`	`7`	`"sideEffects": [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@uppy/svelte",`
`3`		`- "version": "5.0.1",`
	`3`	`+ "version": "5.0.2",`
`4`	`4`	`"description": "Uppy plugin that helps integrate Uppy into your Svelte project.",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"sideEffects": [`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ $: {`
`40`	`40`	`...props,`
`41`	`41`	`target: container,`
`42`	`42`	`} satisfies DashboardOptions<M, B>;`
`43`		`- uppy.setOptions(options);`
	`43`	`+ plugin?.setOptions(options);`
`44`	`44`	`}`
`45`	`45`	`</script>`
`46`	`46`