|
|
@@ -2,6 +2,7 @@
|
|
|
title: "Uppy 0.24: Refreshed Dashboard, StatusBar and Provider UI, revamped XHR Response Handling"
|
|
|
date: 2018-04-17
|
|
|
author: arturi
|
|
|
+image: "https://uppy.io/images/blog/0.24/uppy-screenshot.jpg"
|
|
|
published: false
|
|
|
---
|
|
|
|
|
|
@@ -29,7 +30,7 @@ Import from URL (Link):
|
|
|
|
|
|
<img class="border" src="/images/blog/0.24/import-from-url.jpg">
|
|
|
|
|
|
-And more, check out the Dashboard example page: https://uppy.io/examples/dashboard/.
|
|
|
+And more, check out the [Dashboard example page](https://uppy.io/examples/dashboard/).
|
|
|
|
|
|
## Better StatusBar
|
|
|
|
|
|
@@ -59,6 +60,21 @@ When the upload completes (regardless of whether it succeeded), a `response` key
|
|
|
getResponseData (responseText, response) { }
|
|
|
```
|
|
|
|
|
|
+Example: this is what the default JSON parsing implementation (which you can override looks like in `XHRUpload` plugin:
|
|
|
+
|
|
|
+```js
|
|
|
+getResponseData (responseText, response) {
|
|
|
+ let parsedResponse = {}
|
|
|
+ try {
|
|
|
+ parsedResponse = JSON.parse(responseText)
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+
|
|
|
+ return parsedResponse
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
The `responseText` is the XHR endpoint response as a string. For uploads from the user's device, `response` is the [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) object.
|
|
|
|
|
|
When uploading files from remote providers such as Dropbox or Instagram, Uppy Server sends upload response data to the client. This is made available in the `getResponseData()` option as well. The `response` object from Uppy Server contains some properties named after their [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) counterparts:
|
|
|
@@ -74,15 +90,15 @@ Uppy is provided for the world for free by the [Transloadit](https://transloadit
|
|
|
|
|
|
This is entirely optional of course, just set `proudlyDisplayPoweredByUppy: false` option if you do not wish to display Uppy logo.
|
|
|
|
|
|
-## Misc Good Stuff
|
|
|
+## Other Fixes & Improvements
|
|
|
|
|
|
-- ⚠️ **breaking** `addFile()`, `onBeforeFileAdded()` and `onBeforeUpload()` are now synchronous, please see check out the update docs: [onBeforeFileAdded()](https://uppy.io/docs/uppy/#onBeforeFileAdded) and [onBeforeUpload()](https://uppy.io/docs/uppy/#onBeforeUpload).
|
|
|
-- ⚠️ **breaking** most event now emit the whole file object instead of a fileId.
|
|
|
+- ⚠️ **breaking** `addFile()`, `onBeforeFileAdded()` and `onBeforeUpload()` are now synchronous and have to return nothing or file objects to proceed, or false to abort; please check out the update docs for details: [onBeforeFileAdded()](https://uppy.io/docs/uppy/#onBeforeFileAdded) and [onBeforeUpload()](https://uppy.io/docs/uppy/#onBeforeUpload).
|
|
|
+- ⚠️ **breaking** Most event now emit the whole `file` object instead of a `fileId`. So you can access `file.name` right away, for example, without having to fish the file using its id first, like before.
|
|
|
- ⚠️ **breaking** We’ve added `postcss-safe-important` to out style build step, so now 90% of rules got `!important` declaration added to them. This is done to prevent page styles (especially global like Bootstrap) from leaking into the Uppy widget. There are other solutions we are looking into, like iFrames and WebComponents, this is an experiment. Keep in mind that to override Uppy styles, you now have to also use `!important`.
|
|
|
-- dashboard: ⚠️ **breaking** `maxWidth`, `maxHeight` --> `width` and `height`; update docs and React props too; regardless of what we call those internally, this makes more sense, I think (@arturi)
|
|
|
-- There’s now an option `showLinkToFileUploadResult: true` to disable linking to the upload result in Dashboard UI.
|
|
|
-- We are now using the image time and date as a file name in Instagram.
|
|
|
-- URL plugin checks for http(s) protocol, and add http by default if no protocol is present.
|
|
|
+- dashboard: ⚠️ **breaking** `maxWidth`, `maxHeight` options have been converted to `width` and `height`, because this makes more sense, `maxWidth` and `maxHeight` are actually `100%`.
|
|
|
+- There is now an option `showLinkToFileUploadResult: true` to disable linking to the upload result in Dashboard UI.
|
|
|
+- We are now using the image time and date as a file name in Instagram, instead of a generic file id.
|
|
|
+- URL plugin now checks for http(s) protocol, and add http by default if no protocol is present.
|
|
|
- It’s now possible to override `<DashboardModal />` React component’s target prop.
|
|
|
- Provider views now have `showFilter` and `showBreadcrumbs` options, those are off for Instagram plugin, for example.
|
|
|
- Uppy Server to Client communication has been refactored into `Provider` and `Request` modules. Request can be used when a simple request needs to be made to Uppy Server, like in URL plugin, for example. Provider is used for more complex implementations shared between Google Drive and Instagram, for example.
|
|
|
@@ -110,3 +126,5 @@ Other non security improvements are:
|
|
|
- We implemented a more standard logger for Uppy Server
|
|
|
- Added an example project to run Uppy Server on Serverless, [see](https://github.com/transloadit/uppy-server/tree/master/examples/serverless).
|
|
|
|
|
|
+The Uppy Team
|
|
|
+
|
Artur Paikin