|
|
@@ -0,0 +1,75 @@
|
|
|
+---
|
|
|
+title: "Uppy 1.24: Happy Holidays"
|
|
|
+date: 2020-12-23
|
|
|
+author: renee
|
|
|
+image: "https://uppy.io/images/blog/1.23/vue-code-cover.png"
|
|
|
+published: false
|
|
|
+---
|
|
|
+
|
|
|
+Uppy 1.24 adds an experimental Svelte integration, additional React components, and a Norwegian (bokmål) translation!
|
|
|
+
|
|
|
+<!--more-->
|
|
|
+
|
|
|
+## Svelte
|
|
|
+
|
|
|
+Last month we introduced the first release of official Vue.js components for Uppy. This month, we're releasing `@uppy/svelte`: a set of components for the Svelte framework.
|
|
|
+
|
|
|
+```sh
|
|
|
+npm install @uppy/svelte
|
|
|
+```
|
|
|
+
|
|
|
+```html
|
|
|
+<main>
|
|
|
+ <Dashboard
|
|
|
+ uppy={uppy}
|
|
|
+ plugins={['Webcam']}
|
|
|
+ />
|
|
|
+</main>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Dashboard } from '@uppy/svelte'
|
|
|
+
|
|
|
+import Uppy from '@uppy/core'
|
|
|
+import Webcam from '@uppy/webcam'
|
|
|
+
|
|
|
+let uppy = new Uppy().use(Webcam)
|
|
|
+</script>
|
|
|
+```
|
|
|
+
|
|
|
+Please see [the documentation](https://uppy.io/docs/svelte/) for all the components.
|
|
|
+
|
|
|
+## React
|
|
|
+
|
|
|
+The `@uppy/react` package now contains `<FileInput />`, a wrapper for the `@uppy/file-input` plugin. It can render simple HTML file input or button, for situations where a flashy user interface is not desired.
|
|
|
+
|
|
|
+Additionally, `useUppy()` is our first React Hook, made to manage the lifecycle of Uppy instances. Without this, it's easy to accidentally create many garbage Uppy instances in modern React code.
|
|
|
+
|
|
|
+```js
|
|
|
+import { FileInput, useUppy } from '@uppy/react'
|
|
|
+import Uppy from '@uppy/core'
|
|
|
+import Tus from '@uppy/tus'
|
|
|
+
|
|
|
+function MyUploader () {
|
|
|
+ const uppy = useUppy(() => {
|
|
|
+ return new Uppy()
|
|
|
+ .use(Tus, { endpoint: 'https://tusd.tusdemo.net' })
|
|
|
+ })
|
|
|
+
|
|
|
+ // useUppy() will automatically `.close()` the Uppy instance for us when
|
|
|
+ // MyUploader unmounts.
|
|
|
+
|
|
|
+ return (
|
|
|
+ <FileInput uppy={uppy} />
|
|
|
+ )
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+This does not solve all our problems yet: dynamic configuration is still difficult to do right, due to the mismatch between React's declarative and Uppy's imperative style. We hope to add more documentation and tools to bridge the gap in the new year.
|
|
|
+
|
|
|
+## Locales
|
|
|
+
|
|
|
+[@elkebab](https://github.com/elkebab) contributed a Norwegian translation!
|
|
|
+
|
|
|
+## Happy Holidays!
|
|
|
+
|
|
|
+Many thanks to all our contributors and users over the past year! We hope to see you again soon in our first release of 2021 :)
|
Renée Kooi