also ignore shortcuts to folders
and simplify
closes#6089
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
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>
## High Level View
<img width="3367" height="1576" alt="Global Search (1)"
src="https://github.com/user-attachments/assets/134e8658-5cbd-4816-87a1-3bd42603089d"
/>
- Search View replicated , through minimal components `<GlobalSearchView
/>` and `<SearchResultItem />`
- Both components take only the minimal state needed to render the
search view no dependency on PartialTree. search response from companion
server is directly passed to GlobalSearchView for file state.
- `#buildPath` creates missing parent nodes in partialTree (if any) and
opens the folder in the normal way using a minimal wrapper over
openFolder function.
- Both interactions : "checking a file/folder" and "opening a folder"
use the same function `#buildPath` to build the path, then use the
already existing `openFolder` and `toggleCheckBox`.
- Max search results: 1000. Pagination removed for simplicity (can be
added later).
- From a UI/UX standpoint, all functionality works as expected.
- The only limitation is occasional inconsistent partial checked states
when the tree isn’t fully built — unavoidable since percolateUp and
percolateDown require the complete partialTree to sync state correctly.
This issue isn’t critical; even in other cases, we already mark folders
"checked" whereas they may be empty if not yet fetched.
- I figured out it's better to just derive the checkedState from
PartialTree , and then pass it to `GlobalSearchView` rather than keep it
separate and then worrying about checked state syncs across two views
for UI to look right.
- IMO this is the most simplest approach I could come up with. without
sacrificing any user functionality and it carefully reuses all the util
code.
---------
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
Adds a stability warning comment to the top of all `src/style.scss`
files in the following Uppy packages to inform consumers that the source
code and variables are not part of the stable API:
- @uppy/audio
- @uppy/core
- @uppy/dashboard
- @uppy/drag-drop
- @uppy/drop-target
- @uppy/image-editor
- @uppy/provider-views
- @uppy/screen-capture
- @uppy/status-bar
- @uppy/url
- @uppy/webcam
The comment added is:
```scss
// NOTE TO CONSUMERS: The code and variables in these source files are not considered stable and can change at any time, even in minor and patch releases!
```
This warning helps clarify that while the compiled CSS output and public
APIs remain stable, the internal SCSS source files, variables, and
implementation details should not be relied upon by consumers as they
may change without notice in any release.
The changes are minimal and surgical - exactly one line added to the top
of each file with no other modifications to existing code.
<!-- START COPILOT CODING AGENT SUFFIX -->
*This pull request was created as a result of the following prompt from
Copilot chat.*
> Add the following comment at the very top of each src/style.scss file
in the following Uppy packages: @uppy/audio, @uppy/core,
@uppy/dashboard, @uppy/drag-drop, @uppy/drop-target, @uppy/image-editor,
@uppy/provider-views, @uppy/screen-capture, @uppy/status-bar, @uppy/url,
@uppy/webcam.
>
> Comment to add:
> // NOTE TO CONSUMERS: The code and variables in these source files are
not considered stable and can change at any time, even in minor and
patch releases!
>
> Ensure the comment is the first line in each file, above any existing
code or imports.
<!-- START COPILOT CODING AGENT TIPS -->
---
✨ Let Copilot coding agent [set things up for
you](https://github.com/transloadit/uppy/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot)
— coding agent works faster and does higher quality work when set up for
your repo.
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mifi <402547+mifi@users.noreply.github.com>
Co-authored-by: Prakash <qxprakash@gmail.com>
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
We drag it in unneccesarily in the bundle and it can cause JSX clashes
in React apps with `"jsx": "preserve"` in their `tsconfig.json`
(https://github.com/preactjs/preact/issues/4908)
- Remove `@types/react` from companion (unused)
- Fix tsconfig's for @uppy/utils (build was fine, but editor diagnostics
weren't)
- cleanup `@uppy/utils ` removed unused / redundant modules .
- migrated modules and tests from `.js` to `.ts`
- removed all the nested export paths
- updated `@uppy/utils` import paths for all packages
- `@uppy/angular` is still failing while running`yarn build` , I'm
looking into it.
---------
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
- added export maps to all the @uppy packages .
- imports remain unaffected except for peerDep packages in `@uppy/react`
`@uppy/svelte` and `@uppy/vue3`.
- export maps added for index files , css , and package.json.
- Added side effects for all the packages.
---------
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
- 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
* ProviderView.tsx - fix onedrive breadcrumbs
* providers - correct ch-unch-indeterminate states
* providers - made .breadcrumbs derived from .partialTree
* everywhere - { files, folders, isChecked } => .partialTree
GoogleDrive
- travelling down into folders works
- checking a file works
- breadcrumbs DONT work
* GoogleDrive - made breadcrumbs work
* .getFolder() - remove the `name` argument
* <Breadcrumbs/> - refactors "/"
* Instagram - made files get fetched onScroll
* clearSelection() - recover the functionality
* GoogleDrive - recover custom `.toggleCheckbox()` functionality
* providers - recover `.isDisabled` functionality
* <SearchProviderView/> - made Unsplash use .partialTree
* Facebook - change `.files, .folders` => `.partialTree`
* everywhere - we don't need to ! `partialTreeFile.data` anymore
* <ProviderView/> - implement folder caching
* <View/> - enable shift-clicking
* everywhere - get rid of unnecessary `.getNextFolder()`
* everywhere - fixing types
* <ProviderView/> - rename `requestPath` to `folderId`
* all providers - get rid of `.onFirstRender()`
* provider views - get rid of `.onFirstRender()`
* <ProviderView/> - make the root folder cacheable too
* TEMP - setup for working with FOLDERS + LAZY_LOADING
* <ProviderView/> - get rid of `.#listFilesAndFolders`
* <ProviderView/> - make `this.nextPagePath` per-folder
* everywhere - more refined types
* types - reintroduce `StatusInPartialTree`
* <SearchProviderView/> - made Unsplash work with the new structure
* <ProviderView/> - preemptive cleaning of `.absDirPath` and `.relDirPath`
* <ProviderView/> - give `.nextPagePath` a rigorous type
* <ProviderView/> - make `.nextPagePath` & `.cached` a composite key
* <ListItem/> - remove unnecessary indirection level
* css - factor out `.statusClassName`
* everywhere - refactor `.validateRestrictions()`
* nOfSelectedFiles - make "Selected (n)" as smart as possible
* <ProviderViews/> - prevent shift-clicking from highlighting file names
* `.validateRestrictions()` - make it accept a `CompanionFile` instead of `PartialTree`'s file
* `.getFolder()` - simplify code
* everywhere - account for `restrictions` in `.partialTree`
* `PartialTreeUtils.ts` - factor out `getPartialTreeAfterTogglingCheckboxes()`
* `PartialTreeUtils.ts` - factor out `clickOnFolder()`
* `PartialTreeUtils.ts` - factor out `getPartialTreeAfterScroll()`
* `PartialTreeUtils.ts` - rename methods
* `.donePicking()` - implement using recursion
* `.donePicking()` - integrate with `<ProviderView/>`
* `donePicking()` - show notifications after addition
* `#list()` - get rid of unnecessary indirection
* ProviderView.tsx - add `signal` everywhere, reduce try/catch indents everywhere
* `handleError()` - make error handling uniform
* `state.isSearchVisible` - remove, it's just not used anywhere
* state - reuse default state
* state - reset state on close panel (like we discussed in the uppy call)
* methods - remove unnecessary indirection in state setting
* `<CloseWrapper/>` - remove CloseWrappers, this is unnecessary indirection now too
* `this.requestClientId` - remove, again - this was unnecessary indirection
* `getTagFile()` - factor out into a separate file
* `recordShiftKeyPress()` - fix chaotic shift-clicking in Grid providers, remove endless prop drilling while we're at it
* `getNOfSelectedFiles.ts`, `filterItems.ts` - factor out, this removes props drilling
* <Browser/> - pass `displayedPartialTree` right away (because Search&NormalProvider have wildly different logics!)
* `searchTerm`, `filterInput` - we only need one of these of course!
* <SearchProvider/> - fix the issue where `afterToggleCheckbox()` thinks we should always filter by `searchString`
* <SearchProvider/> - remove `this.nextPageQuery`
Also: fix the issue where <SearchProvider/> upon searching for "ocean" and then "pajama" would just be adding pajama pictures after the ocean ones
* <Browser/> - remove unnecessary prop indirection
Typescript didn't actually know some of these props aren't used (removed those now)! It only discovers unused props upon normal props passing, like we do now.
* <SearchFilterInput/> - make the form controlled, hugely simplifies everything
* `filterItems.ts` - move to <ProviderView/>, because it's only used there
* /utils/PartialTreeUtils.ts - put every util in a separate file
* `shouldHandleScroll.ts` - factor out into a util
This brings all references to `this.isHandlingScroll` into a single place, and makes `shouldHandleScroll()` a self-contained simple function
* this.state - make sure state is reset 1. on cancel 2. on close
* `this.xxx` - never leave `this.xxx` variables undefined
* `this.username` - should be in `this.state`
Also - when there is no username, stop showing the little dot
* `SearchProviderPluginState` type - simplify this type, never leave state vars undefined
* <Header/> - remove completely unnecessary indirection, remove unused props
* Facebook.tsx - more sane `viewOptions` code
* providers - properly type `opts`
* `this.isShiftKeyPressed` - move this variable into <Browser/>
* `this.handleError()` - move to /utils
* `this.isHandlingScroll` - move to child classes
* `this.registerRequestClient()` - move to child classes
* `this.lastCheckbox` - move to child classes
* `this.setLoading()` - move to child classes
* `this.validateRestrictions()` - move to utils
* types - fully simplify provider types, remove `View.ts` parent class
* index.d.ts - we're not using `OnFirstRenderer` anymore
* <ProviderView/>, <SearchProviderView/> - more precise typing for options
* package.json - remove nanoid
* GoogleDrive - make shift-clicking work
* everywhere - fix types across uppy
* `afterToggleCheckbox.ts` - less redundant args, pass `ourItem.id` instead of `ourItem`
* tests - create `afterToggleCheckbox()` tests
* `getClickedRange.ts` - decouple `getClickedRange()` from `afterToggleCheckbox()`
* tests - wrote tests for `afterToggleCheckbox.ts`
* tests - wrote tests for `afterClickOnFolder.ts`
* everywhere - finally rename `getFolder` => `openFolder`
* tests - wrote tests for `afterScrollFolder.ts`
* getPaths.ts - make `absDirPath`, `relDirPath` work like in docs & add tests for that
* injectPaths.ts - improve performance
* getTagFile.ts - handle path injection all in one place
* getTagFile.ts - refactor
Just makes it easier to read the structure of TagFile
* fill.ts - `provider.list(currentPath, { signal })` => `apiList`
(remove the dependency on provider, just pass a callback)
* tests - wrote tests for `fill.ts`
* tests - wrote tests for `getNOfSelectedFiles.ts`
* everywhere - change `JSON.stringify()` => `clone()`
* `PartialTreeUtils.ts` - more consistent function naming + alphabetical order in tests
* `donePicking()` - superseded a notification to i18n one
* GoogleDrive - make the shared drive checkable
* `Item.tsx` - standardize names; remove unnecessary question marks from props
* ProviderView.tsx - clicking "Cancel" should make all files "unchecked"
* everywhere - move `document.getSelection()?.removeAllRanges()` to <Browser/> to avoid repetition
* everywhere - standardize names and types of passed props
* <Browser/> - only leave "list of files" to the browser
Moves stuff closer to where it's used, prevents props drilling
* TEMP - easier pageSize for alex to play with
When it's set to 5 pages you have to reduce the browser window to make it scrollable
* everywhere - only handle individual-file restrictions
* everywhere - add aggregate restrictions on top
* SearchProvider, NormalProvider - unite the way we addFiles()
Same notifications, same code, same everything
* `getTagFile.ts` - pass fewer arguments
* `addFiles.ts` - move conversion to tagFiles into `addFiles()`
* `uppy.validateRestrictions()` - remove legacy method
* `uppy.validateAggregateRestrictions()` - make aggregate restricter report aggregate error
* <FooterActions/> css - make aggregate errors look nice
* `PartialTreeUtils/index.test.ts` - accommodate tests to the latest changes
* tests - make all uppy tests work
* prettiness - run `yarn format`
* prettiness - run `yarn lint:fix`
* package.json - add `vitest` as a dev dependency
* eslint - fixing 1
eslint - fixing 2
eslint - fixing 3
* <SearchFilterInput/> - add default props as per eslint
* <SearchFilterInput/> - rename to <SearchInput/>
* eslint - fixing 4 (clone.ts)
* Uppy.ts - rewrite `partialTree` docs
* eslint - fixing 5
* eslint - fixing 6
* `getBreadcrumbs.ts` - factor out
* tests - fixing 7
* everywhere - remove `.toReversed()`, because it's not yet supported in all browsers
* dev/Dashboard.js - restore to pristine version
* prettiness - run `yarn format`
* fixing 8 (`yarn run build:ts`)
* fixing 9 (run `corepack yarn`)
* prettier - undo indentation harm done by prettier
* `getBreadcrumbs()` - add tests, and rewrite to avoid using `.toReversed()`
Clarification: `.toReversed()` is no supported by all browsers
* `<SearchInput/>` - make it work for eslint
* everywhere - remove `eslint-disable react/require-default-props`
* <GridItem/>, <ListItem/> - refactor to avoid prop drilling
* <ListItem/> - disable checkboxes for GoogleDrive team drives
See #5232
* merge (fixing up some lines from the previous merge)
* merge (fixing up some lines from the previous merge)
* everywhere - remove TEMP development values
* `this.validateSingleFile()` - switch to `.restrictionError`
* `afterToggleCheckbox.ts` - refactor, add comments
* `afterToggleCheckbox.ts` - refactor to use ids instead of whole objects
* `afterToggleCheckbox.ts` - try to satisfy prettier
* fixing 10 (try to satisfy `npx webpack`)
* fixing 11 (try to satisfy `npx webpack`)
* Antoine: use Math.min & Math.max in `getClickedRange()`
Co-authored-by: Antoine du Hamel <antoine@transloadit.com>
* fixing 12 (run `yarn run format`)
* `clone.ts` - rename to `shallowClone.ts`
* Antoine: in `package.json`, move `devDependencies` up
* Antoine: rename `getNOfSelectedFiles()` to `getNumberOfSelectedFiles()`
* `getNumberOfSelectedFiles()` - better comments
* Antoine: remove `<form/>` tag
* Antoine: change `{}` to `Object.create(null)`, write tests
* Antoine: `<SearchInput/>` - return dynamic <form/> element
* `<SearchInput/>` - return `buttonCSSClassName`
* `GoogleDrive.tsx` - make team drive checkboxes visible
* merge (more)
* Mifi: update packages/@uppy/provider-views/src/ProviderView/ProviderView.tsx
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
* merge (more changes)
* `Facebook.tsx`, `GooglePhotos.tsx` - render in 'grid' style on per-folder basis
* `<GridItem/>` - use the `.thumbnail` whenever possible (improves image quality, adds video icons)
* `prettier` - ensure `PartialTree` is always strongly indented in tests
---------
Co-authored-by: Antoine du Hamel <antoine@transloadit.com>
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
