mirror of
https://github.com/transloadit/uppy.git
synced 2026-01-23 10:25:33 +00:00
uppy 5.0: remove stale plugins (#5834)
This PR removes `@uppy/store-redux` , `@uppy/redux-dev-tools` , `@uppy/progress-bar` , `@uppy/drag-drop` , `@uppy/file-input` , `@uppy/aws-s3-multipart` - **Source Removal** Removed source Dirs of packages, including all source code, styles, documentation, and build configurations. - **Bundle & Exports** Removed related exports from `packages/uppy/src/bundle.ts` and `index.ts`. Cleaned up dependencies from `uppy/package.json`. - **Framework Cleanup** Removed components and exports from: - `@uppy/react` - `@uppy/vue` - `@uppy/svelte` - `@uppy/angular` - **Dependency Cleanup** Removed references across all `package.json`, `peerDependencies`, `tsconfig.*.json`, and `turbo.json` files. - **Example Updates** - Updated Angular example and `private/dev/DragDrop.js` - Removed deprecated plugin usage - Cleaned example dependencies - **Style Cleanup** Removed CSS imports from `packages/uppy/src/style.scss` and `examples/angular/src/styles.css`. Fixed TypeScript project references. - **Migration Guide** Updated `.github/MIGRATION.md`
This commit is contained in:
Prakash
GitHub
parent
0b954a7cd6
commit
cb9673bc1e
113 changed files with 108 additions and 3365 deletions
90
.github/MIGRATION.md
vendored
90
.github/MIGRATION.md
vendored
|
|
@ -20,4 +20,92 @@ This is a temporary file that can be updated with any pending migration changes,
|
|||
|
||||
### @uppy/informer merged into @uppy/dashboard
|
||||
|
||||
The `@uppy/informer` plugin has been merged into `@uppy/dashboard` to reduce bundle size and improve maintainability. The `@uppy/informer` package is no longer maintained as a standalone package and should be removed from your dependencies.
|
||||
The `@uppy/informer` plugin has been merged into `@uppy/dashboard` to reduce bundle size and improve maintainability. The `@uppy/informer` package is no longer maintained as a standalone package and should be removed from your dependencies.
|
||||
|
||||
### @uppy/progress-bar removed
|
||||
|
||||
The `@uppy/progress-bar` plugin has been removed as it provided minimal functionality that can be easily replicated with Uppy's built-in state management.
|
||||
|
||||
**Before:**
|
||||
```js
|
||||
import ProgressBar from '@uppy/progress-bar'
|
||||
|
||||
uppy.use(ProgressBar, { target: '#progress' })
|
||||
```
|
||||
|
||||
**After:**
|
||||
```js
|
||||
// Custom progress bar using Uppy state
|
||||
uppy.on('upload-progress', (file, progress) => {
|
||||
const progressElement = document.getElementById('progress')
|
||||
progressElement.style.width = `${progress.percentage}%`
|
||||
progressElement.textContent = `${progress.percentage}%`
|
||||
})
|
||||
|
||||
// Or listen to total progress
|
||||
uppy.on('progress', (progress) => {
|
||||
const progressElement = document.getElementById('progress')
|
||||
progressElement.style.width = `${progress}%`
|
||||
progressElement.textContent = `${progress}%`
|
||||
})
|
||||
```
|
||||
|
||||
**Migration steps:**
|
||||
1. Remove `@uppy/progress-bar` from your dependencies
|
||||
2. Create a custom progress indicator using Uppy's `progress` or `upload-progress` events
|
||||
3. Style your progress bar according to your design system.
|
||||
|
||||
### @uppy/drag-drop and @uppy/file-input removed
|
||||
|
||||
The `@uppy/drag-drop` and `@uppy/file-input` plugins have been removed in favor of more flexible, headless hooks. These hooks provide the same functionality but with maximum customization freedom.
|
||||
|
||||
**Before:**
|
||||
```js
|
||||
import DragDrop from '@uppy/drag-drop'
|
||||
import FileInput from '@uppy/file-input'
|
||||
|
||||
uppy
|
||||
.use(DragDrop, { target: '#drag-drop' })
|
||||
.use(FileInput, { target: '#file-input' })
|
||||
```
|
||||
|
||||
**After:**
|
||||
```js
|
||||
// React example
|
||||
import { useDropzone, useFileInput } from '@uppy/react'
|
||||
|
||||
function MyUploader() {
|
||||
const { getRootProps, getInputProps, isDragging } = useDropzone()
|
||||
const { getButtonProps, getInputProps: getFileInputProps } = useFileInput()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input {...getInputProps()} className="hidden" />
|
||||
<div {...getRootProps()} className={`dropzone ${isDragging ? 'dragging' : ''}`}>
|
||||
<input {...getFileInputProps()} className="hidden" />
|
||||
<button {...getButtonProps()}>Choose files</button>
|
||||
<p>or drag and drop files here</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Alternative: Use Dashboard**
|
||||
```js
|
||||
// If you want a complete UI solution, use Dashboard instead
|
||||
import Dashboard from '@uppy/dashboard'
|
||||
|
||||
uppy.use(Dashboard, {
|
||||
target: '#uppy-dashboard',
|
||||
inline: true,
|
||||
})
|
||||
```
|
||||
|
||||
**Migration steps:**
|
||||
1. Remove `@uppy/drag-drop` and `@uppy/file-input` from your dependencies
|
||||
2. Choose one of these approaches:
|
||||
- Use the framework-specific hooks (`@uppy/react`, `@uppy/vue`, `@uppy/svelte`) for maximum flexibility
|
||||
- Use `@uppy/dashboard` for a complete, ready-to-use UI solution
|
||||
3. Replace your existing components with custom implementations using the hooks or Dashboard
|
||||
4. See [examples/](../examples/) for complete implementation examples
|
||||
|
|
@ -194,8 +194,6 @@ server-side component, is needed for a plugin to work.
|
|||
image previews (included by default with `Dashboard`)
|
||||
- [`Form`](https://uppy.io/docs/form/) — collects metadata from `<form>` right
|
||||
before an Uppy upload, then optionally appends results back to the form
|
||||
- [`Redux`](https://uppy.io/docs/guides/custom-stores#reduxstore) — for your
|
||||
emerging [time traveling](https://github.com/gaearon/redux-devtools) needs
|
||||
|
||||
## React
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
/** biome-ignore-all lint/nursery/useUniqueElementIds: it's fine */
|
||||
import Uppy from '@uppy/core'
|
||||
import { Dashboard, DashboardModal, DragDrop } from '@uppy/react'
|
||||
import { Dashboard, DashboardModal } from '@uppy/react'
|
||||
import RemoteSources from '@uppy/remote-sources'
|
||||
import ThumbnailGenerator from '@uppy/thumbnail-generator'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import '@uppy/core/dist/style.css'
|
||||
import '@uppy/dashboard/dist/style.css'
|
||||
import '@uppy/drag-drop/dist/style.css'
|
||||
|
||||
const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, {
|
||||
companionUrl: 'http://companion.uppy.io',
|
||||
sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
|
||||
})
|
||||
const uppyModal = new Uppy({ id: 'modal' })
|
||||
const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
|
||||
|
||||
export default function App() {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
|
@ -22,8 +20,7 @@ export default function App() {
|
|||
// We are using Parcel in an odd way and I don't think there is an easy fix.
|
||||
// const files = useUppyState(uppyDashboard, (state) => state.files)
|
||||
|
||||
// drag-drop has no visual output so we test it via the uppy instance
|
||||
window.uppy = uppyDragDrop
|
||||
// window.uppy = uppyDashboard // (if you want to expose for tests)
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -41,7 +38,6 @@ export default function App() {
|
|||
|
||||
<Dashboard id="dashboard" uppy={uppyDashboard} />
|
||||
<DashboardModal id="modal" open={open} uppy={uppyModal} />
|
||||
<DragDrop id="drag-drop" uppy={uppyDragDrop} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
describe('Dashboard with @uppy/aws-s3-multipart', () => {
|
||||
describe('Dashboard with @uppy/aws-s3 (multipart)', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/dashboard-aws-multipart')
|
||||
cy.get('.uppy-Dashboard-input:first').as('file-input')
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ describe('@uppy/react', () => {
|
|||
cy.visit('/react')
|
||||
cy.get('#dashboard .uppy-Dashboard-input:first').as('dashboard-input')
|
||||
cy.get('#modal .uppy-Dashboard-input:first').as('modal-input')
|
||||
cy.get('#drag-drop .uppy-DragDrop-input').as('dragdrop-input')
|
||||
})
|
||||
|
||||
it('should render Dashboard in React and show thumbnails', () => {
|
||||
|
|
@ -48,20 +47,4 @@ describe('@uppy/react', () => {
|
|||
.should('have.length', 2)
|
||||
.each((element) => expect(element).attr('src').to.include('blob:'))
|
||||
})
|
||||
|
||||
it('should render Drag & Drop in React and create a thumbail with @uppy/thumbnail-generator', () => {
|
||||
const spy = cy.spy()
|
||||
|
||||
// @ts-ignore fix me
|
||||
cy.window().then(({ uppy }) => uppy.on('thumbnail:generated', spy))
|
||||
cy.get('@dragdrop-input').selectFile(
|
||||
[
|
||||
'cypress/fixtures/images/cat.jpg',
|
||||
'cypress/fixtures/images/traffic.jpg',
|
||||
],
|
||||
{ force: true },
|
||||
)
|
||||
// not sure how I can accurately wait for the thumbnail
|
||||
cy.wait(1000).then(() => expect(spy).to.be.called)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,16 +12,13 @@
|
|||
"dependencies": {
|
||||
"@uppy/audio": "workspace:^",
|
||||
"@uppy/aws-s3": "workspace:^",
|
||||
"@uppy/aws-s3-multipart": "workspace:^",
|
||||
"@uppy/box": "workspace:^",
|
||||
"@uppy/companion-client": "workspace:^",
|
||||
"@uppy/core": "workspace:^",
|
||||
"@uppy/dashboard": "workspace:^",
|
||||
"@uppy/drag-drop": "workspace:^",
|
||||
"@uppy/drop-target": "workspace:^",
|
||||
"@uppy/dropbox": "workspace:^",
|
||||
"@uppy/facebook": "workspace:^",
|
||||
"@uppy/file-input": "workspace:^",
|
||||
"@uppy/form": "workspace:^",
|
||||
"@uppy/golden-retriever": "workspace:^",
|
||||
"@uppy/google-drive": "workspace:^",
|
||||
|
|
@ -30,12 +27,10 @@
|
|||
"@uppy/image-editor": "workspace:^",
|
||||
"@uppy/instagram": "workspace:^",
|
||||
"@uppy/onedrive": "workspace:^",
|
||||
"@uppy/progress-bar": "workspace:^",
|
||||
"@uppy/provider-views": "workspace:^",
|
||||
"@uppy/screen-capture": "workspace:^",
|
||||
"@uppy/status-bar": "workspace:^",
|
||||
"@uppy/store-default": "workspace:^",
|
||||
"@uppy/store-redux": "workspace:^",
|
||||
"@uppy/thumbnail-generator": "workspace:^",
|
||||
"@uppy/transloadit": "workspace:^",
|
||||
"@uppy/tus": "workspace:^",
|
||||
|
|
|
|||
|
|
@ -19,9 +19,7 @@
|
|||
"@angular/router": "^18.0.0",
|
||||
"@uppy/angular": "workspace:*",
|
||||
"@uppy/core": "workspace:*",
|
||||
"@uppy/drag-drop": "workspace:*",
|
||||
"@uppy/google-drive": "workspace:*",
|
||||
"@uppy/progress-bar": "workspace:*",
|
||||
"@uppy/tus": "workspace:*",
|
||||
"@uppy/webcam": "workspace:*",
|
||||
"rxjs": "~7.8.0",
|
||||
|
|
|
|||
|
|
@ -36,9 +36,6 @@ import Webcam from '@uppy/webcam'
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<h2>Drag Drop Area</h2>
|
||||
<uppy-drag-drop [uppy]="uppy" [props]="{}"></uppy-drag-drop>
|
||||
|
||||
<h2>Progress Bar</h2>
|
||||
<uppy-progress-bar
|
||||
[uppy]="uppy"
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import { BrowserModule } from '@angular/platform-browser'
|
|||
import {
|
||||
UppyAngularDashboardModalModule,
|
||||
UppyAngularDashboardModule,
|
||||
UppyAngularDragDropModule,
|
||||
UppyAngularProgressBarModule,
|
||||
UppyAngularStatusBarModule,
|
||||
} from '@uppy/angular'
|
||||
import { AppComponent } from './app.component'
|
||||
|
|
@ -17,8 +15,6 @@ import { AppComponent } from './app.component'
|
|||
UppyAngularDashboardModule,
|
||||
UppyAngularStatusBarModule,
|
||||
UppyAngularDashboardModalModule,
|
||||
UppyAngularDragDropModule,
|
||||
UppyAngularProgressBarModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
@import "@uppy/core/dist/style.css";
|
||||
@import "@uppy/dashboard/dist/style.css";
|
||||
@import "@uppy/drag-drop/dist/style.css";
|
||||
@import "@uppy/progress-bar/dist/style.css";
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
# Redux
|
||||
|
||||
This example uses Uppy with a Redux store. The same Redux store is also used for
|
||||
other parts of the application, namely the counter example. Each action is
|
||||
logged to the console using
|
||||
[redux-logger](https://github.com/theaqua/redux-logger).
|
||||
|
||||
This example supports the
|
||||
[Redux Devtools extension](https://github.com/zalmoxisus/redux-devtools-extension),
|
||||
including time travel.
|
||||
|
||||
## Run it
|
||||
|
||||
To run this example, make sure you've correctly installed the **repository
|
||||
root**:
|
||||
|
||||
```sh
|
||||
corepack yarn install
|
||||
corepack yarn build
|
||||
```
|
||||
|
||||
That will also install the dependencies for this example.
|
||||
|
||||
Then, again in the **repository root**, start this example by doing:
|
||||
|
||||
```sh
|
||||
corepack yarn workspace @uppy-example/redux start
|
||||
```
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Uppy example: Redux</title>
|
||||
</head>
|
||||
<body>
|
||||
<main id="app">
|
||||
<h1>A counter</h1>
|
||||
<div>
|
||||
<p>
|
||||
Clicked: <span id="value">0</span> times
|
||||
<button id="increment">+</button>
|
||||
<button id="decrement">-</button>
|
||||
<button id="incrementIfOdd">Increment if odd</button>
|
||||
<button id="incrementAsync">Increment async</button>
|
||||
</p>
|
||||
</div>
|
||||
<h1>An Uppy</h1>
|
||||
<div id="uppy"></div>
|
||||
</main>
|
||||
|
||||
<noscript>This app requires JavaScript.</noscript>
|
||||
<script src="./main.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import { configureStore } from '@reduxjs/toolkit'
|
||||
import Uppy from '@uppy/core'
|
||||
import Dashboard from '@uppy/dashboard'
|
||||
import ReduxStore, * as uppyReduxStore from '@uppy/store-redux'
|
||||
import Tus from '@uppy/tus'
|
||||
import { applyMiddleware, combineReducers, compose } from 'redux'
|
||||
import logger from 'redux-logger'
|
||||
|
||||
import '@uppy/core/dist/style.css'
|
||||
import '@uppy/dashboard/dist/style.css'
|
||||
|
||||
function counter(state = 0, action) {
|
||||
switch (action.type) {
|
||||
case 'INCREMENT':
|
||||
return state + 1
|
||||
case 'DECREMENT':
|
||||
return state - 1
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
const reducer = combineReducers({
|
||||
counter,
|
||||
// You don't have to use the `uppy` key. But if you don't,
|
||||
// you need to provide a custom `selector` to the `uppyReduxStore` call below.
|
||||
uppy: uppyReduxStore.reducer,
|
||||
})
|
||||
|
||||
let enhancer = applyMiddleware(uppyReduxStore.middleware(), logger)
|
||||
if (typeof __REDUX_DEVTOOLS_EXTENSION__ !== 'undefined') {
|
||||
enhancer = compose(enhancer, __REDUX_DEVTOOLS_EXTENSION__())
|
||||
}
|
||||
|
||||
const store = configureStore({
|
||||
reducer,
|
||||
enhancers: [enhancer],
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({
|
||||
serializableCheck: {
|
||||
ignoredActions: [uppyReduxStore.STATE_UPDATE],
|
||||
ignoreState: true,
|
||||
},
|
||||
}),
|
||||
})
|
||||
|
||||
// Counter example from https://github.com/reactjs/redux/blob/master/examples/counter-vanilla/index.html
|
||||
const valueEl = document.querySelector('#value')
|
||||
|
||||
function getCounter() {
|
||||
return store.getState().counter
|
||||
}
|
||||
function render() {
|
||||
valueEl.innerHTML = getCounter().toString()
|
||||
}
|
||||
render()
|
||||
store.subscribe(render)
|
||||
|
||||
document.querySelector('#increment').onclick = () => {
|
||||
store.dispatch({ type: 'INCREMENT' })
|
||||
}
|
||||
document.querySelector('#decrement').onclick = () => {
|
||||
store.dispatch({ type: 'DECREMENT' })
|
||||
}
|
||||
document.querySelector('#incrementIfOdd').onclick = () => {
|
||||
if (getCounter() % 2 !== 0) {
|
||||
store.dispatch({ type: 'INCREMENT' })
|
||||
}
|
||||
}
|
||||
document.querySelector('#incrementAsync').onclick = () => {
|
||||
setTimeout(() => store.dispatch({ type: 'INCREMENT' }), 1000)
|
||||
}
|
||||
|
||||
// Uppy using the same store
|
||||
const uppy = new Uppy({
|
||||
id: 'redux',
|
||||
store: new ReduxStore({ store }),
|
||||
// If we had placed our `reducer` elsewhere in Redux, eg. under an `uppy` key in the state for a profile page,
|
||||
// we'd do something like:
|
||||
//
|
||||
// store: new ReduxStore({
|
||||
// store: store,
|
||||
// id: 'avatar',
|
||||
// selector: state => state.pages.profile.uppy
|
||||
// }),
|
||||
debug: true,
|
||||
})
|
||||
uppy.use(Dashboard, {
|
||||
target: '#app',
|
||||
inline: true,
|
||||
width: 400,
|
||||
})
|
||||
uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"name": "example-redux",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.3",
|
||||
"@uppy/core": "workspace:*",
|
||||
"@uppy/dashboard": "workspace:*",
|
||||
"@uppy/store-redux": "workspace:*",
|
||||
"@uppy/tus": "workspace:*",
|
||||
"redux": "^4.2.1",
|
||||
"redux-logger": "^3.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.4.17"
|
||||
},
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "vite"
|
||||
}
|
||||
}
|
||||
|
|
@ -14,8 +14,6 @@
|
|||
"dependencies": {
|
||||
"@uppy/core": "workspace:*",
|
||||
"@uppy/dashboard": "workspace:*",
|
||||
"@uppy/drag-drop": "workspace:*",
|
||||
"@uppy/progress-bar": "workspace:*",
|
||||
"@uppy/screen-capture": "workspace:*",
|
||||
"@uppy/svelte": "workspace:*",
|
||||
"@uppy/tus": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import Uppy from '@uppy/core'
|
|||
import Dashboard from '@uppy/dashboard'
|
||||
import Form from '@uppy/form'
|
||||
import ImageEditor from '@uppy/image-editor'
|
||||
import ProgressBar from '@uppy/progress-bar'
|
||||
import RemoteSources from '@uppy/remote-sources'
|
||||
import Transloadit, { COMPANION_URL } from '@uppy/transloadit'
|
||||
import Webcam from '@uppy/webcam'
|
||||
|
|
@ -10,7 +9,6 @@ import Webcam from '@uppy/webcam'
|
|||
import '@uppy/core/dist/style.css'
|
||||
import '@uppy/dashboard/dist/style.css'
|
||||
import '@uppy/image-editor/dist/style.css'
|
||||
import '@uppy/progress-bar/dist/style.css'
|
||||
|
||||
const TRANSLOADIT_KEY = '35c1aed03f5011e982b6afe82599b6a0'
|
||||
// A trivial template that resizes images, just for example purposes.
|
||||
|
|
@ -182,15 +180,13 @@ const uppyWithoutUI = new Uppy({
|
|||
restrictions: {
|
||||
allowedFileTypes: ['.png'],
|
||||
},
|
||||
}).use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
})
|
||||
.use(Transloadit, {
|
||||
waitForEncoding: true,
|
||||
params: {
|
||||
auth: { key: TRANSLOADIT_KEY },
|
||||
template_id: TEMPLATE_ID,
|
||||
},
|
||||
})
|
||||
.use(ProgressBar, { target: '#upload-progress' })
|
||||
|
||||
window.doUpload = (event) => {
|
||||
const resultEl = document.querySelector('#upload-result')
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
"@uppy/drop-target": "workspace:*",
|
||||
"@uppy/form": "workspace:*",
|
||||
"@uppy/image-editor": "workspace:*",
|
||||
"@uppy/progress-bar": "workspace:*",
|
||||
"@uppy/remote-sources": "workspace:*",
|
||||
"@uppy/transloadit": "workspace:*",
|
||||
"@uppy/webcam": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@
|
|||
"dependencies": {
|
||||
"@uppy/core": "workspace:*",
|
||||
"@uppy/dashboard": "workspace:*",
|
||||
"@uppy/drag-drop": "workspace:*",
|
||||
"@uppy/progress-bar": "workspace:*",
|
||||
"@uppy/remote-sources": "workspace:*",
|
||||
"@uppy/screen-capture": "workspace:*",
|
||||
"@uppy/tus": "workspace:*",
|
||||
|
|
|
|||
30
migration.md
30
migration.md
|
|
@ -1,30 +0,0 @@
|
|||
### `@uppy/informer`
|
||||
|
||||
- **Breaking:** `@uppy/informer` is no longer available as a standalone plugin. The Informer functionality is now built into `@uppy/dashboard` by default.
|
||||
- **Migration:** Remove any separate `@uppy/informer` imports and `.use()` calls. Informer is automatically included when using Dashboard.
|
||||
- **Control:** Use the `disableInformer: true` option in Dashboard to hide informer notifications if needed.
|
||||
|
||||
**Before:**
|
||||
```js
|
||||
import Uppy from '@uppy/core'
|
||||
import Dashboard from '@uppy/dashboard'
|
||||
import Informer from '@uppy/informer'
|
||||
|
||||
const uppy = new Uppy()
|
||||
.use(Dashboard, { target: '#uppy' })
|
||||
.use(Informer, { target: '#uppy-informer' })
|
||||
```
|
||||
|
||||
**After:**
|
||||
```js
|
||||
import Uppy from '@uppy/core'
|
||||
import Dashboard from '@uppy/dashboard'
|
||||
|
||||
const uppy = new Uppy()
|
||||
.use(Dashboard, {
|
||||
target: '#uppy',
|
||||
// Informer is included by default
|
||||
// Use disableInformer: true to disable it
|
||||
})
|
||||
```
|
||||
|
||||
|
|
@ -29,8 +29,6 @@
|
|||
"@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"@uppy/core": "workspace:^",
|
||||
"@uppy/dashboard": "workspace:^",
|
||||
"@uppy/drag-drop": "workspace:^",
|
||||
"@uppy/progress-bar": "workspace:^",
|
||||
"@uppy/status-bar": "workspace:^",
|
||||
"@uppy/utils": "workspace:^"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
import { ChangeDetectionStrategy, Component } from "@angular/core";
|
||||
import { Uppy } from "@uppy/core";
|
||||
import type * as DragDrop from "@uppy/drag-drop";
|
||||
import type { Body, Meta } from "@uppy/utils/lib/UppyFile";
|
||||
|
||||
@Component({
|
||||
selector: "uppy-drag-drop-demo",
|
||||
template: ` <uppy-drag-drop [uppy]="uppy" [props]="props"></uppy-drag-drop> `,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class DragDropDemoComponent<M extends Meta, B extends Body> {
|
||||
uppy: Uppy<M, B> = new Uppy({ debug: true, autoProceed: true });
|
||||
props: DragDrop.DragDropOptions = {};
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { async, type ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
|
||||
import { DragDropComponent } from "./drag-drop.component";
|
||||
|
||||
describe("DragDropComponent", () => {
|
||||
let component: DragDropComponent;
|
||||
let fixture: ComponentFixture<DragDropComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [DragDropComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DragDropComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
Input,
|
||||
inject,
|
||||
type OnChanges,
|
||||
type OnDestroy,
|
||||
type SimpleChanges,
|
||||
} from "@angular/core";
|
||||
import { Uppy } from "@uppy/core";
|
||||
import type { DragDropOptions } from "@uppy/drag-drop";
|
||||
import DragDrop from "@uppy/drag-drop";
|
||||
import type { Body, Meta } from "@uppy/utils/lib/UppyFile";
|
||||
import { UppyAngularWrapper } from "../../utils/wrapper";
|
||||
|
||||
@Component({
|
||||
selector: "uppy-drag-drop",
|
||||
template: "",
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class DragDropComponent<M extends Meta, B extends Body>
|
||||
extends UppyAngularWrapper<M, B, DragDropOptions>
|
||||
implements OnDestroy, OnChanges
|
||||
{
|
||||
el = inject(ElementRef);
|
||||
|
||||
@Input() uppy: Uppy<M, B> = new Uppy();
|
||||
@Input() props: DragDropOptions = {};
|
||||
|
||||
/** Inserted by Angular inject() migration for backwards compatibility */
|
||||
constructor(...args: unknown[]);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.onMount(
|
||||
{ id: "angular:DragDrop", target: this.el.nativeElement },
|
||||
DragDrop,
|
||||
);
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
this.handleChanges(changes, DragDrop);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.uninstall();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { moduleMetadata } from "@storybook/angular";
|
||||
import { DragDropDemoComponent } from "./drag-drop-demo.component";
|
||||
|
||||
export default {
|
||||
title: "Drag Drop",
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
declarations: [DragDropDemoComponent],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
component: DragDropDemoComponent,
|
||||
});
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
inject,
|
||||
type OnInit,
|
||||
} from "@angular/core";
|
||||
import { Uppy } from "@uppy/core";
|
||||
import type { ProgressBarOptions } from "@uppy/progress-bar";
|
||||
import Tus from "@uppy/tus";
|
||||
import type { Body, Meta } from "@uppy/utils/lib/UppyFile";
|
||||
|
||||
@Component({
|
||||
selector: "uppy-progress-bar-demo",
|
||||
template: `
|
||||
<section class="example-one">
|
||||
<h5>autoProceed is on</h5>
|
||||
|
||||
<!-- Target DOM node #1 -->
|
||||
<uppy-drag-drop [uppy]="uppyOne"></uppy-drag-drop>
|
||||
|
||||
<!-- Progress bar #1 -->
|
||||
<uppy-progress-bar [uppy]="uppyOne" [props]="props"></uppy-progress-bar>
|
||||
|
||||
<!-- Uploaded files list #1 -->
|
||||
<div class="uploaded-files" *ngIf="fileListOne?.length">
|
||||
<h5>Uploaded files:</h5>
|
||||
<ol>
|
||||
<li *ngFor="let item of fileListOne">
|
||||
<a [href]="item.url" target="_blank"> {{ item.fileName }}</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="example-two">
|
||||
<h5>autoProceed is off</h5>
|
||||
|
||||
<!-- Target DOM node #1 -->
|
||||
<uppy-drag-drop [uppy]="uppyTwo"></uppy-drag-drop>
|
||||
|
||||
<!-- Progress bar #1 -->
|
||||
<uppy-progress-bar [uppy]="uppyTwo" [props]="props"></uppy-progress-bar>
|
||||
|
||||
<button (click)="upload()" class="upload-button">Upload</button>
|
||||
|
||||
<!-- Uploaded files list #2 -->
|
||||
<div class="uploaded-files" *ngIf="fileListTwo?.length">
|
||||
<h5>Uploaded files:</h5>
|
||||
<ol>
|
||||
<li *ngFor="let item of fileListTwo">
|
||||
<a [href]="item.url" target="_blank"> {{ item.fileName }}</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ProgressBarDemoComponent<M extends Meta, B extends Body>
|
||||
implements OnInit
|
||||
{
|
||||
private cdr = inject(ChangeDetectorRef);
|
||||
|
||||
uppyOne!: Uppy<M, B>;
|
||||
uppyTwo!: Uppy<M, B>;
|
||||
fileListOne: { url: string; fileName: string }[] = [];
|
||||
fileListTwo: { url: string; fileName: string }[] = [];
|
||||
props: ProgressBarOptions = {
|
||||
hideAfterFinish: false,
|
||||
};
|
||||
|
||||
upload(): void {
|
||||
this.uppyTwo.upload();
|
||||
}
|
||||
|
||||
/** Inserted by Angular inject() migration for backwards compatibility */
|
||||
constructor(...args: unknown[]);
|
||||
|
||||
constructor() {}
|
||||
|
||||
updateFileList =
|
||||
(target: string) =>
|
||||
(file, response): void => {
|
||||
this[target] = [
|
||||
...this[target],
|
||||
{ url: response.uploadURL, fileName: file.name },
|
||||
];
|
||||
this.cdr.markForCheck();
|
||||
};
|
||||
|
||||
ngOnInit(): void {
|
||||
this.uppyOne = new Uppy<M, B>({ debug: true, autoProceed: true })
|
||||
.use(Tus, { endpoint: "https://master.tus.io/files/" })
|
||||
.on("upload-success", this.updateFileList("fileListOne"));
|
||||
this.uppyTwo = new Uppy<M, B>({ debug: true, autoProceed: false })
|
||||
.use(Tus, { endpoint: "https://master.tus.io/files/" })
|
||||
.on("upload-success", this.updateFileList("fileListTwo"));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { async, type ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
|
||||
import { ProgressBarComponent } from "./progress-bar.component";
|
||||
|
||||
describe("ProgressBarComponent", () => {
|
||||
let component: ProgressBarComponent;
|
||||
let fixture: ComponentFixture<ProgressBarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ProgressBarComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProgressBarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it("should create", () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
Input,
|
||||
inject,
|
||||
type OnChanges,
|
||||
type OnDestroy,
|
||||
type SimpleChanges,
|
||||
} from "@angular/core";
|
||||
import { Uppy } from "@uppy/core";
|
||||
import type { ProgressBarOptions } from "@uppy/progress-bar";
|
||||
import ProgressBar from "@uppy/progress-bar";
|
||||
import type { Body, Meta } from "@uppy/utils/lib/UppyFile";
|
||||
import { UppyAngularWrapper } from "../../utils/wrapper";
|
||||
|
||||
@Component({
|
||||
selector: "uppy-progress-bar",
|
||||
template: "",
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ProgressBarComponent<M extends Meta, B extends Body>
|
||||
extends UppyAngularWrapper<M, B, ProgressBarOptions>
|
||||
implements OnDestroy, OnChanges
|
||||
{
|
||||
el = inject(ElementRef);
|
||||
|
||||
@Input() uppy: Uppy<M, B> = new Uppy();
|
||||
@Input() props: ProgressBarOptions = {};
|
||||
|
||||
/** Inserted by Angular inject() migration for backwards compatibility */
|
||||
constructor(...args: unknown[]);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.onMount(
|
||||
{ id: "angular:ProgressBar", target: this.el.nativeElement },
|
||||
ProgressBar,
|
||||
);
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
this.handleChanges(changes, ProgressBar);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.uninstall();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { CommonModule } from "@angular/common";
|
||||
import { moduleMetadata } from "@storybook/angular";
|
||||
import { ProgressBarDemoComponent } from "./progress-bar-demo.component";
|
||||
|
||||
export default {
|
||||
title: "Progress Bar",
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CommonModule],
|
||||
declarations: [ProgressBarDemoComponent],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
component: ProgressBarDemoComponent,
|
||||
});
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import type { ElementRef, SimpleChanges } from "@angular/core";
|
||||
import type { UIPlugin, UIPluginOptions, Uppy } from "@uppy/core";
|
||||
import type { DragDropOptions } from "@uppy/drag-drop";
|
||||
import type { ProgressBarOptions } from "@uppy/progress-bar";
|
||||
import type { StatusBarOptions } from "@uppy/status-bar";
|
||||
import type { Body, Meta } from "@uppy/utils/lib/UppyFile";
|
||||
|
||||
|
|
@ -11,7 +9,7 @@ export abstract class UppyAngularWrapper<
|
|||
Opts extends UIPluginOptions,
|
||||
PluginType extends UIPlugin<Opts, M, B> = UIPlugin<Opts, M, B>,
|
||||
> {
|
||||
abstract props: DragDropOptions | StatusBarOptions | ProgressBarOptions;
|
||||
abstract props: StatusBarOptions;
|
||||
abstract el: ElementRef;
|
||||
abstract uppy: Uppy<M, B>;
|
||||
private options: any;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,4 @@
|
|||
|
||||
export { DashboardComponent } from './lib/components/dashboard/dashboard.component'
|
||||
export { DashboardModalComponent } from './lib/components/dashboard-modal/dashboard-modal.component'
|
||||
export { DragDropComponent } from './lib/components/drag-drop/drag-drop.component'
|
||||
export { ProgressBarComponent } from './lib/components/progress-bar/progress-bar.component'
|
||||
export { StatusBarComponent } from './lib/components/status-bar/status-bar.component'
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
"dependsOn": [
|
||||
"@uppy/core#build",
|
||||
"@uppy/dashboard#build",
|
||||
"@uppy/drag-drop#build",
|
||||
"@uppy/progress-bar#build",
|
||||
"@uppy/status-bar#build",
|
||||
"@uppy/utils#build"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
# @uppy/aws-s3-multipart
|
||||
|
||||
## 4.0.0-beta.5
|
||||
|
||||
Released: 2024-05-03
|
||||
Included in: Uppy v4.0.0-beta.5
|
||||
|
||||
- @uppy/aws-s3-multipart: Format (Murderlon)
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Transloadit
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
# @uppy/aws-s3-multipart
|
||||
|
||||
This package is deprecated. Use
|
||||
[`@uppy/aws-s3`](https://npmjs.org/package/@uppy/aws-s3) instead.
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
{
|
||||
"name": "@uppy/aws-s3-multipart",
|
||||
"description": "Upload to Amazon S3 with Uppy and S3's Multipart upload strategy",
|
||||
"version": "4.0.0",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"type": "module",
|
||||
"keywords": [
|
||||
"file uploader",
|
||||
"aws s3",
|
||||
"amazon s3",
|
||||
"s3",
|
||||
"uppy",
|
||||
"uppy-plugin",
|
||||
"multipart"
|
||||
],
|
||||
"homepage": "https://uppy.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/transloadit/uppy/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/transloadit/uppy.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@uppy/aws-s3": "workspace:^"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@uppy/core": "workspace:^",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from '@uppy/aws-s3'
|
||||
export { default } from '@uppy/aws-s3'
|
||||
|
|
@ -1 +0,0 @@
|
|||
tsconfig.*
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
# @uppy/drag-drop
|
||||
|
||||
## 4.1.3
|
||||
|
||||
Released: 2025-05-18
|
||||
Included in: Uppy v4.16.0
|
||||
|
||||
- @uppy/audio,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/google-drive-picker,@uppy/google-drive,@uppy/google-photos-picker,@uppy/image-editor,@uppy/instagram,@uppy/onedrive,@uppy/remote-sources,@uppy/screen-capture,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/webcam,@uppy/webdav,@uppy/zoom: ts: make locale strings optional (Merlijn Vos / #5728)
|
||||
|
||||
## 4.1.0
|
||||
|
||||
Released: 2025-01-06
|
||||
Included in: Uppy v4.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive-picker,@uppy/google-drive,@uppy/google-photos-picker,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/webdav,@uppy/xhr-upload,@uppy/zoom: Remove "paths" from all tsconfig's (Merlijn Vos / #5572)
|
||||
|
||||
## 4.0.5
|
||||
|
||||
Released: 2024-12-05
|
||||
Included in: Uppy v4.8.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: cleanup tsconfig (Mikael Finstad / #5520)
|
||||
|
||||
## 4.0.4
|
||||
|
||||
Released: 2024-10-31
|
||||
Included in: Uppy v4.6.0
|
||||
|
||||
- @uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react-native,@uppy/react,@uppy/redux-dev-tools,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Fix links (Anthony Veaudry / #5492)
|
||||
|
||||
## 4.0.3
|
||||
|
||||
Released: 2024-10-15
|
||||
Included in: Uppy v4.5.0
|
||||
|
||||
- @uppy/dashboard,@uppy/drag-drop,@uppy/file-input: `.handleInputChange()` - use `.currentTarget`; clear the input using `''` (Evgenia Karunus / #5381)
|
||||
|
||||
## 4.0.2
|
||||
|
||||
Released: 2024-08-15
|
||||
Included in: Uppy v4.1.1
|
||||
|
||||
- @uppy/dashboard,@uppy/drag-drop,@uppy/file-input: Transform the `accept` prop into a string everywhere (Evgenia Karunus / #5380)
|
||||
|
||||
## 4.0.1
|
||||
|
||||
Released: 2024-07-15
|
||||
Included in: Uppy v4.0.1
|
||||
|
||||
- @uppy/dashboard,@uppy/drag-drop,@uppy/drop-target: `<Dashboard/>`, `<DragDrop/>`, `drop-target` - new anti-flickering solution (Evgenia Karunus / #5326)
|
||||
|
||||
## 4.0.0-beta.1
|
||||
|
||||
Released: 2024-03-28
|
||||
Included in: Uppy v4.0.0-beta.1
|
||||
|
||||
- @uppy/drag-drop: refine type of private variables (Antoine du Hamel / #5026)
|
||||
- @uppy/drag-drop,@uppy/progress-bar: add missing exports (Antoine du Hamel / #5009)
|
||||
- @uppy/drag-drop: refactor to TypeScript (Antoine du Hamel / #4983)
|
||||
|
||||
## 3.1.1
|
||||
|
||||
Released: 2024-07-02
|
||||
Included in: Uppy v3.27.2
|
||||
|
||||
- docs,@uppy/drag-drop: `uppy.io/docs` - fix typos/broken links (Evgenia Karunus / #5296)
|
||||
|
||||
## 3.1.0
|
||||
|
||||
Released: 2024-03-27
|
||||
Included in: Uppy v3.24.0
|
||||
|
||||
- @uppy/drag-drop: refine type of private variables (Antoine du Hamel / #5026)
|
||||
- @uppy/drag-drop,@uppy/progress-bar: add missing exports (Antoine du Hamel / #5009)
|
||||
- @uppy/drag-drop: refactor to TypeScript (Antoine du Hamel / #4983)
|
||||
|
||||
## 3.0.1
|
||||
|
||||
Released: 2022-09-25
|
||||
Included in: Uppy v3.1.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/companion,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/redux-dev-tools,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: add missing entries to changelog for individual packages (Antoine du Hamel / #4092)
|
||||
|
||||
## 3.0.0
|
||||
|
||||
Released: 2022-08-22
|
||||
Included in: Uppy v3.0.0
|
||||
|
||||
- Switch to ESM
|
||||
|
||||
## 2.1.1
|
||||
|
||||
Released: 2022-05-30
|
||||
Included in: Uppy v2.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/onedrive,@uppy/progress-bar,@uppy/react,@uppy/redux-dev-tools,@uppy/robodog,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: doc: update bundler recommendation (Antoine du Hamel / #3763)
|
||||
|
||||
## 2.0.7
|
||||
|
||||
Released: 2022-04-27
|
||||
Included in: Uppy v2.9.4
|
||||
|
||||
- @uppy/drag-drop: refactor to ESM (Antoine du Hamel / #3647)
|
||||
|
||||
## 2.0.6
|
||||
|
||||
Released: 2022-01-10
|
||||
Included in: Uppy v2.4.0
|
||||
|
||||
- @uppy/drag-drop: fix `undefined is not a function` TypeError (Antoine du Hamel / #3397)
|
||||
|
||||
## 2.0.5
|
||||
|
||||
Released: 2021-12-07
|
||||
Included in: Uppy v2.3.0
|
||||
|
||||
- @uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/google-drive,@uppy/image-editor,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/screen-capture,@uppy/status-bar,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/url,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Refactor locale scripts & generate types and docs (Merlijn Vos / #3276)
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Transloadit
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
# @uppy/drag-drop
|
||||
|
||||
<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right">
|
||||
|
||||
[](https://www.npmjs.com/package/@uppy/drag-drop)
|
||||
|
||||
|
||||
|
||||
|
||||
Droppable zone UI for Uppy. Drag and drop files into it to upload.
|
||||
|
||||
**[Read the docs](https://uppy.io/docs/drag-drop/)**
|
||||
|
||||
Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
|
||||
a versatile file encoding service.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
import Uppy from '@uppy/core'
|
||||
import DragDrop from '@uppy/drag-drop'
|
||||
|
||||
const uppy = new Uppy()
|
||||
uppy.use(DragDrop, {
|
||||
target: '#upload',
|
||||
})
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install @uppy/drag-drop
|
||||
```
|
||||
|
||||
Alternatively, you can also use this plugin in a pre-built bundle from
|
||||
Transloadit’s CDN: Smart CDN. In that case `Uppy` will attach itself to the
|
||||
global `window.Uppy` object. See the
|
||||
[main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
|
||||
|
||||
## Documentation
|
||||
|
||||
Documentation for this plugin can be found on the
|
||||
[Uppy website](https://uppy.io/docs/drag-drop/).
|
||||
|
||||
## License
|
||||
|
||||
[The MIT License](./LICENSE).
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
{
|
||||
"name": "@uppy/drag-drop",
|
||||
"description": "Droppable zone UI for Uppy. Drag and drop files into it to upload.",
|
||||
"version": "4.1.3",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"style": "dist/style.min.css",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc --build tsconfig.build.json",
|
||||
"build:css": "sass --load-path=../../ src/style.scss dist/style.css && postcss dist/style.css -u cssnano -o dist/style.min.css",
|
||||
"typecheck": "tsc --build"
|
||||
},
|
||||
"keywords": [
|
||||
"file uploader",
|
||||
"uppy",
|
||||
"uppy-plugin",
|
||||
"drag-drop",
|
||||
"drag",
|
||||
"drop",
|
||||
"dropzone",
|
||||
"upload"
|
||||
],
|
||||
"homepage": "https://uppy.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/transloadit/uppy/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/transloadit/uppy.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@uppy/utils": "workspace:^",
|
||||
"preact": "^10.5.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "workspace:^"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cssnano": "^7.0.7",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"sass": "^1.89.2",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,247 +0,0 @@
|
|||
import type {
|
||||
Body,
|
||||
DefinePluginOpts,
|
||||
Meta,
|
||||
UIPluginOptions,
|
||||
Uppy,
|
||||
} from '@uppy/core'
|
||||
import { UIPlugin } from '@uppy/core'
|
||||
import getDroppedFiles from '@uppy/utils/lib/getDroppedFiles'
|
||||
import isDragDropSupported from '@uppy/utils/lib/isDragDropSupported'
|
||||
import type { LocaleStrings } from '@uppy/utils/lib/Translator'
|
||||
import toArray from '@uppy/utils/lib/toArray'
|
||||
import { type ComponentChild, h } from 'preact'
|
||||
import type { TargetedEvent } from 'preact/compat'
|
||||
import packageJson from '../package.json' with { type: 'json' }
|
||||
import locale from './locale.js'
|
||||
|
||||
export interface DragDropOptions extends UIPluginOptions {
|
||||
inputName?: string
|
||||
allowMultipleFiles?: boolean
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
note?: string
|
||||
onDragOver?: (event: DragEvent) => void
|
||||
onDragLeave?: (event: DragEvent) => void
|
||||
onDrop?: (event: DragEvent) => void
|
||||
locale?: LocaleStrings<typeof locale>
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
inputName: 'files[]',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
} satisfies Partial<DragDropOptions>
|
||||
|
||||
/**
|
||||
* Drag & Drop plugin
|
||||
*
|
||||
*/
|
||||
export default class DragDrop<M extends Meta, B extends Body> extends UIPlugin<
|
||||
DefinePluginOpts<DragDropOptions, keyof typeof defaultOptions>,
|
||||
M,
|
||||
B
|
||||
> {
|
||||
static VERSION = packageJson.version
|
||||
|
||||
// Check for browser dragDrop support
|
||||
private isDragDropSupported = isDragDropSupported()
|
||||
|
||||
private fileInputRef!: HTMLInputElement
|
||||
|
||||
constructor(uppy: Uppy<M, B>, opts?: DragDropOptions) {
|
||||
super(uppy, {
|
||||
...defaultOptions,
|
||||
...opts,
|
||||
})
|
||||
this.type = 'acquirer'
|
||||
this.id = this.opts.id || 'DragDrop'
|
||||
this.title = 'Drag & Drop'
|
||||
|
||||
this.defaultLocale = locale
|
||||
|
||||
this.i18nInit()
|
||||
}
|
||||
|
||||
private addFiles = (files: File[]) => {
|
||||
const descriptors = files.map((file) => ({
|
||||
source: this.id,
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
data: file,
|
||||
meta: {
|
||||
// path of the file relative to the ancestor directory the user selected.
|
||||
// e.g. 'docs/Old Prague/airbnb.pdf'
|
||||
relativePath: (file as any).relativePath || null,
|
||||
} as any as M,
|
||||
}))
|
||||
|
||||
try {
|
||||
this.uppy.addFiles(descriptors)
|
||||
} catch (err) {
|
||||
this.uppy.log(err as any)
|
||||
}
|
||||
}
|
||||
|
||||
private onInputChange = (event: TargetedEvent<HTMLInputElement, Event>) => {
|
||||
const files = toArray(event.currentTarget.files || [])
|
||||
if (files.length > 0) {
|
||||
this.uppy.log('[DragDrop] Files selected through input')
|
||||
this.addFiles(files)
|
||||
}
|
||||
|
||||
// Clear the input so that Chrome can detect file section when the same file is repeatedly selected
|
||||
// (see https://github.com/transloadit/uppy/issues/768#issuecomment-2264902758)
|
||||
event.currentTarget.value = ''
|
||||
}
|
||||
|
||||
private handleDragOver = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
// Check if the "type" of the datatransfer object includes files. If not, deny drop.
|
||||
const { types } = event.dataTransfer!
|
||||
const hasFiles = types.some((type) => type === 'Files')
|
||||
const { allowNewUpload } = this.uppy.getState()
|
||||
if (!hasFiles || !allowNewUpload) {
|
||||
event.dataTransfer!.dropEffect = 'none'
|
||||
return
|
||||
}
|
||||
|
||||
// Add a small (+) icon on drop
|
||||
// (and prevent browsers from interpreting this as files being _moved_ into the browser
|
||||
// https://github.com/transloadit/uppy/issues/1978)
|
||||
//
|
||||
event.dataTransfer!.dropEffect = 'copy'
|
||||
|
||||
this.setPluginState({ isDraggingOver: true })
|
||||
|
||||
this.opts.onDragOver?.(event)
|
||||
}
|
||||
|
||||
private handleDragLeave = (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
this.setPluginState({ isDraggingOver: false })
|
||||
|
||||
this.opts.onDragLeave?.(event)
|
||||
}
|
||||
|
||||
private handleDrop = async (event: DragEvent) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
this.setPluginState({ isDraggingOver: false })
|
||||
|
||||
const logDropError = (error: any) => {
|
||||
this.uppy.log(error, 'error')
|
||||
}
|
||||
|
||||
// Add all dropped files
|
||||
const files = await getDroppedFiles(event.dataTransfer!, { logDropError })
|
||||
if (files.length > 0) {
|
||||
this.uppy.log('[DragDrop] Files dropped')
|
||||
this.addFiles(files)
|
||||
}
|
||||
|
||||
this.opts.onDrop?.(event)
|
||||
}
|
||||
|
||||
private renderHiddenFileInput() {
|
||||
const { restrictions } = this.uppy.opts
|
||||
return (
|
||||
<input
|
||||
className="uppy-DragDrop-input"
|
||||
type="file"
|
||||
hidden
|
||||
ref={(ref) => {
|
||||
this.fileInputRef = ref!
|
||||
}}
|
||||
name={this.opts.inputName}
|
||||
multiple={restrictions.maxNumberOfFiles !== 1}
|
||||
accept={restrictions.allowedFileTypes?.join(', ')}
|
||||
onChange={this.onInputChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
private static renderArrowSvg() {
|
||||
return (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
className="uppy-c-icon uppy-DragDrop-arrow"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fillRule="evenodd" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
private renderLabel() {
|
||||
return (
|
||||
<div className="uppy-DragDrop-label">
|
||||
{this.i18nArray('dropHereOr', {
|
||||
browse: (
|
||||
<span className="uppy-DragDrop-browse">{this.i18n('browse')}</span>
|
||||
) as any,
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
private renderNote() {
|
||||
return <span className="uppy-DragDrop-note">{this.opts.note}</span>
|
||||
}
|
||||
|
||||
render(): ComponentChild {
|
||||
const dragDropClass = `uppy-u-reset
|
||||
uppy-DragDrop-container
|
||||
${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''}
|
||||
${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
|
||||
`
|
||||
|
||||
const dragDropStyle = {
|
||||
width: this.opts.width,
|
||||
height: this.opts.height,
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={dragDropClass}
|
||||
style={dragDropStyle}
|
||||
onClick={() => this.fileInputRef.click()}
|
||||
onDragOver={this.handleDragOver}
|
||||
onDragLeave={this.handleDragLeave}
|
||||
onDrop={this.handleDrop}
|
||||
>
|
||||
{this.renderHiddenFileInput()}
|
||||
<div className="uppy-DragDrop-inner">
|
||||
{DragDrop.renderArrowSvg()}
|
||||
{this.renderLabel()}
|
||||
{this.renderNote()}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
install(): void {
|
||||
const { target } = this.opts
|
||||
|
||||
this.setPluginState({
|
||||
isDraggingOver: false,
|
||||
})
|
||||
|
||||
if (target) {
|
||||
this.mount(target, this)
|
||||
}
|
||||
}
|
||||
|
||||
uninstall(): void {
|
||||
this.unmount()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export type { DragDropOptions } from './DragDrop.js'
|
||||
export { default } from './DragDrop.js'
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
export default {
|
||||
strings: {
|
||||
// Text to show on the droppable area.
|
||||
// `%{browse}` is replaced with a link that opens the system file selection dialog.
|
||||
dropHereOr: 'Drop here or %{browse}',
|
||||
// Used as the label for the link that opens the system file selection dialog.
|
||||
browse: 'browse',
|
||||
},
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
@use "sass:color";
|
||||
@use '@uppy/core/src/_utils.scss';
|
||||
@use '@uppy/core/src/_variables.scss';
|
||||
|
||||
.uppy-DragDrop-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
font-family: variables.$font-family-base;
|
||||
background-color: variables.$white;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
|
||||
// firefox fix: removes thin dotted outline
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(variables.$blue, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.uppy-DragDrop-inner {
|
||||
margin: 0;
|
||||
padding: 80px 20px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uppy-DragDrop-arrow {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 17px;
|
||||
fill: color.adjust(variables.$gray-500, $lightness: 30%);
|
||||
}
|
||||
|
||||
.uppy-DragDrop--isDragDropSupported {
|
||||
border: 2px dashed color.adjust(variables.$gray-500, $lightness: 10%);
|
||||
}
|
||||
|
||||
.uppy-DragDrop--isDraggingOver {
|
||||
background: variables.$gray-200;
|
||||
border: 2px dashed variables.$blue;
|
||||
|
||||
.uppy-DragDrop-arrow {
|
||||
fill: variables.$gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
.uppy-DragDrop-label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.uppy-DragDrop-browse {
|
||||
color: variables.$blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uppy-DragDrop-note {
|
||||
color: color.adjust(variables.$gray-500, $lightness: 10%);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"outDir": "./lib",
|
||||
"rootDir": "./src"
|
||||
},
|
||||
"include": ["./src/**/*.*"],
|
||||
"exclude": ["./src/**/*.test.ts"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../utils/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../core/tsconfig.build.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"emitDeclarationOnly": false,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["./package.json", "./src/**/*.*"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../utils/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../core/tsconfig.build.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"extends": ["//"],
|
||||
"tasks": {
|
||||
"build": {
|
||||
"dependsOn": ["@uppy/core#build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
tsconfig.*
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
# @uppy/file-input
|
||||
|
||||
## 4.1.3
|
||||
|
||||
Released: 2025-05-18
|
||||
Included in: Uppy v4.16.0
|
||||
|
||||
- @uppy/audio,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/google-drive-picker,@uppy/google-drive,@uppy/google-photos-picker,@uppy/image-editor,@uppy/instagram,@uppy/onedrive,@uppy/remote-sources,@uppy/screen-capture,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/webcam,@uppy/webdav,@uppy/zoom: ts: make locale strings optional (Merlijn Vos / #5728)
|
||||
|
||||
## 4.1.0
|
||||
|
||||
Released: 2025-01-06
|
||||
Included in: Uppy v4.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive-picker,@uppy/google-drive,@uppy/google-photos-picker,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/webdav,@uppy/xhr-upload,@uppy/zoom: Remove "paths" from all tsconfig's (Merlijn Vos / #5572)
|
||||
|
||||
## 4.0.4
|
||||
|
||||
Released: 2024-12-05
|
||||
Included in: Uppy v4.8.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: cleanup tsconfig (Mikael Finstad / #5520)
|
||||
|
||||
## 4.0.3
|
||||
|
||||
Released: 2024-10-31
|
||||
Included in: Uppy v4.6.0
|
||||
|
||||
- @uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react-native,@uppy/react,@uppy/redux-dev-tools,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Fix links (Anthony Veaudry / #5492)
|
||||
|
||||
## 4.0.2
|
||||
|
||||
Released: 2024-10-15
|
||||
Included in: Uppy v4.5.0
|
||||
|
||||
- @uppy/dashboard,@uppy/drag-drop,@uppy/file-input: `.handleInputChange()` - use `.currentTarget`; clear the input using `''` (Evgenia Karunus / #5381)
|
||||
|
||||
## 4.0.1
|
||||
|
||||
Released: 2024-08-15
|
||||
Included in: Uppy v4.1.1
|
||||
|
||||
- @uppy/dashboard,@uppy/drag-drop,@uppy/file-input: Transform the `accept` prop into a string everywhere (Evgenia Karunus / #5380)
|
||||
|
||||
## 4.0.0-beta.4
|
||||
|
||||
Released: 2024-04-29
|
||||
Included in: Uppy v4.0.0-beta.4
|
||||
|
||||
- @uppy/companion,@uppy/file-input: Release: uppy@3.24.1 (github-actions[bot] / #5069)
|
||||
- @uppy/file-input: add missing export (Antoine du Hamel / #5045)
|
||||
|
||||
## 3.1.1
|
||||
|
||||
Released: 2024-04-10
|
||||
Included in: Uppy v3.24.1
|
||||
|
||||
- @uppy/file-input: add missing export (Antoine du Hamel / #5045)
|
||||
|
||||
## 3.1.0
|
||||
|
||||
Released: 2024-02-28
|
||||
Included in: Uppy v3.23.0
|
||||
|
||||
- @uppy/file-input: refactor to TypeScript (Antoine du Hamel / #4954)
|
||||
|
||||
## 3.0.1
|
||||
|
||||
Released: 2022-09-25
|
||||
Included in: Uppy v3.1.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/companion,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/redux-dev-tools,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: add missing entries to changelog for individual packages (Antoine du Hamel / #4092)
|
||||
|
||||
## 3.0.0
|
||||
|
||||
Released: 2022-08-22
|
||||
Included in: Uppy v3.0.0
|
||||
|
||||
- Switch to ESM
|
||||
|
||||
## 2.1.1
|
||||
|
||||
Released: 2022-05-30
|
||||
Included in: Uppy v2.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/onedrive,@uppy/progress-bar,@uppy/react,@uppy/redux-dev-tools,@uppy/robodog,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: doc: update bundler recommendation (Antoine du Hamel / #3763)
|
||||
|
||||
## 2.0.6
|
||||
|
||||
Released: 2022-04-27
|
||||
Included in: Uppy v2.9.4
|
||||
|
||||
- @uppy/file-input: refactor to ESM (Antoine du Hamel / #3652)
|
||||
|
||||
## 2.0.5
|
||||
|
||||
Released: 2021-12-07
|
||||
Included in: Uppy v2.3.0
|
||||
|
||||
- @uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/google-drive,@uppy/image-editor,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/screen-capture,@uppy/status-bar,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/url,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Refactor locale scripts & generate types and docs (Merlijn Vos / #3276)
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Transloadit
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
# @uppy/file-input
|
||||
|
||||
<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right">
|
||||
|
||||
[](https://www.npmjs.com/package/@uppy/file-input)
|
||||
|
||||
|
||||
|
||||
|
||||
FileInput is the most barebones UI for selecting files—it shows a single button
|
||||
that, when clicked, opens up the browser’s file selector.
|
||||
|
||||
**[Read the docs](https://uppy.io/docs/file-input)** |
|
||||
**[Try it](https://uppy.io/examples/xhrupload/)**
|
||||
|
||||
Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
|
||||
a versatile file encoding service.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
import Uppy from '@uppy/core'
|
||||
import FileInput from '@uppy/file-input'
|
||||
|
||||
const uppy = new Uppy()
|
||||
uppy.use(FileInput, {
|
||||
// Options
|
||||
})
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install @uppy/file-input
|
||||
```
|
||||
|
||||
Alternatively, you can also use this plugin in a pre-built bundle from
|
||||
Transloadit’s CDN: Smart CDN. In that case `Uppy` will attach itself to the
|
||||
global `window.Uppy` object. See the
|
||||
[main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
|
||||
|
||||
## Documentation
|
||||
|
||||
Documentation for this plugin can be found on the
|
||||
[Uppy website](https://uppy.io/docs/file-input).
|
||||
|
||||
## License
|
||||
|
||||
[The MIT License](./LICENSE).
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
{
|
||||
"name": "@uppy/file-input",
|
||||
"description": "Simple UI of a file input button that works with Uppy right out of the box",
|
||||
"version": "4.1.3",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"style": "dist/style.min.css",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc --build tsconfig.build.json",
|
||||
"build:css": "sass --load-path=../../ src/style.scss dist/style.css && postcss dist/style.css -u cssnano -o dist/style.min.css",
|
||||
"typecheck": "tsc --build"
|
||||
},
|
||||
"keywords": [
|
||||
"file uploader",
|
||||
"upload",
|
||||
"uppy",
|
||||
"uppy-plugin",
|
||||
"file-input"
|
||||
],
|
||||
"homepage": "https://uppy.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/transloadit/uppy/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/transloadit/uppy.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@uppy/utils": "workspace:^",
|
||||
"preact": "^10.5.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "workspace:^"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cssnano": "^7.0.7",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"sass": "^1.89.2",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
import type {
|
||||
Body,
|
||||
DefinePluginOpts,
|
||||
Meta,
|
||||
UIPluginOptions,
|
||||
Uppy,
|
||||
} from '@uppy/core'
|
||||
|
||||
import { UIPlugin } from '@uppy/core'
|
||||
import type { LocaleStrings } from '@uppy/utils/lib/Translator'
|
||||
import toArray from '@uppy/utils/lib/toArray'
|
||||
// biome-ignore lint/style/useImportType: h is not a type
|
||||
import { type ComponentChild, h } from 'preact'
|
||||
import type { TargetedEvent } from 'preact/compat'
|
||||
import packageJson from '../package.json' with { type: 'json' }
|
||||
import locale from './locale.js'
|
||||
|
||||
export interface FileInputOptions extends UIPluginOptions {
|
||||
pretty?: boolean
|
||||
inputName?: string
|
||||
locale?: LocaleStrings<typeof locale>
|
||||
}
|
||||
const defaultOptions = {
|
||||
pretty: true,
|
||||
inputName: 'files[]',
|
||||
}
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
|
||||
interface HTMLFileInputElement extends HTMLInputElement {
|
||||
files: FileList
|
||||
}
|
||||
|
||||
type Opts = DefinePluginOpts<FileInputOptions, keyof typeof defaultOptions>
|
||||
|
||||
export default class FileInput<M extends Meta, B extends Body> extends UIPlugin<
|
||||
Opts,
|
||||
M,
|
||||
B
|
||||
> {
|
||||
static VERSION = packageJson.version
|
||||
|
||||
input: HTMLFileInputElement | null = null
|
||||
|
||||
constructor(uppy: Uppy<M, B>, opts?: FileInputOptions) {
|
||||
super(uppy, { ...defaultOptions, ...opts })
|
||||
this.id = this.opts.id || 'FileInput'
|
||||
this.title = 'File Input'
|
||||
this.type = 'acquirer'
|
||||
|
||||
this.defaultLocale = locale
|
||||
|
||||
this.i18nInit()
|
||||
|
||||
this.render = this.render.bind(this)
|
||||
this.handleInputChange = this.handleInputChange.bind(this)
|
||||
this.handleClick = this.handleClick.bind(this)
|
||||
}
|
||||
|
||||
addFiles(files: File[]): void {
|
||||
const descriptors = files.map((file) => ({
|
||||
source: this.id,
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
data: file,
|
||||
}))
|
||||
|
||||
try {
|
||||
this.uppy.addFiles(descriptors)
|
||||
} catch (err) {
|
||||
this.uppy.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
private handleInputChange(event: TargetedEvent<HTMLInputElement, Event>) {
|
||||
this.uppy.log('[FileInput] Something selected through input...')
|
||||
const files = toArray(event.currentTarget.files || [])
|
||||
this.addFiles(files)
|
||||
|
||||
// Clear the input so that Chrome can detect file section when the same file is repeatedly selected
|
||||
// (see https://github.com/transloadit/uppy/issues/768#issuecomment-2264902758)
|
||||
event.currentTarget.value = ''
|
||||
}
|
||||
|
||||
private handleClick() {
|
||||
this.input!.click()
|
||||
}
|
||||
|
||||
render(): ComponentChild {
|
||||
/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
|
||||
const hiddenInputStyle = {
|
||||
width: '0.1px',
|
||||
height: '0.1px',
|
||||
opacity: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
zIndex: -1,
|
||||
} satisfies h.JSX.IntrinsicElements['input']['style']
|
||||
|
||||
const { restrictions } = this.uppy.opts
|
||||
|
||||
return (
|
||||
<div className="uppy-FileInput-container">
|
||||
<input
|
||||
className="uppy-FileInput-input"
|
||||
style={this.opts.pretty ? hiddenInputStyle : undefined}
|
||||
type="file"
|
||||
name={this.opts.inputName}
|
||||
onChange={this.handleInputChange}
|
||||
multiple={restrictions.maxNumberOfFiles !== 1}
|
||||
accept={restrictions.allowedFileTypes?.join(', ')}
|
||||
ref={(input) => {
|
||||
this.input = input as HTMLFileInputElement
|
||||
}}
|
||||
/>
|
||||
{this.opts.pretty && (
|
||||
<button
|
||||
className="uppy-FileInput-btn"
|
||||
type="button"
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{this.i18n('chooseFiles')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
install(): void {
|
||||
const { target } = this.opts
|
||||
if (target) {
|
||||
this.mount(target, this)
|
||||
}
|
||||
}
|
||||
|
||||
uninstall(): void {
|
||||
this.unmount()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export type { FileInputOptions } from './FileInput.js'
|
||||
export { default } from './FileInput.js'
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export default {
|
||||
strings: {
|
||||
chooseFiles: 'Choose files',
|
||||
},
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@use "sass:color";
|
||||
@use '@uppy/core/src/_utils.scss';
|
||||
@use '@uppy/core/src/_variables.scss';
|
||||
|
||||
.uppy-FileInput-container {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.uppy-FileInput-btn {
|
||||
@include utils.reset-button;
|
||||
// text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
color: color.adjust(variables.$blue, $lightness: -20%);
|
||||
font-size: 0.85em;
|
||||
font-family: sans-serif;
|
||||
border: 1px solid color.adjust(variables.$blue, $lightness: -20%);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: variables.$white;
|
||||
background-color: color.adjust(variables.$blue, $lightness: -20%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"outDir": "./lib",
|
||||
"rootDir": "./src"
|
||||
},
|
||||
"include": ["./src/**/*.*"],
|
||||
"exclude": ["./src/**/*.test.ts"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../utils/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../core/tsconfig.build.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"emitDeclarationOnly": false,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["./package.json", "./src/**/*.*"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../utils/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../core/tsconfig.build.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"extends": ["//"],
|
||||
"tasks": {
|
||||
"build": {
|
||||
"dependsOn": ["@uppy/core#build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
"@uppy/onedrive#build",
|
||||
"@uppy/compressor#build",
|
||||
"@uppy/url#build",
|
||||
"@uppy/file-input#build",
|
||||
"@uppy/dashboard#build",
|
||||
"@uppy/google-photos-picker#build",
|
||||
"@uppy/audio#build",
|
||||
|
|
@ -26,8 +25,7 @@
|
|||
"@uppy/unsplash#build",
|
||||
"@uppy/status-bar#build",
|
||||
"@uppy/webcam#build",
|
||||
"@uppy/instagram#build",
|
||||
"@uppy/drag-drop#build"
|
||||
"@uppy/instagram#build"
|
||||
],
|
||||
"inputs": [
|
||||
"../*/src/locale.ts",
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
tsconfig.*
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
# @uppy/progress-bar
|
||||
|
||||
## 4.2.0
|
||||
|
||||
Released: 2025-01-06
|
||||
Included in: Uppy v4.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive-picker,@uppy/google-drive,@uppy/google-photos-picker,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/webdav,@uppy/xhr-upload,@uppy/zoom: Remove "paths" from all tsconfig's (Merlijn Vos / #5572)
|
||||
|
||||
## 4.0.2
|
||||
|
||||
Released: 2024-12-05
|
||||
Included in: Uppy v4.8.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: cleanup tsconfig (Mikael Finstad / #5520)
|
||||
|
||||
## 4.0.1
|
||||
|
||||
Released: 2024-10-31
|
||||
Included in: Uppy v4.6.0
|
||||
|
||||
- @uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react-native,@uppy/react,@uppy/redux-dev-tools,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Fix links (Anthony Veaudry / #5492)
|
||||
|
||||
## 4.0.0-beta.1
|
||||
|
||||
Released: 2024-03-28
|
||||
Included in: Uppy v4.0.0-beta.1
|
||||
|
||||
- @uppy/progress-bar: remove default target (Antoine du Hamel / #4971)
|
||||
- @uppy/drag-drop,@uppy/progress-bar: add missing exports (Antoine du Hamel / #5009)
|
||||
|
||||
## 3.1.1
|
||||
|
||||
Released: 2024-03-27
|
||||
Included in: Uppy v3.24.0
|
||||
|
||||
- @uppy/drag-drop,@uppy/progress-bar: add missing exports (Antoine du Hamel / #5009)
|
||||
|
||||
## 3.1.0
|
||||
|
||||
Released: 2024-02-28
|
||||
Included in: Uppy v3.23.0
|
||||
|
||||
- @uppy/progress-bar: refactor to TypeScript (Mikael Finstad / #4921)
|
||||
|
||||
## 3.0.1
|
||||
|
||||
Released: 2022-09-25
|
||||
Included in: Uppy v3.1.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/companion,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/redux-dev-tools,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: add missing entries to changelog for individual packages (Antoine du Hamel / #4092)
|
||||
|
||||
## 3.0.0
|
||||
|
||||
Released: 2022-08-22
|
||||
Included in: Uppy v3.0.0
|
||||
|
||||
- Switch to ESM
|
||||
|
||||
## 2.1.1
|
||||
|
||||
Released: 2022-05-30
|
||||
Included in: Uppy v2.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/onedrive,@uppy/progress-bar,@uppy/react,@uppy/redux-dev-tools,@uppy/robodog,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: doc: update bundler recommendation (Antoine du Hamel / #3763)
|
||||
|
||||
## 2.1.0
|
||||
|
||||
Released: 2022-05-14
|
||||
Included in: Uppy v2.10.0
|
||||
|
||||
- @uppy/progress-bar: refactor to ESM (Antoine du Hamel / #3706)
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Transloadit
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
# @uppy/progress-bar
|
||||
|
||||
<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right">
|
||||
|
||||
[](https://www.npmjs.com/package/@uppy/progress-bar)
|
||||
|
||||
|
||||
|
||||
|
||||
ProgressBar is a minimalist plugin that shows the current upload progress in a
|
||||
thin bar element. Like the ones used by YouTube and GitHub when navigating
|
||||
between pages.
|
||||
|
||||
Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
|
||||
a versatile file encoding service.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
import Uppy from '@uppy/core'
|
||||
import ProgressBar from '@uppy/progress-bar'
|
||||
|
||||
const uppy = new Uppy()
|
||||
uppy.use(ProgressBar, {
|
||||
// Options
|
||||
})
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install @uppy/progress-bar
|
||||
```
|
||||
|
||||
Alternatively, you can also use this plugin in a pre-built bundle from
|
||||
Transloadit’s CDN: Smart CDN. In that case `Uppy` will attach itself to the
|
||||
global `window.Uppy` object. See the
|
||||
[main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
|
||||
|
||||
## Documentation
|
||||
|
||||
Documentation for this plugin can be found on the
|
||||
[Uppy website](https://uppy.io/docs/progress-bar).
|
||||
|
||||
## License
|
||||
|
||||
[The MIT License](./LICENSE).
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
{
|
||||
"name": "@uppy/progress-bar",
|
||||
"description": "A progress bar UI for Uppy",
|
||||
"version": "4.2.1",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"style": "dist/style.min.css",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc --build tsconfig.build.json",
|
||||
"build:css": "sass --load-path=../../ src/style.scss dist/style.css && postcss dist/style.css -u cssnano -o dist/style.min.css",
|
||||
"typecheck": "tsc --build"
|
||||
},
|
||||
"keywords": [
|
||||
"file uploader",
|
||||
"uppy",
|
||||
"uppy-plugin",
|
||||
"progress",
|
||||
"progress bar",
|
||||
"upload progress"
|
||||
],
|
||||
"homepage": "https://uppy.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/transloadit/uppy/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/transloadit/uppy.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@uppy/utils": "workspace:^",
|
||||
"preact": "^10.5.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "workspace:^"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cssnano": "^7.0.7",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"sass": "^1.89.2",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
import type {
|
||||
Body,
|
||||
DefinePluginOpts,
|
||||
Meta,
|
||||
State,
|
||||
UIPluginOptions,
|
||||
Uppy,
|
||||
} from '@uppy/core'
|
||||
import { UIPlugin } from '@uppy/core'
|
||||
import { type ComponentChild, h } from 'preact'
|
||||
|
||||
import packageJson from '../package.json' with { type: 'json' }
|
||||
|
||||
export interface ProgressBarOptions extends UIPluginOptions {
|
||||
hideAfterFinish?: boolean
|
||||
fixed?: boolean
|
||||
}
|
||||
// set default options, must kept in sync with @uppy/react/src/ProgressBar.js
|
||||
const defaultOptions = {
|
||||
fixed: false,
|
||||
hideAfterFinish: true,
|
||||
}
|
||||
|
||||
type Opts = DefinePluginOpts<ProgressBarOptions, keyof typeof defaultOptions>
|
||||
|
||||
/**
|
||||
* Progress bar
|
||||
*
|
||||
*/
|
||||
export default class ProgressBar<
|
||||
M extends Meta,
|
||||
B extends Body,
|
||||
> extends UIPlugin<Opts, M, B> {
|
||||
static VERSION = packageJson.version
|
||||
|
||||
constructor(uppy: Uppy<M, B>, opts?: ProgressBarOptions) {
|
||||
super(uppy, { ...defaultOptions, ...opts })
|
||||
this.id = this.opts.id || 'ProgressBar'
|
||||
this.title = 'Progress Bar'
|
||||
this.type = 'progressindicator'
|
||||
|
||||
this.render = this.render.bind(this)
|
||||
}
|
||||
|
||||
render(state: State<M, B>): ComponentChild {
|
||||
const { totalProgress } = state
|
||||
// before starting and after finish should be hidden if specified in the options
|
||||
const isHidden =
|
||||
(totalProgress === 0 || totalProgress === 100) &&
|
||||
this.opts.hideAfterFinish
|
||||
return (
|
||||
<div
|
||||
className="uppy uppy-ProgressBar"
|
||||
style={{ position: this.opts.fixed ? 'fixed' : 'initial' }}
|
||||
aria-hidden={isHidden}
|
||||
>
|
||||
<div
|
||||
className="uppy-ProgressBar-inner"
|
||||
style={{ width: `${totalProgress}%` }}
|
||||
/>
|
||||
<div className="uppy-ProgressBar-percentage">{totalProgress}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
install(): void {
|
||||
const { target } = this.opts
|
||||
if (target) {
|
||||
this.mount(target, this)
|
||||
}
|
||||
}
|
||||
|
||||
uninstall(): void {
|
||||
this.unmount()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export type { ProgressBarOptions } from './ProgressBar.js'
|
||||
export { default } from './ProgressBar.js'
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
@use '@uppy/core/src/_utils.scss';
|
||||
@use '@uppy/core/src/_variables.scss';
|
||||
|
||||
.uppy-ProgressBar {
|
||||
/* no important */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
transition: height 0.2s;
|
||||
}
|
||||
|
||||
.uppy-ProgressBar[aria-hidden='true'] {
|
||||
/* no important */
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.uppy-ProgressBar-inner {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
||||
/* no important */
|
||||
background-color: variables.$blue;
|
||||
box-shadow: 0 0 10px rgba(variables.$blue, 0.7);
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.uppy-ProgressBar-percentage {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
/* no important */
|
||||
display: none;
|
||||
color: variables.$white;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"outDir": "./lib",
|
||||
"rootDir": "./src"
|
||||
},
|
||||
"include": ["./src/**/*.*"],
|
||||
"exclude": ["./src/**/*.test.ts"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../utils/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../core/tsconfig.build.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"emitDeclarationOnly": false,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["./package.json", "./src/**/*.*"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../utils/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../core/tsconfig.build.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"extends": ["//"],
|
||||
"tasks": {
|
||||
"build": {
|
||||
"dependsOn": ["@uppy/core#build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,9 +47,6 @@
|
|||
"peerDependencies": {
|
||||
"@uppy/core": "workspace:^",
|
||||
"@uppy/dashboard": "workspace:^",
|
||||
"@uppy/drag-drop": "workspace:^",
|
||||
"@uppy/file-input": "workspace:^",
|
||||
"@uppy/progress-bar": "workspace:^",
|
||||
"@uppy/screen-capture": "workspace:^",
|
||||
"@uppy/status-bar": "workspace:^",
|
||||
"@uppy/webcam": "workspace:^",
|
||||
|
|
@ -60,15 +57,6 @@
|
|||
"@uppy/dashboard": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/drag-drop": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/file-input": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/progress-bar": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/screen-capture": {
|
||||
"optional": true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
import type { Body, Meta, UnknownPlugin, Uppy } from '@uppy/core'
|
||||
import DragDropPlugin, { type DragDropOptions } from '@uppy/drag-drop'
|
||||
import { Component, createElement as h } from 'react'
|
||||
import getHTMLProps from './getHTMLProps.js'
|
||||
import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js'
|
||||
|
||||
interface DragDropProps<M extends Meta, B extends Body>
|
||||
extends DragDropOptions {
|
||||
uppy: Uppy<M, B>
|
||||
}
|
||||
|
||||
/**
|
||||
* React component that renders an area in which files can be dropped to be
|
||||
* uploaded.
|
||||
*/
|
||||
|
||||
class DragDrop<M extends Meta, B extends Body> extends Component<
|
||||
DragDropProps<M, B>
|
||||
> {
|
||||
private container!: HTMLElement
|
||||
|
||||
private plugin!: UnknownPlugin<M, B>
|
||||
|
||||
componentDidMount(): void {
|
||||
this.installPlugin()
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: DragDrop<M, B>['props']): void {
|
||||
if (prevProps.uppy !== this.props.uppy) {
|
||||
this.uninstallPlugin(prevProps)
|
||||
this.installPlugin()
|
||||
} else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
|
||||
const { uppy, ...options } = { ...this.props, target: this.container }
|
||||
this.plugin.setOptions(options)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
this.uninstallPlugin()
|
||||
}
|
||||
|
||||
installPlugin(): void {
|
||||
const { uppy, locale, inputName, width, height, note, id } = this.props
|
||||
const options = {
|
||||
id: id || 'DragDrop',
|
||||
locale,
|
||||
inputName,
|
||||
width,
|
||||
height,
|
||||
note,
|
||||
target: this.container,
|
||||
}
|
||||
|
||||
uppy.use(DragDropPlugin, options)
|
||||
|
||||
this.plugin = uppy.getPlugin(options.id)!
|
||||
}
|
||||
|
||||
uninstallPlugin(props = this.props): void {
|
||||
const { uppy } = props
|
||||
|
||||
uppy.removePlugin(this.plugin)
|
||||
}
|
||||
|
||||
render() {
|
||||
return h('div', {
|
||||
className: 'uppy-Container',
|
||||
ref: (container: HTMLElement) => {
|
||||
this.container = container
|
||||
},
|
||||
...getHTMLProps(this.props),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default DragDrop
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
import type {
|
||||
Body,
|
||||
Meta,
|
||||
UIPluginOptions,
|
||||
UnknownPlugin,
|
||||
Uppy,
|
||||
} from '@uppy/core'
|
||||
import FileInputPlugin, { type FileInputOptions } from '@uppy/file-input'
|
||||
import { Component, createElement as h } from 'react'
|
||||
|
||||
interface FileInputProps<M extends Meta, B extends Body>
|
||||
extends UIPluginOptions {
|
||||
uppy: Uppy<M, B>
|
||||
locale?: FileInputOptions['locale']
|
||||
pretty?: boolean
|
||||
inputName?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* React component that renders an area in which files can be dropped to be
|
||||
* uploaded.
|
||||
*/
|
||||
|
||||
class FileInput<M extends Meta, B extends Body> extends Component<
|
||||
FileInputProps<M, B>
|
||||
> {
|
||||
// Must be kept in sync with @uppy/file-input/src/FileInput.js
|
||||
static defaultProps = {
|
||||
locale: undefined,
|
||||
pretty: true,
|
||||
inputName: 'files[]',
|
||||
}
|
||||
|
||||
private container!: HTMLElement
|
||||
|
||||
private plugin?: UnknownPlugin<M, B>
|
||||
|
||||
componentDidMount(): void {
|
||||
this.installPlugin()
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: FileInputProps<M, B>): void {
|
||||
if (prevProps.uppy !== this.props.uppy) {
|
||||
this.uninstallPlugin(prevProps)
|
||||
this.installPlugin()
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
this.uninstallPlugin()
|
||||
}
|
||||
|
||||
installPlugin(): void {
|
||||
const { uppy, locale, pretty, inputName, id } = this.props
|
||||
const options = {
|
||||
id: id || 'FileInput',
|
||||
locale,
|
||||
pretty,
|
||||
inputName,
|
||||
target: this.container,
|
||||
}
|
||||
|
||||
uppy.use(FileInputPlugin, options)
|
||||
|
||||
this.plugin = uppy.getPlugin(options.id)!
|
||||
}
|
||||
|
||||
uninstallPlugin(props = this.props): void {
|
||||
const { uppy } = props
|
||||
|
||||
uppy.removePlugin(this.plugin!)
|
||||
}
|
||||
|
||||
render() {
|
||||
return h('div', {
|
||||
className: 'uppy-Container',
|
||||
ref: (container: HTMLElement) => {
|
||||
this.container = container
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default FileInput
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
import type { Body, Meta, UnknownPlugin, Uppy } from '@uppy/core'
|
||||
import ProgressBarPlugin, { type ProgressBarOptions } from '@uppy/progress-bar'
|
||||
import { Component, createElement as h } from 'react'
|
||||
import getHTMLProps from './getHTMLProps.js'
|
||||
import nonHtmlPropsHaveChanged from './nonHtmlPropsHaveChanged.js'
|
||||
|
||||
interface ProgressBarProps<M extends Meta, B extends Body>
|
||||
extends ProgressBarOptions {
|
||||
uppy: Uppy<M, B>
|
||||
}
|
||||
|
||||
/**
|
||||
* React component that renders a progress bar at the top of the page.
|
||||
*/
|
||||
|
||||
class ProgressBar<M extends Meta, B extends Body> extends Component<
|
||||
ProgressBarProps<M, B>
|
||||
> {
|
||||
private container!: HTMLElement
|
||||
|
||||
private plugin!: UnknownPlugin<M, B>
|
||||
|
||||
componentDidMount(): void {
|
||||
this.installPlugin()
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: ProgressBar<M, B>['props']): void {
|
||||
if (prevProps.uppy !== this.props.uppy) {
|
||||
this.uninstallPlugin(prevProps)
|
||||
this.installPlugin()
|
||||
} else if (nonHtmlPropsHaveChanged(this.props, prevProps)) {
|
||||
const { uppy, ...options } = { ...this.props, target: this.container }
|
||||
this.plugin.setOptions(options)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
this.uninstallPlugin()
|
||||
}
|
||||
|
||||
installPlugin(): void {
|
||||
const { uppy, fixed, hideAfterFinish, id } = this.props
|
||||
const options = {
|
||||
id: id || 'ProgressBar',
|
||||
fixed,
|
||||
hideAfterFinish,
|
||||
target: this.container,
|
||||
}
|
||||
|
||||
uppy.use(ProgressBarPlugin, options)
|
||||
|
||||
this.plugin = uppy.getPlugin(options.id)!
|
||||
}
|
||||
|
||||
uninstallPlugin(props = this.props): void {
|
||||
const { uppy } = props
|
||||
|
||||
uppy.removePlugin(this.plugin)
|
||||
}
|
||||
|
||||
render() {
|
||||
return h('div', {
|
||||
className: 'uppy-Container',
|
||||
ref: (container: HTMLElement) => {
|
||||
this.container = container
|
||||
},
|
||||
...getHTMLProps(this.props),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default ProgressBar
|
||||
|
|
@ -1,14 +1,11 @@
|
|||
export { default as Dashboard } from './Dashboard.js'
|
||||
export { default as DashboardModal } from './DashboardModal.js'
|
||||
export { default as DragDrop } from './DragDrop.js'
|
||||
export { default as FileInput } from './FileInput.js'
|
||||
export * from './headless/generated/index.js'
|
||||
// Headless components
|
||||
export {
|
||||
UppyContext,
|
||||
UppyContextProvider,
|
||||
} from './headless/UppyContextProvider.js'
|
||||
export { default as ProgressBar } from './ProgressBar.js'
|
||||
export { default as StatusBar } from './StatusBar.js'
|
||||
export { useDropzone } from './useDropzone.js'
|
||||
export { useFileInput } from './useFileInput.js'
|
||||
|
|
|
|||
|
|
@ -21,15 +21,6 @@
|
|||
{
|
||||
"path": "../dashboard/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../drag-drop/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../file-input/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../progress-bar/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../status-bar/tsconfig.build.json"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,15 +20,6 @@
|
|||
{
|
||||
"path": "../dashboard/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../drag-drop/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../file-input/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../progress-bar/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../status-bar/tsconfig.build.json"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
# @uppy/redux-dev-tools
|
||||
|
||||
## 4.0.1
|
||||
|
||||
Released: 2024-10-31
|
||||
Included in: Uppy v4.6.0
|
||||
|
||||
- @uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react-native,@uppy/react,@uppy/redux-dev-tools,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Fix links (Anthony Veaudry / #5492)
|
||||
|
||||
## 3.0.1
|
||||
|
||||
Released: 2022-09-25
|
||||
Included in: Uppy v3.1.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/companion,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/redux-dev-tools,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: add missing entries to changelog for individual packages (Antoine du Hamel / #4092)
|
||||
|
||||
## 3.0.0
|
||||
|
||||
Released: 2022-08-22
|
||||
Included in: Uppy v3.0.0
|
||||
|
||||
- Switch to ESM
|
||||
|
||||
## 2.1.0
|
||||
|
||||
Released: 2022-05-30
|
||||
Included in: Uppy v2.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/onedrive,@uppy/progress-bar,@uppy/react,@uppy/redux-dev-tools,@uppy/robodog,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: doc: update bundler recommendation (Antoine du Hamel / #3763)
|
||||
- @uppy/redux-dev-tools: refactor to ESM (Antoine du Hamel / #3733)
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Transloadit
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
# @uppy/redux-dev-tools
|
||||
|
||||
<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right">
|
||||
|
||||
[](https://www.npmjs.com/package/@uppy/redux-dev-tools)
|
||||
|
||||
|
||||
|
||||
|
||||
ReduxDevTools plugin that syncs with redux-devtools browser or JS extensions,
|
||||
and allows for basic time travel:
|
||||
|
||||
Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
|
||||
a versatile file encoding service.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
import Uppy from '@uppy/core'
|
||||
import ReduxDevTools from 'uppy/redux-dev-tools'
|
||||
|
||||
const uppy = new Uppy()
|
||||
uppy.use(ReduxDevTools)
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install @uppy/redux-dev-tools
|
||||
```
|
||||
|
||||
Alternatively, you can also use this plugin in a pre-built bundle from
|
||||
Transloadit’s CDN: Smart CDN. In that case `Uppy` will attach itself to the
|
||||
global `window.Uppy` object. See the
|
||||
[main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
|
||||
|
||||
<!-- Undocumented currently
|
||||
## Documentation
|
||||
|
||||
Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/DOC_PAGE_HERE).
|
||||
-->
|
||||
|
||||
## License
|
||||
|
||||
[The MIT License](./LICENSE).
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
{
|
||||
"name": "@uppy/redux-dev-tools",
|
||||
"description": "Redux developer tools plugin for Uppy that simply syncs Uppy’s state with redux-devtools browser or JS extensions, and allows for basic time travel",
|
||||
"version": "4.0.1",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"type": "module",
|
||||
"keywords": [
|
||||
"file uploader",
|
||||
"redux",
|
||||
"redux-dev-tools",
|
||||
"uppy",
|
||||
"uppy-plugin"
|
||||
],
|
||||
"homepage": "https://uppy.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/transloadit/uppy/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/transloadit/uppy.git"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@uppy/core": "workspace:^"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc --build tsconfig.build.json",
|
||||
"typecheck": "tsc --build"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
import { UIPlugin } from '@uppy/core'
|
||||
|
||||
import packageJson from '../package.json'
|
||||
|
||||
/**
|
||||
* Add Redux DevTools support to Uppy
|
||||
*
|
||||
* See https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f
|
||||
* and https://github.com/zalmoxisus/mobx-remotedev/blob/master/src/monitorActions.js
|
||||
*/
|
||||
export default class ReduxDevTools extends UIPlugin {
|
||||
static VERSION = packageJson.version
|
||||
|
||||
constructor(uppy, opts) {
|
||||
super(uppy, opts)
|
||||
this.type = 'debugger'
|
||||
this.id = this.opts.id || 'ReduxDevTools'
|
||||
this.title = 'Redux DevTools'
|
||||
|
||||
// set default options
|
||||
const defaultOptions = {}
|
||||
|
||||
// merge default options with the ones set by user
|
||||
this.opts = { ...defaultOptions, ...opts }
|
||||
|
||||
this.handleStateChange = this.handleStateChange.bind(this)
|
||||
this.initDevTools = this.initDevTools.bind(this)
|
||||
}
|
||||
|
||||
handleStateChange(prevState, nextState) {
|
||||
this.devTools.send('UPPY_STATE_UPDATE', nextState)
|
||||
}
|
||||
|
||||
initDevTools() {
|
||||
this.devTools = window.devToolsExtension.connect()
|
||||
this.devToolsUnsubscribe = this.devTools.subscribe((message) => {
|
||||
if (message.type === 'DISPATCH') {
|
||||
// Implement monitors actions
|
||||
switch (message.payload.type) {
|
||||
case 'RESET':
|
||||
this.uppy.cancelAll()
|
||||
return
|
||||
case 'IMPORT_STATE': {
|
||||
const { computedStates } = message.payload.nextLiftedState
|
||||
this.uppy.store.state = {
|
||||
...this.uppy.getState(),
|
||||
...computedStates[computedStates.length - 1].state,
|
||||
}
|
||||
this.uppy.updateAll(this.uppy.getState())
|
||||
return
|
||||
}
|
||||
case 'JUMP_TO_STATE':
|
||||
case 'JUMP_TO_ACTION':
|
||||
this.uppy.store.state = {
|
||||
...this.uppy.getState(),
|
||||
...JSON.parse(message.state),
|
||||
}
|
||||
this.uppy.updateAll(this.uppy.getState())
|
||||
break
|
||||
|
||||
default:
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
install() {
|
||||
this.withDevTools =
|
||||
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
|
||||
if (this.withDevTools) {
|
||||
this.initDevTools()
|
||||
this.uppy.on('state-update', this.handleStateChange)
|
||||
}
|
||||
}
|
||||
|
||||
uninstall() {
|
||||
if (this.withDevTools) {
|
||||
this.devToolsUnsubscribe()
|
||||
this.uppy.off('state-update', this.handleStateUpdate)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"outDir": "./lib",
|
||||
"rootDir": "./src",
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["./src/**/*.*"],
|
||||
"exclude": ["./src/**/*.test.ts"]
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["./package.json", "./src/**/*.*"]
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
# @uppy/store-redux
|
||||
|
||||
## 4.0.2
|
||||
|
||||
Released: 2025-01-06
|
||||
Included in: Uppy v4.10.0
|
||||
|
||||
- @uppy/core,@uppy/dashboard,@uppy/provider-views,@uppy/store-redux,@uppy/url: build(deps): bump nanoid from 5.0.7 to 5.0.9 (dependabot[bot] / #5544)
|
||||
|
||||
## 4.0.1
|
||||
|
||||
Released: 2024-10-31
|
||||
Included in: Uppy v4.6.0
|
||||
|
||||
- @uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/google-photos,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react-native,@uppy/react,@uppy/redux-dev-tools,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: Fix links (Anthony Veaudry / #5492)
|
||||
|
||||
## 3.0.2
|
||||
|
||||
Released: 2022-09-25
|
||||
Included in: Uppy v3.1.0
|
||||
|
||||
- @uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/companion-client,@uppy/companion,@uppy/compressor,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/drop-target,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/locales,@uppy/onedrive,@uppy/progress-bar,@uppy/provider-views,@uppy/react,@uppy/redux-dev-tools,@uppy/remote-sources,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/svelte,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/utils,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: add missing entries to changelog for individual packages (Antoine du Hamel / #4092)
|
||||
|
||||
## 3.0.0
|
||||
|
||||
Released: 2022-08-22
|
||||
Included in: Uppy v3.0.0
|
||||
|
||||
- Switch to ESM
|
||||
|
||||
## 3.0.0-beta.2
|
||||
|
||||
Released: 2022-07-27
|
||||
Included in: Uppy v3.0.0-beta.3
|
||||
|
||||
- @uppy/aws-s3,@uppy/core,@uppy/dashboard,@uppy/store-redux,@uppy/xhr-upload: upgrade `nanoid` to v4 (Antoine du Hamel / #3904)
|
||||
|
||||
## 2.1.0
|
||||
|
||||
Released: 2022-05-30
|
||||
Included in: Uppy v2.11.0
|
||||
|
||||
- @uppy/angular,@uppy/audio,@uppy/aws-s3-multipart,@uppy/aws-s3,@uppy/box,@uppy/core,@uppy/dashboard,@uppy/drag-drop,@uppy/dropbox,@uppy/facebook,@uppy/file-input,@uppy/form,@uppy/golden-retriever,@uppy/google-drive,@uppy/image-editor,@uppy/informer,@uppy/instagram,@uppy/onedrive,@uppy/progress-bar,@uppy/react,@uppy/redux-dev-tools,@uppy/robodog,@uppy/screen-capture,@uppy/status-bar,@uppy/store-default,@uppy/store-redux,@uppy/thumbnail-generator,@uppy/transloadit,@uppy/tus,@uppy/unsplash,@uppy/url,@uppy/vue,@uppy/webcam,@uppy/xhr-upload,@uppy/zoom: doc: update bundler recommendation (Antoine du Hamel / #3763)
|
||||
- @uppy/store-redux: refactor to ESM (Antoine du Hamel / #3745)
|
||||
|
||||
## 2.0.3
|
||||
|
||||
Released: 2021-12-09
|
||||
Included in: Uppy v2.3.1
|
||||
|
||||
- @uppy/aws-s3,@uppy/core,@uppy/dashboard,@uppy/store-redux,@uppy/xhr-upload: deps: use `nanoid/non-secure` to workaround react-native limitation (Antoine du Hamel / #3350)
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 Transloadit
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
# @uppy/store-redux
|
||||
|
||||
<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right">
|
||||
|
||||
[](https://www.npmjs.com/package/@uppy/store-redux)
|
||||
|
||||
|
||||
|
||||
|
||||
The `ReduxStore` stores Uppy state on a key in an existing Redux store. The
|
||||
`ReduxStore` dispatches `uppy/STATE_UPDATE` actions to update state. When the
|
||||
state in Redux changes, it notifies Uppy. This way, you get most of the benefits
|
||||
of Redux, including support for the Redux Devtools and time traveling!
|
||||
|
||||
Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
|
||||
a versatile file encoding service.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
import Uppy from '@uppy/core'
|
||||
import * as ReduxStore from '@uppy/store-redux'
|
||||
import * as Redux from 'redux'
|
||||
|
||||
function createStore(reducers = {}) {
|
||||
const reducer = Redux.combineReducers({
|
||||
...reducers,
|
||||
uppy: ReduxStore.reducer,
|
||||
})
|
||||
return Redux.createStore(reducer)
|
||||
}
|
||||
|
||||
const store = new ReduxStore.ReduxStore({ store: createStore() })
|
||||
const uppy = new Uppy({ store })
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install @uppy/store-redux
|
||||
```
|
||||
|
||||
Alternatively, you can also use this plugin in a pre-built bundle from
|
||||
Transloadit’s CDN: Smart CDN. In that case `Uppy` will attach itself to the
|
||||
global `window.Uppy` object. See the
|
||||
[main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
|
||||
|
||||
## Documentation
|
||||
|
||||
Documentation for this plugin can be found on the
|
||||
[Uppy website](https://uppy.io/docs/guides/custom-stores#reduxstore).
|
||||
|
||||
## License
|
||||
|
||||
[The MIT License](./LICENSE).
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
{
|
||||
"name": "@uppy/store-redux",
|
||||
"description": "Make Uppy use your existing Redux store.",
|
||||
"version": "4.0.2",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"type": "module",
|
||||
"keywords": [
|
||||
"file uploader",
|
||||
"uppy",
|
||||
"uppy-plugin",
|
||||
"redux"
|
||||
],
|
||||
"homepage": "https://uppy.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/transloadit/uppy/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/transloadit/uppy.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"nanoid": "^5.0.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jsdom": "^26.1.0",
|
||||
"redux": "^4.0.0",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc --build tsconfig.build.json",
|
||||
"typecheck": "tsc --build",
|
||||
"test": "vitest run --environment=jsdom --silent='passed-only'"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
import { nanoid } from 'nanoid/non-secure'
|
||||
|
||||
import packageJson from '../package.json'
|
||||
|
||||
// Redux action name.
|
||||
export const STATE_UPDATE = 'uppy/STATE_UPDATE'
|
||||
|
||||
// Pluck Uppy state from the Redux store in the default location.
|
||||
const defaultSelector = (id) => (state) => state.uppy[id]
|
||||
|
||||
function getPatch(prev, next) {
|
||||
const nextKeys = Object.keys(next)
|
||||
const patch = {}
|
||||
nextKeys.forEach((k) => {
|
||||
if (prev[k] !== next[k]) patch[k] = next[k]
|
||||
})
|
||||
return patch
|
||||
}
|
||||
|
||||
/**
|
||||
* Redux store.
|
||||
*
|
||||
* @param {object} opts.store - The Redux store to use.
|
||||
* @param {string} opts.id - This store instance's ID. Defaults to a random string.
|
||||
* If you need to access Uppy state through Redux, eg. to render custom UI, set this to something constant.
|
||||
* @param {Function} opts.selector - Function, `(state) => uppyState`, to pluck state from the Redux store.
|
||||
* Defaults to retrieving `state.uppy[opts.id]`. Override if you placed Uppy state elsewhere in the Redux store.
|
||||
*/
|
||||
export class ReduxStore {
|
||||
static VERSION = packageJson.version
|
||||
|
||||
#id
|
||||
|
||||
#selector
|
||||
|
||||
#store
|
||||
|
||||
constructor(opts) {
|
||||
this.#store = opts.store
|
||||
this.#id = opts.id || nanoid()
|
||||
this.#selector = opts.selector || defaultSelector(this.#id)
|
||||
|
||||
// Calling `setState` to dispatch an action to the Redux store.
|
||||
// The intent is to make sure that the reducer has run once.
|
||||
this.setState({})
|
||||
}
|
||||
|
||||
setState(patch) {
|
||||
this.#store.dispatch({
|
||||
type: STATE_UPDATE,
|
||||
id: this.#id,
|
||||
payload: patch,
|
||||
})
|
||||
}
|
||||
|
||||
getState() {
|
||||
return this.#selector(this.#store.getState())
|
||||
}
|
||||
|
||||
subscribe(cb) {
|
||||
let prevState = this.getState()
|
||||
return this.#store.subscribe(() => {
|
||||
const nextState = this.getState()
|
||||
if (prevState !== nextState) {
|
||||
const patch = getPatch(prevState, nextState)
|
||||
cb(prevState, nextState, patch)
|
||||
prevState = nextState
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
[Symbol.for('uppy test: get id')]() {
|
||||
return this.#id
|
||||
}
|
||||
}
|
||||
|
||||
export function reducer(state = {}, action) {
|
||||
if (action.type === STATE_UPDATE) {
|
||||
const newState = { ...state[action.id], ...action.payload }
|
||||
return { ...state, [action.id]: newState }
|
||||
}
|
||||
return state
|
||||
}
|
||||
|
||||
export function middleware() {
|
||||
// Do nothing, at the moment.
|
||||
return () => (next) => (action) => {
|
||||
next(action)
|
||||
}
|
||||
}
|
||||
|
||||
export default ReduxStore
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
import Redux from 'redux'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { ReduxStore, reducer } from './index.js'
|
||||
|
||||
describe('ReduxStore', () => {
|
||||
function createStore(reducers = {}) {
|
||||
const combinedReducers = Redux.combineReducers({
|
||||
...reducers,
|
||||
uppy: reducer,
|
||||
})
|
||||
return Redux.createStore(combinedReducers)
|
||||
}
|
||||
|
||||
it('can be created with named or default import', () => {
|
||||
const r = createStore()
|
||||
let store = new ReduxStore({ store: r })
|
||||
expect(typeof store).toBe('object')
|
||||
store = new ReduxStore({ store: r })
|
||||
expect(typeof store).toBe('object')
|
||||
})
|
||||
|
||||
it('merges in state using `setState`', () => {
|
||||
const r = createStore()
|
||||
const store = new ReduxStore({ store: r })
|
||||
expect(store.getState()).toEqual({})
|
||||
|
||||
store.setState({
|
||||
a: 1,
|
||||
b: 2,
|
||||
})
|
||||
expect(store.getState()).toEqual({ a: 1, b: 2 })
|
||||
|
||||
store.setState({ b: 3 })
|
||||
expect(store.getState()).toEqual({ a: 1, b: 3 })
|
||||
})
|
||||
|
||||
it('notifies subscriptions when state changes', () => {
|
||||
let expected = []
|
||||
let calls = 0
|
||||
function listener(prevState, nextState, patch) {
|
||||
calls++
|
||||
expect([prevState, nextState, patch]).toEqual(expected)
|
||||
}
|
||||
|
||||
const r = createStore()
|
||||
const store = new ReduxStore({ store: r })
|
||||
store.subscribe(listener)
|
||||
|
||||
expected = [{}, { a: 1, b: 2 }, { a: 1, b: 2 }]
|
||||
store.setState({
|
||||
a: 1,
|
||||
b: 2,
|
||||
})
|
||||
|
||||
expected = [{ a: 1, b: 2 }, { a: 1, b: 3 }, { b: 3 }]
|
||||
store.setState({ b: 3 })
|
||||
|
||||
expect(calls).toBe(2)
|
||||
})
|
||||
|
||||
it('fires `subscribe` if state is modified externally (eg redux devtools)', () => {
|
||||
const combinedReducers = Redux.combineReducers({ uppy: reducer })
|
||||
const r = Redux.createStore((state, action) => {
|
||||
// Add a `SET` action that can change Uppy state without going through the Uppy reducer or action creator.
|
||||
// Emulates Redux Devtools.
|
||||
if (action.type === 'SET') return action.payload
|
||||
return combinedReducers(state, action)
|
||||
})
|
||||
|
||||
let expected = []
|
||||
let calls = 0
|
||||
function listener(prevState, nextState, patch) {
|
||||
calls++
|
||||
expect([prevState, nextState, patch]).toEqual(expected)
|
||||
}
|
||||
|
||||
const store = new ReduxStore({ store: r })
|
||||
store.subscribe(listener)
|
||||
|
||||
expected = [{}, { a: 1 }, { a: 1 }]
|
||||
store.setState({ a: 1 })
|
||||
|
||||
expected = [{ a: 1 }, { b: 2 }, { b: 2 }]
|
||||
// redux-devtools's `JUMP_TO_STATE` is similar to this.
|
||||
r.dispatch({
|
||||
type: 'SET',
|
||||
payload: {
|
||||
uppy: {
|
||||
[store[Symbol.for('uppy test: get id')]()]: { b: 2 },
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
expect(calls).toBe(2)
|
||||
})
|
||||
|
||||
it('can mount in a custom state key', () => {
|
||||
const combinedReducers = Redux.combineReducers({
|
||||
hello: reducer,
|
||||
})
|
||||
const r = Redux.createStore(combinedReducers)
|
||||
const store = new ReduxStore({
|
||||
store: r,
|
||||
id: 'world',
|
||||
selector: (state) => state.hello.world,
|
||||
})
|
||||
store.setState({ a: 1 })
|
||||
|
||||
expect(r.getState()).toEqual({
|
||||
hello: {
|
||||
world: {
|
||||
a: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"outDir": "./lib",
|
||||
"rootDir": "./src",
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["./src/**/*.*"],
|
||||
"exclude": ["./src/**/*.test.ts"]
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.shared",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["./package.json", "./src/**/*.*"]
|
||||
}
|
||||
|
|
@ -56,8 +56,6 @@
|
|||
"peerDependencies": {
|
||||
"@uppy/core": "workspace:^",
|
||||
"@uppy/dashboard": "workspace:^",
|
||||
"@uppy/drag-drop": "workspace:^",
|
||||
"@uppy/progress-bar": "workspace:^",
|
||||
"@uppy/status-bar": "workspace:^",
|
||||
"svelte": "^4.0.0 || ^5.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<script
|
||||
lang="ts"
|
||||
generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body"
|
||||
>
|
||||
import type { Uppy } from "@uppy/core";
|
||||
import DragDropPlugin from "@uppy/drag-drop";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
let container: HTMLElement;
|
||||
let plugin: DragDropPlugin<M, B>;
|
||||
|
||||
export let uppy: Uppy<M, B>;
|
||||
export const props: Object | undefined = {};
|
||||
|
||||
const installPlugin = () => {
|
||||
const options = {
|
||||
id: "svelte:DragDrop",
|
||||
inline: true,
|
||||
...props,
|
||||
target: container,
|
||||
};
|
||||
|
||||
uppy.use(DragDropPlugin, options);
|
||||
plugin = uppy.getPlugin(options.id) as DragDropPlugin<M, B>;
|
||||
};
|
||||
const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
|
||||
if (plugin != null) uppyInstance.removePlugin(plugin);
|
||||
};
|
||||
|
||||
onMount(() => installPlugin());
|
||||
|
||||
onDestroy(() => uninstallPlugin());
|
||||
$: {
|
||||
const options = {
|
||||
id: "svelte:DragDrop",
|
||||
...props,
|
||||
target: container,
|
||||
};
|
||||
uppy.setOptions(options);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="uppy-Container" bind:this={container}></div>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<script
|
||||
lang="ts"
|
||||
generics="M extends import('@uppy/utils/lib/UppyFile').Meta, B extends import('@uppy/utils/lib/UppyFile').Body"
|
||||
>
|
||||
import type { Uppy } from "@uppy/core";
|
||||
import ProgressBarPlugin from "@uppy/progress-bar";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
let container: HTMLElement;
|
||||
let plugin: ProgressBarPlugin<M, B>;
|
||||
|
||||
export let uppy: Uppy<M, B>;
|
||||
export const props: Object | undefined = {};
|
||||
|
||||
const installPlugin = () => {
|
||||
const options = {
|
||||
id: "svelte:ProgressBar",
|
||||
inline: true,
|
||||
...props,
|
||||
target: container,
|
||||
};
|
||||
|
||||
uppy.use(ProgressBarPlugin, options);
|
||||
plugin = uppy.getPlugin(options.id) as ProgressBarPlugin<M, B>;
|
||||
};
|
||||
const uninstallPlugin = (uppyInstance: Uppy<M, B> = uppy) => {
|
||||
if (plugin != null) uppyInstance.removePlugin(plugin);
|
||||
};
|
||||
|
||||
onMount(() => installPlugin());
|
||||
|
||||
onDestroy(() => uninstallPlugin());
|
||||
$: {
|
||||
const options = {
|
||||
id: "svelte:ProgressBar",
|
||||
...props,
|
||||
target: container,
|
||||
};
|
||||
uppy.setOptions(options);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="uppy-Container" bind:this={container}></div>
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
export { default as Dashboard } from "./components/Dashboard.svelte";
|
||||
export { default as DashboardModal } from "./components/DashboardModal.svelte";
|
||||
export { default as DragDrop } from "./components/DragDrop.svelte";
|
||||
export * from "./components/headless/generated/index.js";
|
||||
// Headless components
|
||||
export { default as UppyContextProvider } from "./components/headless/UppyContextProvider.svelte";
|
||||
export { default as ProgressBar } from "./components/ProgressBar.svelte";
|
||||
export { default as StatusBar } from "./components/StatusBar.svelte";
|
||||
|
||||
// Hooks
|
||||
|
|
|
|||
|
|
@ -22,9 +22,6 @@
|
|||
"peerDependencies": {
|
||||
"@uppy/core": "workspace:^",
|
||||
"@uppy/dashboard": "workspace:^",
|
||||
"@uppy/drag-drop": "workspace:^",
|
||||
"@uppy/file-input": "workspace:^",
|
||||
"@uppy/progress-bar": "workspace:^",
|
||||
"@uppy/status-bar": "workspace:^",
|
||||
"vue": ">=3.0.0"
|
||||
},
|
||||
|
|
@ -32,15 +29,6 @@
|
|||
"@uppy/dashboard": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/drag-drop": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/file-input": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/progress-bar": {
|
||||
"optional": true
|
||||
},
|
||||
"@uppy/status-bar": {
|
||||
"optional": true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
import { Uppy } from '@uppy/core'
|
||||
import DragDropPlugin, { type DragDropOptions } from '@uppy/drag-drop'
|
||||
import { defineComponent, h, type PropType, ref } from 'vue'
|
||||
import useUppy from './useUppy.js'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DragDrop',
|
||||
props: {
|
||||
uppy: {
|
||||
type: Uppy<any, any>,
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
type: Object as PropType<DragDropOptions>,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const containerRef = ref<string>()
|
||||
const pluginRef = ref<DragDropPlugin<any, any>>()
|
||||
const propsRef = ref(props.props)
|
||||
const onMount = () => {
|
||||
const { uppy } = props
|
||||
const options = {
|
||||
id: 'DragDrop',
|
||||
...props.props,
|
||||
target: containerRef.value,
|
||||
}
|
||||
uppy.use(DragDropPlugin, options)
|
||||
pluginRef.value = uppy.getPlugin(options.id) as DragDropPlugin<any, any>
|
||||
}
|
||||
|
||||
useUppy(onMount, pluginRef, props.uppy, propsRef)
|
||||
|
||||
return () =>
|
||||
h('div', {
|
||||
ref: containerRef,
|
||||
})
|
||||
},
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue