fixes#5946
Root Cause :
`createDropzone` used a single global `id` for the file input
(`'uppy-dropzone-file-input'`) Clicking any `<Dropzone />` did
`document.getElementById(<global-id>).click()`, which always targeted
the first input in the DOM, so files were added to the first Uppy
instance.
9bac4c8398/packages/%40uppy/components/src/hooks/dropzone.ts (L73-L77)
**Solutions :**
Simplest solution would have been to just make the input id unique per
Uppy instance using `ctx.uppy.getID()`, and click that specific input.
```typescript
const fileInputId = 'uppy-dropzone-file-input-' + ctx.uppy.getID()
```
**Caveats**:
If users don’t pass a custom id to `new Uppy()`, all instances default
to uppy, so ids still collide across instances.
Multiple Dropzones under one instance still share the same id.
Switched to a ref-based approach so clicks trigger the input directly,
without relying on `document.getElementById` lookups. It still falls
back to a DOM click for backward compatibility.
**StackBlitz Link :**
https://stackblitz.com/github/qxprakash/uppy/tree/debug_dropzone/examples/react?file=package.json&embed=1&view=editor&showSidebar=1&hideTerminal=1
**Update: Went for the ID based solution upon discussion with the team
as it's simpler.**
StackBlitz examples took **146+ seconds** to start due to heavy dev
dependencies
### Optimizations
- Eliminate heavy dev deps like `playwright (~200MB)` `@vitest/browser`
`vitest`
- Aggressive install flags: `--prefer-offline --reporter=silent
--ignore-scripts --no-optional`
- use pnpm
- Results **React example: 146s → ~25s (83% faster)**
- Add .stackblitzrc configuration file for StackBlitz environment setup
for
- Add prepare-stackblitz.js script to replace `workspace:*` dependencies
with "latest"
- Configure StackBlitz to run preparation script before installing
dependencies
- Change CSS import paths in examples from `@uppy/react/css/style.css`
to `@uppy/react/dist/styles.css` temporarily (will need to revert after
we release 5.0)
- 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>
- 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 🎉
- Remove `e2e` folder entirely
- Remove all hacky resolutions and yarn patches
- Remove `@types/jasmine`, `js2ts` (convert a JS file to TS), and
`vue-template-compiler` from `private/`
- Remove e2e CI job
- Add browsers tests for vue, svelte, and react headless components and
hooks.
- Add new (browser) tests for transloadit, aws-s3, and dashboard.
- Remove final useless scripts from `package.json`, use direct
references in CI.
- Fix Dropzone component accessibility discovered during testing
- Clean up github workflows (move linters.yml into ci.yml, update
e2e.yml)
**Why Vitest Browser Mode?**
We could have used playwright but vitest browser mode uses it under the
hood and we get the use the vitest we know a love. No two entirely
different setups, no different assertions to relearn, write e2e tests as
if you're writing unit tests. Easy, fast, beautiful.
https://vitest.dev/guide/browser/
**Has every single e2e test been rewritten?**
No there were quite a few tests that have a lot overlap with existing or
newly added tests. There were also some tests that were so heavily
mocked inside and out you start to wonder what the value still is. Open
to discuss which tests still need to be added.
