|
@@ -0,0 +1,109 @@
|
|
|
+---
|
|
|
+title: "Uppy 0.14: Responsive Dashboard, Standalone & Pluggable Server, Dropbox"
|
|
|
+date: 2017-02-07
|
|
|
+author: arturi
|
|
|
+published: false
|
|
|
+---
|
|
|
+
|
|
|
+ !!!! published: true
|
|
|
+
|
|
|
+Hi! Hope ya all’ve had great holidays 🎄 We have a gift for you too, and it’s wrapped in a package (npm). Uppy 0.14 is here! ‘But wait’, you might ask, ‘where is the 0.13 that we’ve been waiting for’? Well, we are superstitious like that, plus it was holiday time. So we’ve decided to call 0.13 ‘The Release That Wasn’t’ and not release it.
|
|
|
+
|
|
|
+## Major Uppy Server updates
|
|
|
+
|
|
|
+**Express.js**
|
|
|
+We’ve switched to Express from Koa. It’s more widely adopted and supported, has larger community and better maintained packages, so we went for it.
|
|
|
+
|
|
|
+**Pluggable or standalone**
|
|
|
+Uppy Server can now be plugged into your existing Express/Koa server app or run standalone.
|
|
|
+
|
|
|
+**Smooth authentication**
|
|
|
+It used to be that when you clicked that stylish “authenticate” [with Google Drive] button, you were taken away from the page, and things got lost. Now it’s all silky smooth: you are taken to with the provider, be it Google Drive, Dropbox or whatever, to authenticate in a new tab. Then said tab is magically closed, and you are back where you were, authenticated, with all your remote files at hand.
|
|
|
+
|
|
|
+<img class="border" src="/images/blog/0.14/smooth-auth.png">
|
|
|
+
|
|
|
+**Dropbox plugin**
|
|
|
+Dropbox support made it into Uppy this release! 🎉 Ife rocks like that. (Shoutout to Harry for the initial work on Uppy Server and Google Drive plugin!) [Try it out](https://uppy.io/examples/dashboard/).
|
|
|
+
|
|
|
+<img class="border" src="/images/blog/0.14/uppy-dropbox.png">
|
|
|
+
|
|
|
+What’s more, the client side code of Google Drive and Dropbox plugins is slowly being refactored into a generic provider view that can be shared among all services.
|
|
|
+
|
|
|
+## Dashboard
|
|
|
+
|
|
|
+**Responsive UI and more icons**
|
|
|
+Dashboard now adapts itself to screen sizes big and small. That includes `inline` mode, where you can set `maxWidth` and `maxHeight` in options, like so:
|
|
|
+
|
|
|
+```js
|
|
|
+uppy.use(Dashboard, {
|
|
|
+ maxWidth: 300,
|
|
|
+ maxHeight: 350,
|
|
|
+ inline: true,
|
|
|
+ target: '#myUploadContainer'
|
|
|
+})
|
|
|
+```
|
|
|
+
|
|
|
+~~Or let it stretch to the size of the container.~~
|
|
|
+
|
|
|
+We are not using media queries here, but instead adding a `UppyDashboard--wide` CSS class, which allows for more flexibility — your file uploading widget can be tiny even if the screen is large.
|
|
|
+
|
|
|
+When the available space is small, the file grid view that you are used to turns into a new compact list view.
|
|
|
+
|
|
|
+<figure class="wide"><img src="/images/blog/0.14/dashboard-grid-list.jpg"></figure>
|
|
|
+
|
|
|
+We are also adding more file type icons and trying to get smarter about detecting them. Meet new video, audio, text, and PDF icons.
|
|
|
+
|
|
|
+**Total / uploaded sizes**
|
|
|
+Total and uploaded sizes have been added to the StatusBar, so you and your users can keep track of those bits and bytes.
|
|
|
+
|
|
|
+<img src="/images/blog/0.14/statusbar-uploaded-total-size.png">
|
|
|
+
|
|
|
+<!-- more -->
|
|
|
+
|
|
|
+## Per plugin locale settings
|
|
|
+
|
|
|
+We’ve moved locale settings to plugins from core. So now you can do this:
|
|
|
+
|
|
|
+```js
|
|
|
+uppy.use(DragDrop, {target: '.drop', locale: {
|
|
|
+ strings: {
|
|
|
+ chooseFile: 'Valitse tiedoston',
|
|
|
+ orDragDrop: 'tai siirtää tänne',
|
|
|
+ }
|
|
|
+}})
|
|
|
+```
|
|
|
+
|
|
|
+<img src="/images/blog/0.14/dnd-fi.png">
|
|
|
+
|
|
|
+And just like that, your Drag&Drop plugin now speaks Finnish! By default each UI plugin ships with an English locale and falls back to it if some strings are missing from your translation. This feature is a WIP, we are still trying to find the sweet spot between bundling a whole bunch of strings that might not get used and making you choose or set language per each UI plugin. Let us know what you think.
|
|
|
+
|
|
|
+## Misc
|
|
|
+
|
|
|
+- [yo-yoify](https://www.npmjs.com/package/yo-yoify) has been added to our build setup to solve [Function.caller / strict mode issue](https://github.com/shama/bel#note) and make the app faster/smaller by transforming template strings into pure and fast document calls.
|
|
|
+- By the way, Uppy’s UI DOM has been and is powered by [yo-yo](https://www.npmjs.com/package/yo-yo). We like it cause it’s simple, fast and tiny, but sometimes there are issues, one of them being the lack of wide adoption. We are looking at [Preact](https://preactjs.com/), but also excited about [Nanocomponent](https://github.com/yoshuawuyts/nanocomponent).
|
|
|
+- We’ve fixed progress events not being properly sent from Uppy Server. Turns out, its was because server uploads happened too fast, before the client was actually able to connect to the server :scream: Guess that’s a good problem to solve.
|
|
|
+
|
|
|
+## Release Notes
|
|
|
+
|
|
|
+Here is the full list of changes for version 0.14:
|
|
|
+
|
|
|
+- dashboard: use `isWide` prop/class instead of media queries, so that compact/mobile version can be used in bigger screens too (@arturi)
|
|
|
+- dashboard: basic “list” view in addition to current “grid” view (@arturi)
|
|
|
+- dashboard: more icons for file types (@arturi)
|
|
|
+- dashboard: add totalSize and totalUploadedSize to StatusBar (@arturi)
|
|
|
+- dashboard: figure out where to place Informer, accounting for StatusBar — over the StatusBar for now (@arturi)
|
|
|
+- dashboard: add `<progress>` element for progressbar, like here https://overcast.fm/+BtuxMygVg/. Added hidden for now, for semantics/accessibility (@arturi)
|
|
|
+- dragdrop: show number of selected files, remove upload btn (@arturi)
|
|
|
+- build: exclude locales from build (@arturi)
|
|
|
+- core: i18n for each plugin in options — local instead of global (@arturi)
|
|
|
+- core: add default pluralization (can be overrinden in plugin options) to Translator (@arturi)
|
|
|
+- core: use yo-yoify to solve [Function.caller / strict mode issue](https://github.com/shama/bel#note) and make our app faster/smaller by transforming template strings into pure and fast document calls (@arturi)
|
|
|
+- server: a pluggable uppy-server (express / koa for now) (@ifedapoolarewaju)
|
|
|
+- server: standalone uppy-server (@ifedapoolarewaju)
|
|
|
+- server: Integrate dropbox plugin (@ifedapoolarewaju)
|
|
|
+- server: smooth authentication: after auth you are back in your app where you left, no page reloads (@ifedapoolarewaju)
|
|
|
+- tus: fix upload progress from uppy-server (@arturi, @ifedapoolarewaju)
|
|
|
+- core: basic React component — DnD (@arturi)
|
|
|
+- core: fix support for both ES6 module import and CommonJS requires with `add-module-exports` babel plugin (@arturi)
|
|
|
+
|
|
|
+The Uppy Team
|