Closes#5378
- Introduce `@uppy/image-generator`, a new plugin to generate images
based on a prompt via Transloadit
- until we have "golden templates" the idea is to just send
[steps](https://transloadit.com/docs/topics/templates/#overruling-templates-at-runtime)
- because we must send steps and since we must use signature
authentication for security, which is signed based on the params we
send, we can't reuse the `assemblyOptions` the consumers is already
passing to `@uppy/transloadit` (if they use that uploaders, not needed).
- Remove `SearchInput` (this component was trying to be too many things,
all with conditional boolean props, which is bad practise) in favor of
`useSearchForm` and reuse this hook in two new components `SearchView`
and `FilterInput`
- Reuse all the styles from `SearchProviderView`. This deviates from the
design in #5378. It felt too inconsistent to me to do another UI here
again. For the initial version, I think it's best to stay consistent and
then redesign with search providers taken into account too.
- Because the service is so slow, I went a bit further with the loading
state to show funny messages that rotate while loading mostly because
users will start thinking it is broken after 5 seconds while it fact we
are still loading. But open to ideas here.
This unfortunately means the integration for the consumer is not as lean
and pretty as you would hope. On the upside, it does give them complete
freedom.
```ts
.use(ImageGenerator, {
assemblyOptions: async (prompt) => {
const res = await fetch(`/assembly-options?prompt=${encodeURIComponent(prompt)}`)
return res.json()
}
})
```
on the consumer's server:
```ts
import crypto from 'node:crypto'
const utcDateString = (ms) => {
return new Date(ms)
.toISOString()
.replace(/-/g, '/')
.replace(/T/, ' ')
.replace(/\.\d+Z$/, '+00:00')
}
// expire 1 hour from now (this must be milliseconds)
const expires = utcDateString(Date.now() + 1 * 60 * 60 * 1000)
const authKey = 'YOUR_TRANSLOADIT_KEY'
const authSecret = 'YOUR_TRANSLOADIT_SECRET'
const params = JSON.stringify({
auth: {
key: authKey,
expires,
},
// can not contain any more steps, the only step must be /image/generate
steps: {
generated_image: { // can be named different
robot: '/image/generate',
result: true, // mandatory
aspect_ratio: '2:3', // up to them
model: 'flux-1.1-pro-ultra', // up to them
prompt, // mandatory
num_outputs: 2, // up to them
},
},
})
const signatureBytes = crypto.createHmac('sha384', authSecret).update(Buffer.from(params, 'utf-8'))
// The final signature needs the hash name in front, so
// the hashing algorithm can be updated in a backwards-compatible
// way when old algorithms become insecure.
const signature = `sha384:${signatureBytes.digest('hex')}`
// respond with { params, signature } JSON to the client
```
https://github.com/user-attachments/assets/9217e457-b38b-48ac-81f0-37a417309e98
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Adds AI image generation plugin using Transloadit, exports low-level
Transloadit APIs, and replaces SearchInput with new
FilterInput/SearchView + useSearchForm across provider views.
>
> - **New plugin: `@uppy/image-generator`**
> - UI plugin to generate images from a prompt via Transloadit
(`src/index.tsx`, styles, locale, build configs).
> - Integrated into dev Dashboard and included in `uppy` bundle and
global styles.
> - **Provider Views refactor**
> - Remove `SearchInput`; introduce `useSearchForm`, `SearchView`, and
`FilterInput` components.
> - Update `ProviderView`, `SearchProviderView`, and `Webdav` to use new
components; export them from `@uppy/provider-views`.
> - **Transloadit updates**
> - Export `Assembly`, `AssemblyError`, and `Client` from
`@uppy/transloadit`.
> - Minor internal change: normalize `assemblyOptions.fields`.
> - **Locales**
> - Add strings for image generation and minor additions (e.g.,
`chooseFiles`).
> - Ensure locales build depends on `@uppy/image-generator`.
> - **Build config**
> - Turborepo: add `uppy#build:css` and hook `image-generator` into
locales build.
> - **Changesets**
> - `@uppy/image-generator` major; `@uppy/transloadit` minor;
`@uppy/locales` and `uppy` minor; `@uppy/provider-views` and
`@uppy/webdav` patch.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4b1b729069. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---------
Co-authored-by: Prakash <qxprakash@gmail.com>
Probably best reviewed commit by commit.
I also split UppyFile into two intefaces distinguished by the `isRemote`
boolean:
- LocalUppyFile
- RemoteUppyFile
Also:
- Removed the TagFile type
- Don't re-upload completed files - fixes#5930
- Clean up stored files on `complete` event *only* if *all* files
succeeded (no failed files). this allows the user to retry failed files
if the browser & upload get interrupted - fixes#5927, closes#5955
- Only set `isGhost` for non-successful files. it doesn't make sense for
successfully uploaded files to be ghosted because they're already done.
#5930fixes#6013
---------
Co-authored-by: Prakash <qxprakash@gmail.com>
This pull request removes the `@uppy/status-bar` plugin and integrates
it directly into the `@uppy/dashboard` plugin.
### Breakdown of the merge
- The `StatusBar` class was refactored from a `UIPlugin` into a Preact
Class component.
- The `locale` strings from status-bar were merged into dashboard's
locale file.
- The Dashboard plugin now integrates the `StatusBar` component
directly, controlling its visibility and passing down all props ( i.e.
options that were specific to StatusBar (like showProgressDetails).
- The standalone StatusBar wrappers for React , Vue , svelte , Angular
were removed.
- every reference to the @uppy/status-bar package from the monorepo
(including in package.json and tsconfig.json files).
- fixed failing tests and removed redundant tests.
---------
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
- Deduplicate Vite versions, always use 7.x (except for sveltekit, which
does not allow 7 yet)
- Add missing dev deps
- Fix react-native requested deps versions
- Fix companion @types/node
- Fix "engines" in root package.json
No more yarn warnings 🎉
- Isolate CSS bundling per package
- Fix _all_ sass deprecation warnings
- Remove global scripts
- Run CSS building in parallel .
Is it repetitive? Yes a bit. But it's mono repo best practice and once
we introduce turbo each css build step can be individually cached. That
means when you edit scss in one package, only that needs to be rebuild,
not the TS of that package nor any other CSS. This PR lays the
groundwork for that.
* initial poc
* improvements
- split into two plugins
- implement photos picker
- auto login
- save access token in local storage
- document
- handle photos/files picked and send to companion
- add new hook useStore for making it easier to use localStorage data in react
- add new hook useUppyState for making it easier to use uppy state from react
- add new hook useUppyPluginState for making it easier to plugin state from react
- fix css error
* implement picker in companion
* type todo
* fix ts error
which occurs in dev when js has been built before build:ts gets called
* reuse docs
* imrpve type safety
* simplify async wrapper
* improve doc
* fix lint
* fix build error
* check if token is valid
* fix broken logging code
* pull logic out from react component
* remove docs
* improve auth ui
* fix bug
* remove unused useUppyState
* try to fix build error
* `/dev/Dashboard.js` - add all restrictions for the development environment
* `AddFiles.tsx` - turn `accept` into a string
* everywhere - make `accept` a string across uppy
* `<Dashboard/>`, `drag-drop`, `drop-target` - switch from `setTimeout()` to `css { pointer-events: none }`
* <DragDrop/> - remove leftover `return`
* http://localhost:5173 - remove padding-right in { inline: true } mode
Because it makes working with drops confusing, dropping behaviour thinks uppy spans 100% of the page
* `<DragDrop/>` - remove `{ pointer-events: none }`
`<DragDrop/> flickers in Chrome when we DO have `{ pointer-events: none }`, because it doesn't have any child elements.
* Editor.tsx - clean up post typescriptofication
* dev - finally add favicons to avoid errors in the console
* ImageEditor.tsx - reinsert filename after image editor
* add test endpoint for dynamic oauth creds
this allows us to test it on uppy.io (we can enable it for one provider like google drive for example)
* add to env.example
* Make logo fit on the right of the table on laptop screens+
* Move table
* Update README.md
Co-authored-by: Antoine du Hamel <antoine@transloadit.com>
* No need to make logo smaller on all packages after all
* Accidental change
---------
Co-authored-by: Antoine du Hamel <antoine@transloadit.com>
* show how many files are added when loading
remake of https://github.com/transloadit/uppy/pull/4388
* add french (cherry pick)
* implement concurrent file listing
* refactor / fix lint
* refactor/reduce duplication
* pull out totals validation
don't do it for every file added, as it's very slow
instead do the check at the end when all files are added.
this allows us to easily work with 10k+ files
fixes#4389
* Update packages/@uppy/core/src/Uppy.js
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
* make restricter.validate validate everything
instead make more specific methods for sub-validation
also rename validateTotals to validateAggregateRestrictions
* improve errors and user feedback
- handle errors centrally so that we can limit the amount of toasts (informers) sent to the users (prevent flooding hundreds/thousands of them)
- introduce FileRestrictionError which is a restriction error for a specific file
- introduce isUserFacing field for RestrictionError
* fix performance issue reintroduced
* improvements
- show "%{count} additional restrictions were not fulfilled" for any restriction errors more than 4
- refactor/rename methods
- improve ghost logic/comments
* improve performance when uploading
- introduce new event "upload-start" that can contain multiple files
- make a new patchFilesState method to allow updating more files
- unify "upload-start" logic in all plugins (send it before files start uploading)
- defer slicing buffer until we need the data
- refactor to reuse code
* fix e2e build issue
* try to upgrade cypress
maybe it fixes the error
* Revert "fix e2e build issue"
This reverts commit ff3e580c0f.
* upgrade parcel
* move mutation logic to end
* remove FileRestrictionError
merge it with RestrictionError
* fix silly bug
looks like the e2e tests are doing its job 👏
---------
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
* fix race condtion when adding files
don't call addFolder from listAllFiles
because that would call addFile before all folders were loaded
also remove unused selectedFolders state
* fix also the case of adding multiple folders
* fix todo: remove SharedHandler
* remove loaderWrapper
* fix logic
* fix the last race condition
* fix broken duplicate file check
* fix logic
* prettiyfy loop
* add user feedback
so they know that something is happening
* run corepack yarn run build:locale-pack
* Revert "run corepack yarn run build:locale-pack"
This reverts commit 85548ce2fc.
* Revert "add user feedback"
This reverts commit 4060019c35.
* use async generator instead of p-map
* re-fix race-condition
* remove providerFileToId
as suggested by @arturi
* use addFiles instead of addFile
* rename function
* use provider-supplied file ID
instead of generating an ID, for providers that we whitelsit
this allows adding the same time many times (with a different path)
* call core directly
* improve dev dashboard
* disable experimental getAsFileSystemHandle
it seems to be causing problems when dropping folders with subfolders in newest chrome
e.g a folder with 50 files and a subfolder which in turn has another 50 files
also refactor and document the code more
* Update packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
* mov eto utils
---------
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
