diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b32620a3..19dc8b03e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -106,9 +106,9 @@ What we need to do to release Uppy 1.0 # next -## 0.29.0 +## 0.30.0 -- [ ] add polyfils to uppy bundle and a note about that in uppy readme.md +- [ ] add polyfils to uppy bundle - [ ] dashboard: allow minimizing the Dashboard during upload (Uppy then becomes just a tiny progress indicator) (@arturi) - [ ] core: customizing metadata fields, boolean metadata; see #809, #454 and related (@arturi) - [ ] goldenretriever: confirmation before restore, add “ghost” files #443 #257 (@arturi) @@ -122,6 +122,39 @@ What we need to do to release Uppy 1.0 - [ ] server: bump minor and deprecate that on npm in favour of @uppy/companion (@ifedapoolarewaju) - [ ] companion: rename `serverUrl` and `serverPattern` to `companionUrl` and `companionAllowedHosts` (@ifedapoolarewaju) +## 0.29.0 + +| Package | Version | Package | Version | +|-|-|-|-| +| @uppy/aws-s3-multipart | 0.29.0 | @uppy/progress-bar | 0.29.0 | +| @uppy/aws-s3 | 0.29.0 | @uppy/provider-views | 0.29.0 | +| @uppy/companion | 0.16.0 | @uppy/react | 0.29.0 | +| @uppy/core | 0.29.0 | @uppy/redux-dev-tools | 0.29.0 | +| @uppy/dashboard | 0.29.0 | @uppy/status-bar | 0.29.0 | +| @uppy/drag-drop | 0.29.0 | @uppy/thumbnail-generator | 0.29.0 | +| @uppy/dropbox | 0.29.0 | @uppy/transloadit | 0.29.0 | +| @uppy/file-input | 0.29.0 | @uppy/tus | 0.29.0 | +| @uppy/form | 0.29.0 | @uppy/url | 0.29.0 | +| @uppy/golden-retriever | 0.29.0 | @uppy/utils | 0.29.0 | +| @uppy/google-drive | 0.29.0 | @uppy/webcam | 0.29.0 | +| @uppy/informer | 0.29.0 | @uppy/xhr-upload | 0.29.0 | +| @uppy/instagram | 0.29.0 | uppy | 0.29.0 | + +- @uppy/core: ⚠️ **breaking** Separate Core and Plugin styles — @uppy/core styles and plugins (@uppy/webcam, for example) now have to be included separately (#1167 / @arturi) +- @uppy/core: Don't pass removed file IDs to next upload step, fixes (#1148 / @goto-bus-stop) +- @uppy/core: Fixed getFileType() when passed a file with an upper case extension (#1169 / @jderrough) +- @uppy/xhr-upload: Add `responseType` option — allows configuring the XMLHttpRequest `.responseType` value (#1150 / @goto-bus-stop) +- @uppy/companion: Use `createCipheriv` instead of deprecated `createCipher` (#1149 / @goto-bus-stop) +- @uppy/companion: Store Provider instances on `this.provider` instead of `this[this.id]` (@goto-bus-stop / #1174) +- @uppy/companion: Pin grant to known stable version (@ifedapoolarewaju / #1165) +- @uppy/companion: Fix — socket does not handle server.path option (#1142 / @tranvansang) +- @uppy/status-bar: Use file sizes for progress calculations (#1153 / @goto-bus-stop) +- @uppy/webcam: Fix a bug with Webcam video overflowing its container (68730f8a1bf731898d46883e00fed937d3ab54ab / @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/dashboard: Better center pause/resume/cancel icons (@arturi / 5112ecf1f48bec9c67309244120fce5f005241ce) +- @uppy/react: Allow Dashboard props width and height to accept a string for 100% (#1129 / craigcbrunner) +- Added note about uppy bundle polyfils in uppy readme.md (@goto-bus-stop) + ## 0.28.0 | Package | Version | Package | Version | diff --git a/LICENSE b/LICENSE index c23747330..867fa0de5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2018 Transloadit +Copyright (c) 2018 Transloadit (https://transloadit.com) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 53c85d8e4..374034fc5 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ $ npm install @uppy/core @uppy/dashboard @uppy/tus We recommend installing from npm and then using a module bundler such as [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/) or [Rollup.js](http://rollupjs.org/). -Add CSS [uppy.min.css](https://transloadit.edgly.net/releases/uppy/v0.28.0/dist/uppy.min.css), either to `` of your HTML page or include in JS, if your bundler of choice supports it — transforms and plugins are available for Browserify and Webpack. +Add CSS [uppy.min.css](https://transloadit.edgly.net/releases/uppy/v0.29.0/dist/uppy.min.css), either to `` of your HTML page or include in JS, if your bundler of choice supports it — transforms and plugins are available for Browserify and Webpack. Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly. In that case `Uppy` will attach itself to the global `window.Uppy` object. @@ -73,10 +73,10 @@ Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly ```html - + - +
@@ -163,7 +163,7 @@ If you're using Uppy via a script tag, you can load the polyfills from [JSDelivr ```html - + ``` ## FAQ @@ -228,53 +228,57 @@ Use Uppy in your project? [Let us know](https://github.com/transloadit/uppy/issu :---: |:---: |:---: |:---: |:---: |:---: | [kiloreux](https://github.com/kiloreux) |[sadovnychyi](https://github.com/sadovnychyi) |[richardwillars](https://github.com/richardwillars) |[zcallan](https://github.com/zcallan) |[wilkoklak](https://github.com/wilkoklak) |[oliverpool](https://github.com/oliverpool) | -[nqst](https://github.com/nqst) |[janko-m](https://github.com/janko-m) |[DJWassink](https://github.com/DJWassink) |[taoqf](https://github.com/taoqf) |[bertho-zero](https://github.com/bertho-zero) |[frederikhors](https://github.com/frederikhors) | +[nqst](https://github.com/nqst) |[janko-m](https://github.com/janko-m) |[DJWassink](https://github.com/DJWassink) |[taoqf](https://github.com/taoqf) |[gavboulton](https://github.com/gavboulton) |[bertho-zero](https://github.com/bertho-zero) | :---: |:---: |:---: |:---: |:---: |:---: | -[nqst](https://github.com/nqst) |[janko-m](https://github.com/janko-m) |[DJWassink](https://github.com/DJWassink) |[taoqf](https://github.com/taoqf) |[bertho-zero](https://github.com/bertho-zero) |[frederikhors](https://github.com/frederikhors) | +[nqst](https://github.com/nqst) |[janko-m](https://github.com/janko-m) |[DJWassink](https://github.com/DJWassink) |[taoqf](https://github.com/taoqf) |[gavboulton](https://github.com/gavboulton) |[bertho-zero](https://github.com/bertho-zero) | -[pauln](https://github.com/pauln) |[toadkicker](https://github.com/toadkicker) |[gavboulton](https://github.com/gavboulton) |[ogtfaber](https://github.com/ogtfaber) |[mrbatista](https://github.com/mrbatista) |[sunil-shrestha](https://github.com/sunil-shrestha) | +[frederikhors](https://github.com/frederikhors) |[pauln](https://github.com/pauln) |[toadkicker](https://github.com/toadkicker) |[mrbatista](https://github.com/mrbatista) |[phitranphitranphitran](https://github.com/phitranphitranphitran) |[sunil-shrestha](https://github.com/sunil-shrestha) | :---: |:---: |:---: |:---: |:---: |:---: | -[pauln](https://github.com/pauln) |[toadkicker](https://github.com/toadkicker) |[gavboulton](https://github.com/gavboulton) |[ogtfaber](https://github.com/ogtfaber) |[mrbatista](https://github.com/mrbatista) |[sunil-shrestha](https://github.com/sunil-shrestha) | +[frederikhors](https://github.com/frederikhors) |[pauln](https://github.com/pauln) |[toadkicker](https://github.com/toadkicker) |[mrbatista](https://github.com/mrbatista) |[phitranphitranphitran](https://github.com/phitranphitranphitran) |[sunil-shrestha](https://github.com/sunil-shrestha) | -[ap--](https://github.com/ap--) |[tim-kos](https://github.com/tim-kos) |[phitranphitranphitran](https://github.com/phitranphitranphitran) |[rosenfeld](https://github.com/rosenfeld) |[Burkes](https://github.com/Burkes) |[Martin005](https://github.com/Martin005) | +[tranvansang](https://github.com/tranvansang) |[ap--](https://github.com/ap--) |[tim-kos](https://github.com/tim-kos) |[ogtfaber](https://github.com/ogtfaber) |[btrice](https://github.com/btrice) |[pekala](https://github.com/pekala) | :---: |:---: |:---: |:---: |:---: |:---: | -[ap--](https://github.com/ap--) |[tim-kos](https://github.com/tim-kos) |[phitranphitranphitran](https://github.com/phitranphitranphitran) |[rosenfeld](https://github.com/rosenfeld) |[Burkes](https://github.com/Burkes) |[Martin005](https://github.com/Martin005) | +[tranvansang](https://github.com/tranvansang) |[ap--](https://github.com/ap--) |[tim-kos](https://github.com/tim-kos) |[ogtfaber](https://github.com/ogtfaber) |[btrice](https://github.com/btrice) |[pekala](https://github.com/pekala) | -[btrice](https://github.com/btrice) |[richartkeil](https://github.com/richartkeil) |[richmeij](https://github.com/richmeij) |[pekala](https://github.com/pekala) |[ThomasG77](https://github.com/ThomasG77) |[zhuangya](https://github.com/zhuangya) | +[Martin005](https://github.com/Martin005) |[martiuslim](https://github.com/martiuslim) |[msand](https://github.com/msand) |[richartkeil](https://github.com/richartkeil) |[Burkes](https://github.com/Burkes) |[rosenfeld](https://github.com/rosenfeld) | :---: |:---: |:---: |:---: |:---: |:---: | -[btrice](https://github.com/btrice) |[richartkeil](https://github.com/richartkeil) |[richmeij](https://github.com/richmeij) |[pekala](https://github.com/pekala) |[ThomasG77](https://github.com/ThomasG77) |[zhuangya](https://github.com/zhuangya) | +[Martin005](https://github.com/Martin005) |[martiuslim](https://github.com/martiuslim) |[msand](https://github.com/msand) |[richartkeil](https://github.com/richartkeil) |[Burkes](https://github.com/Burkes) |[rosenfeld](https://github.com/rosenfeld) | -[fortrieb](https://github.com/fortrieb) |[muhammadInam](https://github.com/muhammadInam) |[martiuslim](https://github.com/martiuslim) |[ajschmidt8](https://github.com/ajschmidt8) |[asmt3](https://github.com/asmt3) |[tuoxiansp](https://github.com/tuoxiansp) | +[ThomasG77](https://github.com/ThomasG77) |[zhuangya](https://github.com/zhuangya) |[fortrieb](https://github.com/fortrieb) |[muhammadInam](https://github.com/muhammadInam) |[richmeij](https://github.com/richmeij) |[ajschmidt8](https://github.com/ajschmidt8) | :---: |:---: |:---: |:---: |:---: |:---: | -[fortrieb](https://github.com/fortrieb) |[muhammadInam](https://github.com/muhammadInam) |[martiuslim](https://github.com/martiuslim) |[ajschmidt8](https://github.com/ajschmidt8) |[asmt3](https://github.com/asmt3) |[tuoxiansp](https://github.com/tuoxiansp) | +[ThomasG77](https://github.com/ThomasG77) |[zhuangya](https://github.com/zhuangya) |[fortrieb](https://github.com/fortrieb) |[muhammadInam](https://github.com/muhammadInam) |[richmeij](https://github.com/richmeij) |[ajschmidt8](https://github.com/ajschmidt8) | -[functino](https://github.com/functino) |[radarhere](https://github.com/radarhere) |[azeemba](https://github.com/azeemba) |[bducharme](https://github.com/bducharme) |[chao](https://github.com/chao) |[csprance](https://github.com/csprance) | +[asmt3](https://github.com/asmt3) |[tuoxiansp](https://github.com/tuoxiansp) |[functino](https://github.com/functino) |[radarhere](https://github.com/radarhere) |[azeemba](https://github.com/azeemba) |[bducharme](https://github.com/bducharme) | :---: |:---: |:---: |:---: |:---: |:---: | -[functino](https://github.com/functino) |[radarhere](https://github.com/radarhere) |[azeemba](https://github.com/azeemba) |[bducharme](https://github.com/bducharme) |[chao](https://github.com/chao) |[csprance](https://github.com/csprance) | +[asmt3](https://github.com/asmt3) |[tuoxiansp](https://github.com/tuoxiansp) |[functino](https://github.com/functino) |[radarhere](https://github.com/radarhere) |[azeemba](https://github.com/azeemba) |[bducharme](https://github.com/bducharme) | -[cbush06](https://github.com/cbush06) |[danmichaelo](https://github.com/danmichaelo) |[mrboomer](https://github.com/mrboomer) |[yoldar](https://github.com/yoldar) |[lowsprofile](https://github.com/lowsprofile) |[FWirtz](https://github.com/FWirtz) | +[chao](https://github.com/chao) |[csprance](https://github.com/csprance) |[cbush06](https://github.com/cbush06) |[danmichaelo](https://github.com/danmichaelo) |[mrboomer](https://github.com/mrboomer) |[yoldar](https://github.com/yoldar) | :---: |:---: |:---: |:---: |:---: |:---: | -[cbush06](https://github.com/cbush06) |[danmichaelo](https://github.com/danmichaelo) |[mrboomer](https://github.com/mrboomer) |[yoldar](https://github.com/yoldar) |[lowsprofile](https://github.com/lowsprofile) |[FWirtz](https://github.com/FWirtz) | +[chao](https://github.com/chao) |[csprance](https://github.com/csprance) |[cbush06](https://github.com/cbush06) |[danmichaelo](https://github.com/danmichaelo) |[mrboomer](https://github.com/mrboomer) |[yoldar](https://github.com/yoldar) | -[geoffappleford](https://github.com/geoffappleford) |[gjungb](https://github.com/gjungb) |[JacobMGEvans](https://github.com/JacobMGEvans) |[jcjmcclean](https://github.com/jcjmcclean) |[vith](https://github.com/vith) |[jessica-coursera](https://github.com/jessica-coursera) | +[lowsprofile](https://github.com/lowsprofile) |[FWirtz](https://github.com/FWirtz) |[geoffappleford](https://github.com/geoffappleford) |[gjungb](https://github.com/gjungb) |[JacobMGEvans](https://github.com/JacobMGEvans) |[jcjmcclean](https://github.com/jcjmcclean) | :---: |:---: |:---: |:---: |:---: |:---: | -[geoffappleford](https://github.com/geoffappleford) |[gjungb](https://github.com/gjungb) |[JacobMGEvans](https://github.com/JacobMGEvans) |[jcjmcclean](https://github.com/jcjmcclean) |[vith](https://github.com/vith) |[jessica-coursera](https://github.com/jessica-coursera) | +[lowsprofile](https://github.com/lowsprofile) |[FWirtz](https://github.com/FWirtz) |[geoffappleford](https://github.com/geoffappleford) |[gjungb](https://github.com/gjungb) |[JacobMGEvans](https://github.com/JacobMGEvans) |[jcjmcclean](https://github.com/jcjmcclean) | -[firesharkstudios](https://github.com/firesharkstudios) |[dviry](https://github.com/dviry) |[leods92](https://github.com/leods92) |[lucaperret](https://github.com/lucaperret) |[mperrando](https://github.com/mperrando) |[mnafees](https://github.com/mnafees) | +[vith](https://github.com/vith) |[jessica-coursera](https://github.com/jessica-coursera) |[jderrough](https://github.com/jderrough) |[firesharkstudios](https://github.com/firesharkstudios) |[dviry](https://github.com/dviry) |[leods92](https://github.com/leods92) | :---: |:---: |:---: |:---: |:---: |:---: | -[firesharkstudios](https://github.com/firesharkstudios) |[dviry](https://github.com/dviry) |[leods92](https://github.com/leods92) |[lucaperret](https://github.com/lucaperret) |[mperrando](https://github.com/mperrando) |[mnafees](https://github.com/mnafees) | +[vith](https://github.com/vith) |[jessica-coursera](https://github.com/jessica-coursera) |[jderrough](https://github.com/jderrough) |[firesharkstudios](https://github.com/firesharkstudios) |[dviry](https://github.com/dviry) |[leods92](https://github.com/leods92) | -[phillipalexander](https://github.com/phillipalexander) |[luarmr](https://github.com/luarmr) |[phobos101](https://github.com/phobos101) |[fortunto2](https://github.com/fortunto2) |[sergei-zelinsky](https://github.com/sergei-zelinsky) |[tomsaleeba](https://github.com/tomsaleeba) | +[lucaperret](https://github.com/lucaperret) |[mperrando](https://github.com/mperrando) |[mnafees](https://github.com/mnafees) |[phillipalexander](https://github.com/phillipalexander) |[luarmr](https://github.com/luarmr) |[phobos101](https://github.com/phobos101) | :---: |:---: |:---: |:---: |:---: |:---: | -[phillipalexander](https://github.com/phillipalexander) |[luarmr](https://github.com/luarmr) |[phobos101](https://github.com/phobos101) |[fortunto2](https://github.com/fortunto2) |[sergei-zelinsky](https://github.com/sergei-zelinsky) |[tomsaleeba](https://github.com/tomsaleeba) | +[lucaperret](https://github.com/lucaperret) |[mperrando](https://github.com/mperrando) |[mnafees](https://github.com/mnafees) |[phillipalexander](https://github.com/phillipalexander) |[luarmr](https://github.com/luarmr) |[phobos101](https://github.com/phobos101) | -[tranvansang](https://github.com/tranvansang) |[vially](https://github.com/vially) |[eltercero](https://github.com/eltercero) |[xhocquet](https://github.com/xhocquet) |[avalla](https://github.com/avalla) |[bartvde](https://github.com/bartvde) | +[fortunto2](https://github.com/fortunto2) |[sergei-zelinsky](https://github.com/sergei-zelinsky) |[tomsaleeba](https://github.com/tomsaleeba) |[vially](https://github.com/vially) |[eltercero](https://github.com/eltercero) |[xhocquet](https://github.com/xhocquet) | :---: |:---: |:---: |:---: |:---: |:---: | -[tranvansang](https://github.com/tranvansang) |[vially](https://github.com/vially) |[eltercero](https://github.com/eltercero) |[xhocquet](https://github.com/xhocquet) |[avalla](https://github.com/avalla) |[bartvde](https://github.com/bartvde) | +[fortunto2](https://github.com/fortunto2) |[sergei-zelinsky](https://github.com/sergei-zelinsky) |[tomsaleeba](https://github.com/tomsaleeba) |[vially](https://github.com/vially) |[eltercero](https://github.com/eltercero) |[xhocquet](https://github.com/xhocquet) | -[c0b41](https://github.com/c0b41) |[franckl](https://github.com/franckl) |[luntta](https://github.com/luntta) |[rhymes](https://github.com/rhymes) |[amitport](https://github.com/amitport) | -:---: |:---: |:---: |:---: |:---: | -[c0b41](https://github.com/c0b41) |[franckl](https://github.com/franckl) |[luntta](https://github.com/luntta) |[rhymes](https://github.com/rhymes) |[amitport](https://github.com/amitport) | +[avalla](https://github.com/avalla) |[bartvde](https://github.com/bartvde) |[c0b41](https://github.com/c0b41) |[craigcbrunner](https://github.com/craigcbrunner) |[franckl](https://github.com/franckl) |[luntta](https://github.com/luntta) | +:---: |:---: |:---: |:---: |:---: |:---: | +[avalla](https://github.com/avalla) |[bartvde](https://github.com/bartvde) |[c0b41](https://github.com/c0b41) |[craigcbrunner](https://github.com/craigcbrunner) |[franckl](https://github.com/franckl) |[luntta](https://github.com/luntta) | + +[rhymes](https://github.com/rhymes) |[amitport](https://github.com/amitport) | +:---: |:---: | +[rhymes](https://github.com/rhymes) |[amitport](https://github.com/amitport) | ## License diff --git a/bin/build-js.js b/bin/build-js.js index 745b85d70..10ce47d79 100644 --- a/bin/build-js.js +++ b/bin/build-js.js @@ -15,7 +15,7 @@ function handleErr (err) { } function buildUppyBundle (minify) { - var src = path.join(srcPath, 'index.js') + var src = path.join(srcPath, 'bundle.js') var bundleFile = minify ? 'uppy.min.js' : 'uppy.js' var b = browserify(src, { debug: true, standalone: 'Uppy' }) diff --git a/bin/release b/bin/release index 8c2e57938..95c708506 100755 --- a/bin/release +++ b/bin/release @@ -37,7 +37,7 @@ if ! which jq; then exit 1 fi -perm="$(npm profile get --json | jq .tfa.mode -r)" +perm="$(npm profile get --json | jq .tfa.mode? -r)" if [ "$perm" == "auth-and-writes" ]; then echo "Two-factor auth is enabled for publishing. This doesn't work well with lerna." echo "Temporarily switch to authentication-only 2FA using the link below:" diff --git a/bin/upload-to-cdn.sh b/bin/upload-to-cdn.sh index 31d668363..aff66390e 100755 --- a/bin/upload-to-cdn.sh +++ b/bin/upload-to-cdn.sh @@ -8,7 +8,7 @@ # - Checks if a tag is being built (on Travis - otherwise opts to continue execution regardless) # - Installs AWS CLI if needed # - Assumed a fully built uppy is in root dir (unless a specific tag was specified, then it's fetched from npm) -# - Runs npm pack, and stores files to e.g. https://transloadit.edgly.net/releases/uppy/v0.28.0/dist/uppy.css +# - Runs npm pack, and stores files to e.g. https://transloadit.edgly.net/releases/uppy/v0.29.0/dist/uppy.css # - Uses local package by default, if [version] argument was specified, takes package from npm # # Run as: diff --git a/examples/cdn-example/index.html b/examples/cdn-example/index.html index f7adf9db6..5f3896527 100644 --- a/examples/cdn-example/index.html +++ b/examples/cdn-example/index.html @@ -4,11 +4,11 @@ - + - + + + @@ -67,9 +67,14 @@ npm install @uppy/core @uppy/xhr-upload @uppy/dashboard ``` ```js +// Import the plugins const Uppy = require('@uppy/core') const XHRUpload = require('@uppy/xhr-upload') const Dashboard = require('@uppy/dashboard') + +// And their styles (for UI plugins) +require('@uppy/core/dist/style.css') +require('@uppy/dashboard/dist/style.css')   const uppy = Uppy() .use(Dashboard, { @@ -78,7 +83,7 @@ const uppy = Uppy() .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })   uppy.on('complete', (result) => { - console.log(`Upload complete! We’ve uploaded these files: ${result.successful}`) + console.log('Upload complete! We’ve uploaded these files:', result.successful) }) ``` @@ -107,12 +112,12 @@ You can also use a pre-built bundle from Transloadit's CDN: Edgly. `Uppy` will a 1\. Add a script at the bottom of the closing `` tag: ``` html - + ``` 2\. Add CSS to ``: ``` html - + ``` 3\. Initialize at the bottom of the closing `` tag: @@ -163,5 +168,5 @@ If you're using Uppy via a script tag, you can load the polyfills from [JSDelivr ```html - + ``` diff --git a/website/src/docs/informer.md b/website/src/docs/informer.md index cde357994..d801e0a5e 100644 --- a/website/src/docs/informer.md +++ b/website/src/docs/informer.md @@ -40,11 +40,16 @@ const Informer = Uppy.Informer ## CSS -The `@uppy/informer` plugin includes CSS a file for styling. If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Informer, because the Dashboard already includes it. +The `@uppy/informer` plugin requires the following CSS for styling: -The CSS file lives at `@uppy/informer/dist/style.css`. A minified version is at `@uppy/informer/dist/style.min.css`. +```js +import '@uppy/core/dist/style.css' +import '@uppy/informer/dist/style.css' +``` -Import one of these files into your project. The way to do this depends on your build system. +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/informer/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + +⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it. ## Options diff --git a/website/src/docs/instagram.md b/website/src/docs/instagram.md index cdff7e327..cd549d958 100644 --- a/website/src/docs/instagram.md +++ b/website/src/docs/instagram.md @@ -38,6 +38,12 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl const Instagram = Uppy.Instagram ``` +## CSS + +Dashboard plugin is recommended as a container to all Provider plugins, including Instagram. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well. + +⚠️ If you are feeling adventurous, and want to use Instagram plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommended. + ## Options The `@uppy/instagram` plugin has the following configurable options: diff --git a/website/src/docs/progressbar.md b/website/src/docs/progressbar.md index c821e7b6d..b74f06431 100644 --- a/website/src/docs/progressbar.md +++ b/website/src/docs/progressbar.md @@ -37,6 +37,19 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl const ProgressBar = Uppy.ProgressBar ``` +## CSS + +The `@uppy/progress-bar` plugin requires the following CSS for styling: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/progress-bar/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/progress-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + +⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it. + ## Options The `@uppy/progress-bar` plugin has the following configurable options: diff --git a/website/src/docs/providers.md b/website/src/docs/providers.md index ee2f2013d..67c7f8e10 100644 --- a/website/src/docs/providers.md +++ b/website/src/docs/providers.md @@ -37,3 +37,7 @@ uppy.use(Instagram, {target: Dashboard, serverUrl: 'http://localhost:3020'}) const Url = require('@uppy/url') uppy.use(Url, {target: Dashboard, serverUrl: 'http://localhost:3020'}) ``` + +⚠️ The [Dashboard](/docs/dashboard) plugin is recommended as a universal container to all Provider plugins. It also comes with file previews, progress reporting and more. If you are using the Dashboard, it already [comes with all the nessesary styles](/docs/dashboard/#CSS) and functionality for Providers to work well. + +If you are feeling adventurous, you can technically use a Provider plugin separately, without the Dashboard. Make sure to then include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. But this is experimental, not officialy supported and not recommended. diff --git a/website/src/docs/react-dashboard-modal.md b/website/src/docs/react-dashboard-modal.md index de9cce73f..cb445fcdf 100644 --- a/website/src/docs/react-dashboard-modal.md +++ b/website/src/docs/react-dashboard-modal.md @@ -20,8 +20,24 @@ import DashboardModal from '@uppy/react/lib/DashboardModal' import { DashboardModal } from '@uppy/react' ``` +## CSS + +The `DashboardModal` component requires the following CSS for styling: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + +⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin. + +Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well. + + ## Props On top of all the [`@uppy/dashboard`][] options, the `` plugin adds two additional props: diff --git a/website/src/docs/react-dashboard.md b/website/src/docs/react-dashboard.md index cbf0db3de..2b739a1a0 100644 --- a/website/src/docs/react-dashboard.md +++ b/website/src/docs/react-dashboard.md @@ -20,6 +20,21 @@ import Dashboard from '@uppy/react/lib/Dashboard' import { Dashboard } from '@uppy/react' ``` +## CSS + +The `Dashboard` component requires the following CSS for styling: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + +⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin. + +Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well. + ## Props The `` component supports all [`@uppy/dashboard`][] options as props. diff --git a/website/src/docs/react-dragdrop.md b/website/src/docs/react-dragdrop.md index 7b40327c4..f0511f8d9 100644 --- a/website/src/docs/react-dragdrop.md +++ b/website/src/docs/react-dragdrop.md @@ -21,6 +21,17 @@ import DragDrop from '@uppy/react/lib/DragDrop'; import { DragDrop } from '@uppy/react'; ``` +## CSS + +The `DragDrop` component includes some simple styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/drag-drop/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Drag & Drop styles from `@uppy/drag-drop/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + ## Props The `` component supports all [DragDrop][] options as props. diff --git a/website/src/docs/react-progressbar.md b/website/src/docs/react-progressbar.md index 5799931c2..da0d6852a 100644 --- a/website/src/docs/react-progressbar.md +++ b/website/src/docs/react-progressbar.md @@ -21,6 +21,17 @@ import ProgressBar from '@uppy/react/lib/ProgressBar' import { ProgressBar } from '@uppy/react' ``` +## CSS + +The `ProgressBar` plugin requires the following CSS for styling: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/progress-bar/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Progress Bar styles from `@uppy/progress-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + ## Props The `` component supports all [`@uppy/progress-bar`][] options as props. diff --git a/website/src/docs/react-statusbar.md b/website/src/docs/react-statusbar.md index 3d5a8449d..59c2dfd02 100644 --- a/website/src/docs/react-statusbar.md +++ b/website/src/docs/react-statusbar.md @@ -21,6 +21,17 @@ import StatusBar from '@uppy/react/lib/StatusBar' import { StatusBar } from '@uppy/react' ``` +## CSS + +The `StatusBar` component requires the following CSS for styling: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/status-bar/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Status Bar styles from `@uppy/status-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + ## Props The `` component supports all [`@uppy/status-bar`][] options as props. diff --git a/website/src/docs/react.md b/website/src/docs/react.md index f56115d77..e48a3dd6f 100644 --- a/website/src/docs/react.md +++ b/website/src/docs/react.md @@ -17,6 +17,10 @@ Install from NPM: npm install @uppy/react ``` +## CSS + +Make sure to also include the nessesary CSS files for each Uppy React component you are using. Follow links for individual components docs below for details on that. + ## Usage The components can be used with either [React][] or API-compatible alternatives such as [Preact][]. diff --git a/website/src/docs/statusbar.md b/website/src/docs/statusbar.md index c56e2e98f..8494ce0c1 100644 --- a/website/src/docs/statusbar.md +++ b/website/src/docs/statusbar.md @@ -38,11 +38,16 @@ const StatusBar = Uppy.StatusBar ## CSS -The `@uppy/status-bar` plugin includes a CSS file for styling. If you are using the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the StatusBar, because the Dashboard already includes it. +The `@uppy/status-bar` plugin requires the following CSS for styling: -The CSS file lives at `@uppy/status-bar/dist/style.css`. A minified version can be found at `@uppy/status-bar/dist/style.min.css`. +```js +import '@uppy/core/dist/style.css' +import '@uppy/status-bar/dist/style.css' +``` -Import one of these files into your project. The way to do this depends on your build system. +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Status Bar styles from `@uppy/status-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + +⚠️ If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it. ## Options diff --git a/website/src/docs/uppy.md b/website/src/docs/uppy.md index c70e3af4d..00fdf9975 100644 --- a/website/src/docs/uppy.md +++ b/website/src/docs/uppy.md @@ -110,7 +110,7 @@ This global metadata is added to each file in Uppy. It can be modified by two me Metadata from each file is then attached to uploads in [Tus](/docs/tus/) and [XHRUpload](/docs/xhrupload/) plugins. -Metadata can also be added from a `
` element on your page, through the [Form](/docs/form/)plugin or through the UI if you are using Dashboard with the [`metaFields`](/docs/dashboard/#metaFields) option. +Metadata can also be added from a `` element on your page, through the [Form](/docs/form/) plugin or through the UI if you are using Dashboard with the [`metaFields`](/docs/dashboard/#metaFields) option. ### `onBeforeFileAdded: (currentFile, files) => currentFile` diff --git a/website/src/docs/url.md b/website/src/docs/url.md index 91072eb82..6a976fa9f 100644 --- a/website/src/docs/url.md +++ b/website/src/docs/url.md @@ -36,6 +36,17 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl const Url = Uppy.Url ``` +## CSS + +The `@uppy/url` plugin requires the following CSS for styling: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/url/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Url styles from `@uppy/url/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + ## Options The `@uppy/url` plugin has the following configurable options: diff --git a/website/src/docs/webcam.md b/website/src/docs/webcam.md index e312658fb..91c6bd020 100644 --- a/website/src/docs/webcam.md +++ b/website/src/docs/webcam.md @@ -36,6 +36,17 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl const Webcam = Uppy.Webcam ``` +## CSS + +The `@uppy/webcam` plugin requires the following CSS for styling: + +```js +import '@uppy/core/dist/style.css' +import '@uppy/webcam/dist/style.css' +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the Webcam styles from `@uppy/webcam/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system. + ## Options The `@uppy/webcam` plugin has the following configurable options: diff --git a/website/src/examples/i18n/app.html b/website/src/examples/i18n/app.html index c231e76e5..37c833ef4 100644 --- a/website/src/examples/i18n/app.html +++ b/website/src/examples/i18n/app.html @@ -1,11 +1,11 @@ +https://transloadit.edgly.net/releases/uppy/v0.29.0/dist/uppy.min.css -->
+https://transloadit.edgly.net/releases/uppy/v0.29.0/dist/uppy.min.js --> + +