|
@@ -8,7 +8,7 @@ published: true
|
|
|
|
|
|
<img src="/images/blog/0.29/uppy-core-plugins-separate-styles.jpg">
|
|
<img src="/images/blog/0.29/uppy-core-plugins-separate-styles.jpg">
|
|
|
|
|
|
-`0.29` brings bug fixes and improvements, while we are busy working on Uppy React Native support (which is already [coming to our resumable file upload protocol tus.io](https://github.com/tus/tus-js-client#react-native-support)) and a Transloadit Preset. The highlights of this release are: separating Core and plugin styles, using file sizes for progress calculation, adding a `responseType` option for XHR Upload and fixing some visual Webcam bugs.
|
|
|
|
|
|
+`0.29` brings bug fixes and improvements, while we are busy working on Uppy React Native support (which first had to [land in the js client for our resumable file upload protocol: tus.io](https://github.com/tus/tus-js-client#react-native-support)) and a Preset (still debating the name) which will make it easier to leverage Transloadit's encoding platform, and offer a smooth migration path for users not on Uppy yet. The highlights of this release are: separating Core and Plugin styles, more accurate progress reporting by factoring in sizes across files, adding a `responseType` option for XHR Upload and fixing visual Webcam bugs.
|
|
|
|
|
|
<!--more-->
|
|
<!--more-->
|
|
|
|
|
|
@@ -16,7 +16,7 @@ published: true
|
|
|
|
|
|
**⚠️ breaking**
|
|
**⚠️ breaking**
|
|
|
|
|
|
-When installing `uppy` and plugins from npm, you had to include their styles. Prior to this release, you could include only the plugin’s CSS, say, for `@uppy/webcam`:
|
|
|
|
|
|
+When installing `uppy` and Plugins from npm, you had to include their styles. Prior to this release, you only had to include the Plugin’s CSS, say, for `@uppy/webcam`:
|
|
|
|
|
|
```js
|
|
```js
|
|
import Uppy from '@uppy/core'
|
|
import Uppy from '@uppy/core'
|
|
@@ -24,24 +24,24 @@ import Webcam from '@uppy/webcam'
|
|
import '@uppy/webcam/dist/style.css'
|
|
import '@uppy/webcam/dist/style.css'
|
|
```
|
|
```
|
|
|
|
|
|
-Each plugin's file contained the core styles. If you added multiple plugins, the core styles ended up being duplicated. This bloated file sizes and could even break styles entirely because of CSS's precedence rules.
|
|
|
|
|
|
+Each plugin's file contained the Core styles. If you added multiple plugins, the core styles ended up being duplicated. This bloated file sizes and could even break styles entirely because of CSS's precedence rules.
|
|
|
|
|
|
Now you have to include “general” styles from `@uppy/core` as well:
|
|
Now you have to include “general” styles from `@uppy/core` as well:
|
|
|
|
|
|
```js
|
|
```js
|
|
import Uppy from '@uppy/core'
|
|
import Uppy from '@uppy/core'
|
|
import Webcam from '@uppy/webcam'
|
|
import Webcam from '@uppy/webcam'
|
|
-import '@uppy/core/dist/style.css'
|
|
|
|
|
|
+import '@uppy/core/dist/style.css' // <-- add this separately and one time only
|
|
import '@uppy/webcam/dist/style.css'
|
|
import '@uppy/webcam/dist/style.css'
|
|
```
|
|
```
|
|
|
|
|
|
-Thus the core styles are only included once. `@uppy/core` styles must be included before plugin styles.
|
|
|
|
|
|
+Thus the Core styles are only included once. `@uppy/core` styles must be included before Plugin styles.
|
|
|
|
|
|
-Please [see documentation for the plugin](https://uppy.io/docs/plugins/) you are using to find out whether it requires a CSS file to work. Generally UI plugins, such as Dashboard, Webcam and Status Bar need a CSS file, while utility plugins, such as Tus or XHR Upload, don’t.
|
|
|
|
|
|
+Please [see documentation for the Plugin](https://uppy.io/docs/plugins/) you are using to find out whether it requires a CSS file to work. Generally speaking UI plugins, such as the Dashboard, Webcam and Status Bar need a CSS file, while utility plugins, such as Tus or XHR Upload, don’t.
|
|
|
|
|
|
⚠️ Important things to remember:
|
|
⚠️ Important things to remember:
|
|
|
|
|
|
-1. Dashboard is a universal UI that comes with Status Bar and Informer plugins built in, and as such Dashboard styles already come with Informer and Status Bar styles.
|
|
|
|
|
|
+1. Dashboard is a universal UI that comes with the Status Bar and Informer Plugins built in, and as such Dashboard styles already come with the Informer and Status Bar styles.
|
|
2. Dashboard also ships with “Remote Provider” styles — you don’t need to include anything besides `@uppy/dashboard/dist/style.css` for Google Drive, Instagram and Dropbox to work. However, Url and Webcam plugins, still have to be included manually. Here’s an example:
|
|
2. Dashboard also ships with “Remote Provider” styles — you don’t need to include anything besides `@uppy/dashboard/dist/style.css` for Google Drive, Instagram and Dropbox to work. However, Url and Webcam plugins, still have to be included manually. Here’s an example:
|
|
|
|
|
|
```js
|
|
```js
|
|
@@ -70,11 +70,11 @@ Some internal details, if you are interested:
|
|
|
|
|
|
<img src="/images/blog/0.29/progress-size-calculation.jpg">
|
|
<img src="/images/blog/0.29/progress-size-calculation.jpg">
|
|
|
|
|
|
-## responseType For XHR Upload
|
|
|
|
|
|
+## `responseType` For XHR Upload
|
|
|
|
|
|
-When using XHR Upload, you can now configure the XMLHttpRequest `.responseType` value. This allows the S3 plugin to tell Firefox not to log XML errors when getting empty responses, so it finally fixes the spurious warnings that were caused by this, see [#518](https://github.com/transloadit/uppy/issues/518).
|
|
|
|
|
|
+When using XHR Upload, you can now configure the XMLHttpRequest `.responseType` value. This allows the S3 Plugin to tell Firefox not to log XML errors when getting empty responses, so it finally fixes the spurious warnings that were caused by this, see [#518](https://github.com/transloadit/uppy/issues/518).
|
|
|
|
|
|
-Because AwsS3 now sets responseType: 'text', we can no longer use the responseXML property. We already did text based parsing for successful responses, and now do the same for error responses.
|
|
|
|
|
|
+Because AwsS3 now sets `responseType`: `'text'`, we can no longer use the `responseXML` property. We already did text based parsing for successful responses, and now do the same for error responses.
|
|
|
|
|
|
## Misc Changes
|
|
## Misc Changes
|
|
|
|
|
|
@@ -88,4 +88,4 @@ Because AwsS3 now sets responseType: 'text', we can no longer use the responseXM
|
|
- docs: Add `triggerUploadOnSubmit` to Form docs, add docs about options of hiding upload/pause/resume/cancel buttons; talk about bundler-less polyfill use (@goto-bus-stop, @arturi)
|
|
- docs: Add `triggerUploadOnSubmit` to Form docs, add docs about options of hiding upload/pause/resume/cancel buttons; talk about bundler-less polyfill use (@goto-bus-stop, @arturi)
|
|
- @uppy/react: Allow Dashboard props width and height to accept a string for 100% (#1129 / craigcbrunner)
|
|
- @uppy/react: Allow Dashboard props width and height to accept a string for 100% (#1129 / craigcbrunner)
|
|
|
|
|
|
-See [full changelog (0.29)](https://github.com/transloadit/uppy/blob/master/CHANGELOG.md#0290) for more details.
|
|
|
|
|
|
+See the [full changelog (0.29)](https://github.com/transloadit/uppy/blob/master/CHANGELOG.md#0290) for more details.
|