0.22 post draft

website/src/_posts/2017-12-0.22.md

@@ -0,0 +1,141 @@
+---
+title: "Uppy 0.22: Preact, Form, Improved Dashboard, Custom Stores"
+date: 2017-12-23
+author: arturi
+published: false
+---
+
+Hi all! It’s New Year and Christmas time, and this year Santa is brining you Uppy `0.22` 🎁 This release packs a lot of neat stuff, but it also breaks things in quite a few places, so please read on. 
+
+And, if you are celebrating, happy holidays from the Uppy Team! 🎄
+
+## Preact and JSX
+
+We’ve been happy using `yo-yo` and `hyperx` template strings in our views for quite a while, but decided to try something more stable. Preact has most of the great ideas of React, plus smaller file size as well as a few good ideas of its own.
+
+All views have been refactored to utilize JSX. We actually liked hyperx a lot, but JSX has better tooling and syntax highlighting support. It also seems to be the standard in the React community.
+
+See [#451 PR](https://github.com/transloadit/uppy/pull/451) for details on why we switched and discussion around the process.
+
+## Core and plugins refactor
+
+- **⚠️ Breaking** We’ve renamed calls to `core` to `uppy` in plugins. So instead of `this.core.state` we now use `this.uppy.state`.
+- **⚠️ Breaking** Events have been renamed to remove `core:` prefix. So `core:success` becomes just `success`, and so does `error`, `upload-started` and so on. Prefixed event names are used for plugin-specific event sometimes, like `dashboard:file-card`.
+- **⚠️ Breaking** CSS class names have been altered to use `uppy-` namespace, so `.UppyDashboard-files` becomes `.uppy-Dashboard-files` and so on.
+- **⚠️ Breaking** `getMetaFromForm` was deprecated in favor of new `Form` plugin (see below).
+- Plugins now use `this.el` to refer to their UI element instead of `this.target`.
+- `setPluginState` and `getPluginState` are now used in Providers.
+
+## Refreshed Dashboard UI
+
+![Uppy Dashboard UI with 3 files selected](/images/blog/0.22/uppy-dashboard-updated.jpg)
+
+- File cards are simpler, we’ve removed the excess white backgrounds, improved the remove icon, reduced paddings, added slight shadows.
+- Cicular upload button in the Dashboard has been moved to the StatusBar. It’s also not circular anymore, and there’s no cloud icon. Plain and simple.
+- Redesigned “retry” and “add +1 file” buttons.
+
+See [#434 PR](https://github.com/transloadit/uppy/pull/451) for more screenshots and details.
+
+## Select multiple files in providers
+
+...
+
+<!--more-->
+
+## Stores
+
+As you know, internally Uppy uses its own simple state management system with `getState` and `setState` methods. In previous releases we’ve added support for Redux via a plugin called `Redux`, which mirrors all Uppy state to your Redux application’s state, and a plugin called `ReduxDevTools` that connects to Redux DevTools and enables all the cool time traveling stuff.
+
+We are excited to tell you that this release makes state management even more flexible by bringing support for external stores! Here’s a quote from the docs:
+
+> By default, Uppy stores its internal state in an object.
+> If your app uses a state management library such as Redux, it can be useful to have Uppy store its state there instead—that way, you could write custom uploader UI components in the same way as the other components in the application.
+
+Here’s how that works:
+
+```js
+const { createStore } = require('redux')
+const ReduxStore = require('uppy/lib/store/ReduxStore')
+
+const reducer = combineReducers({
+  ...reducers,
+  uppy: ReduxStore.reducer
+})
+const store = createStore(reducer)
+
+const uppy = Uppy({
+  store: ReduxStore({
+    store: store // That's a lot of stores!
+  })
+})
+...
+```
+
+Now Uppy will use your app’s Redux store instead of its own, so you have a “single source of truth” 🔮
+
+Read [more on Uppy stores](https://uppy.io/docs/stores/) in docs.
+
+## Form
+
+`Form` is a new plugin that can be used in conjunction with any other. Here’s what it does: 
+
+1. Acquires metadata from a `<form>` element of your choosing before the upload starts in Uppy.
+2. Injects result array of succesful and failed files back into the form.
+
+**⚠️ Breaking** With this plugin we’ve deprecated `getMetaFromForm` option that used to be in all acquire plugins like Dashboard and DragDrop. Now you can just use `Form`.
+
+```js
+uppy.use(Form, {
+  target: '#my-form'
+})
+```
+
+Read [more about the Form plugin](https://uppy.io/docs/form/) in docs.
+
+## And there’s more
+
+- New `setFileState` method as a nice shorthand to update file-specific state.
+- Added more extensions for mimetype detection.
+- More plugin documentation 👍
+- Misc bugs fixes and improvements in Webcam, Dashboard, Provider, so things should be more stable all around.
+- Added an option to limit simultaneous uploads in XHRUpload.
+- Fixed remote server error handler for uppy-server.
+- Added [Snyk](https://snyk.io/) to uppy-server to aid vulnerability detection.  
+
+## Full Changelog
+
+Here is the full list of changes for version `0.22.0` (and patch `0.21.1`):
+
+- **⚠️ Breaking** core: rendering engine switched from `Yo-Yo` to `Preact`, and all views from `html` hyperx template strings to `JSX` (#451 / @arturi)
+- **⚠️ Breaking** core: large refactor of Core and Plugins: `setFileState`, merge `MetaData` plugin into `Dashboard`, prefix "private" core methods with underscores (@arturi / #438) 
+- **⚠️ Breaking** core: renamed `core` to `uppy` in plugins and what not. So instead of `this.core.state` we now use `this.uppy.state` (#438 / @arturi) 
+- **⚠️ Breaking** core: renamed events to remove `core:` prefix, as been suggested already. So: `success`, `error`, `upload-started` and so on, and prefixed event names for plugins sometimes, like `dashboard:file-card` (#438 / @arturi) 
+- **⚠️ Breaking** core: CSS class names have been altered to use `uppy-` namespace, so `.UppyDashboard-files` --> `.uppy-Dashboard-files` and so on
+- **⚠️ Breaking** dashboard: added `metaFields` option, pass an array of settings for UI field objects `{ id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }` (#438 / @arturi, @goto-bus-stop)
+- **⚠️ Breaking** core: deprecate `getMetaFromForm` in favor of new `Form` plugin (#407 / @arturi)
+- form: added `Form`, a new plugin that is used in conjunction with any acquirer, responsible for: 1. acquiring the metadata from `<form>` when upload starts in Uppy; 2. injecting result array of succesful and failed files back into the form (#407 / @arturi)
+- core: add more extensions for mimetype detection (#452 / @ifedapoolarewaju)
+- docs: more docs for plugins (#456 / @goto-bus-stop)
+- core: misc bugs fixes and improvements in Webcam, Dashboard, Provider and others (#451 / @arturi)
+- dashboard: improved Dashboard UI (@arturi)
+- uppy-server: remove pause/resume socket listeners when upload is done (@ifedapoolarewaju)
+- uppy/uppy-server: remote server error handler (#446 / @ifedapoolarewaju)
+- provider: fix dropbox thumbnail view (@ifedapoolarewaju)
+- uppy-server: link uppy-server with https://snyk.io/ to aid vulnerability spotting (@ifedapoolarewaju)
+- **⚠️ Breaking** core: Set `this.el` in `Plugin` class (#425 / @arturi)
+- StatusBar, Dashboard and Provider UI improvements place upload button into StatusBar, use Alex’s suggestions for retry button; other UI tweaks (#434 / @arturi)
+- XHRUpload: fix fields in XHR remote uploader (#424 / @sadovnychyi)
+- XHRUpload: option to limit simultaneous uploads #360 (#427 / goto-bus-stop)
+- core: Add `isSupported()` API for providers (#421 / @goto-bus-stop, @arturi)
+- core: Add stores. Improve on Redux PR #216 to allow using Redux (or any other solution) for all Uppy state management, instead of proxy-only (#426 / @goto-bus-stop)
+- core: add ability to disable thumbnail generation (#432 / @richardwillars)
+- core: allow to select multiple files at once from remote providers (#419 / @sadovnychyi)
+- core: use `setPluginState` and `getPluginState` in Providers (#436 / @arturi)
+- docs: uppy-server docs for s3 `getKey` option (#444 / @goto-bus-stop)
+- goldenretriever: Fix IndexedDB store initialisation when not cleaning up (#430 / @goto-bus-stop)
+- provider: folder deselection did not remove all files (#439 / @ifedapoolarewaju)
+- s3: Use Translator for localised strings (420 / @goto-bus-stop )
+- transloadit: Port old tests from tape (#428 / @goto-bus-stop)
+- tus: Restore correctly from paused state (#443 / @goto-bus-stop)
+
+The Uppy Team