diff --git a/CHANGELOG.md b/CHANGELOG.md index 715ccd3bf..e35ac3c8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -53,6 +53,8 @@ Ideas that will be planned and find their way into a release at one point - [ ] test: add deepFreeze to test that state in not mutated anywhere by accident #320 - [ ] audio: audio recording similar to Webcam #143 - [ ] add typescript definitions and JSDoc everywhere? https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files +- [ ] transloadit plugin: maybe add option to disable uppy server endpoint overrides +- [ ] dragdrop: change border color when files doesn’t pass restrictions on drag https://github.com/transloadit/uppy/issues/607 ## 1.0 Goals @@ -79,61 +81,89 @@ What we need to do to release Uppy 1.0 - [x] uppy-server: security audit - [x] uppy-server: storing tokens in user’s browser only (d040281cc9a63060e2f2685c16de0091aee5c7b4) +# next + ## 0.24.0 +To be released: 2018-03-01. + - [ ] dashboard: allow minimizing the Dashboard during upload (Uppy then becomes just a tiny progress indicator) (@arturi) - [ ] dashboard: cancel button for any kind of uploads? currently resume/pause only for tus, and cancel for XHR (@arturi, @goto-bus-stop) +- [ ] dashboard: cancel button for transloadit assemblies (@arturi, @goto-bus-stop) +- [ ] dashboard: disallow removing files if `bundle: true` in XHRUpload (@arturi) - [ ] dashboard: optional alert `onbeforeunload` while upload is in progress, safeguarding from accidentaly navigating away from a page with an ongoing upload - [ ] dashboard: add image cropping, study https://github.com/MattKetmo/darkroomjs/, https://github.com/fengyuanchen/cropperjs #151 - [ ] core: css-in-js, while keeping non-random classnames (ideally prefixed) and useful preprocessor features. also see simple https://github.com/codemirror/CodeMirror/blob/master/lib/codemirror.css (@arturi, @goto-bus-stop) - [ ] core: all: reset or !important styles to be immune to any environment/page, look at screenshots in #446. Maybe `postcss-safe-important`, http://cleanslatecss.com/ or https://github.com/maximkoretskiy/postcss-autoreset or increase specificity (with .uppy prefix) (@arturi) -- [ ] url: refactor things into Provider, see comments in https://github.com/transloadit/uppy/pull/588 (@ifedapoolarewaju) +- [ ] url: refactor things into Provider, see comments in https://github.com/transloadit/uppy/pull/588 (@ifedapoolarewaju, @arturi) - [ ] dashboard: option for Boolean metadata #454 (@arturi) - [ ] look into text-based file type icons to save space, or more icons for file types? (@nqst, @arturi) - [ ] core: figure out per-plugin locales and i18n strings packs #491 - [ ] goldenretriever: confirmation before restore #443 - [ ] goldenretriever: add “ghost” files (@arturi) - [ ] core: i18n all strings + document them - -# next - -## 0.23.0 - -To be released: 2018-02-10. - -- [x] core: return `processing` results among with `upload` results in `success` event and `upload()` promise (#527 / @goto-bus-stop) -- [x] transloadit: add assembly result to the file state (or global state, since it might not be file-specific?), so that it can be used in `success` callback (transloadit jquery-sdk includes the whole Assembly Status JSON in a hidden field, form plugin will do a similar thing) (#527 / @goto-bus-stop) -- [x] transloadit: add `transloadit:assembly-executing` event (#547 / @goto-bus-stop) -- [ ] transloadit: add error reporting (@goto-bus-stop) -- [x] url: new plugin that imports files from urls (588 / @arturi, @ifedapoolarewaju) -- [ ] core: fix blank preview thumbnails for .png images in Safari 10.1 #458 -- [x] core: Move limiting to different point, to fix StatusBar and other UI issues #468 (#524, #526 / @goto-bus-stop) -- [ ] s3: rename `AWS S3` to something more general if it works with Google Cloud Storage too? See #460 -- [ ] dashboard: try adding optional whitelabel “powered by uppy.io”, maybe muted small uppy logo that gains color on hover (@nqst, @arturi) -- [x] dashboard: restore focus after modal has been closed (@arturi) -- [x] dashboard: refactor provider views (#554 / @arturi) -- [x] dashboard: use more accessible tip lib: https://github.com/ghosh/microtip -- [x] core: move preview generation to separate plugin, add queuing (#431 / @richardwillars) -- [ ] core: warn, not error, when file cannot be added due to restrictions? (@goto-bus-stop) +- [ ] core: update file-type - [ ] goldenretriever: warn, not error, when files cannot be saved by goldenretriever (@goto-bus-stop) - [ ] docs: quick start guide: https://community.transloadit.com/t/quick-start-guide-would-be-really-helpful/14605 (@arturi) - [ ] docs: on writing plugins (@goto-bus-stop) - [ ] docs: all useful events (@arturi) -- [ ] core: warn, not error, when files don’t pass restrictions: Unhandled Promise Rejection when file doesn't pass restrictions #492 -- [x] webcam: mirror image preview, add option to select which camera is used to capture, try filling the whole Dashboard with webcam preview image, remove URL.createObjectURL() (#574 / @arturi, @nqst) -- [x] xhrupload: add bundle option to send multiple files in one request (#442 / @goto-bus-stop) -- [ ] xhrupload: emit a final `upload-progress` event in the XHRUpload plugin just before firing `upload-complete` (tus-js-client already handles this internally) (@arturi) -- [x] uppy-server: security audit, ask @acconut +- [ ] s3: rename `AWS S3` to something more general if it works with Google Cloud Storage too? See #460 +- [ ] dashboard: try adding optional whitelabel “powered by uppy.io”, maybe muted small uppy logo that gains color on hover (@nqst, @arturi) +- [ ] transloadit: add error reporting (@goto-bus-stop) - [ ] uppy-server: benchmarks / stress test, large file, uppy-server / tus / S3 (10 GB) -- [ ] meta: add https://twin.github.io/better-file-uploads-with-shrine-direct-uploads to the next blog post - [ ] uppy-server: document docker image setup for uppy-server (@ifedapoolarewaju) -- [x] meta: automatically host releases on edgly and use that as our main CDN (#558 / @kvz) -- [x] uppy-server: pass response from uppy-server upload’s endpoint (@ifedapoolarewaju) -- [x] uppy-server: support localhost urls as endpoints (@ifedapoolarewaju) -- [x] uppy-server: schedule job to delete stale upload files (@ifedapoolarewaju) -- [x] uppy-server: detect file upload size from the server (@ifedapoolarewaju) -- [x] uppy-server: load standalone server options via config path (@ifedapoolarewaju) -- [x] uppy-server: fix circular json stringify error (@ifedapoolarewaju) +- [ ] xhrupload: emit a final `upload-progress` event in the XHRUpload plugin just before firing `upload-complete` (tus-js-client already handles this internally) (@arturi) +- [x] s3: fix xhr response handlers (#625, @goto-bus-stop) +- [ ] test: add typescript with JSDoc (@arturi) + +## 0.23.0 + +Released: 2018-02-11. + +- core: Allow plugins to add data to result object. Return `processing` results among with `upload` results in `complete` event and `upload()` promise (#527 / @goto-bus-stop) +- core: Move limiting to different point, to fix StatusBar and other UI issues #468 (#524, #526 / @goto-bus-stop) +- core: Add uploadID to complete event (#569 / @richardwillars) +- core: Allow chanining after .on() and .off() to improve ergonomics (#597 / @arturi) +- core: Allow user to override sass variables (#555 / @chao) +- core: Move preview generation to separate plugin, add queuing (#431 / @richardwillars) +- core: Third-party extension, uppy-store-ngrx https://github.com/rimlin/uppy-store-ngrx/ (#532 / @rimlin) +- core: Warn, not error, when file cannot be added due to restrictions? (#604, #492 / @goto-bus-stop) +- dashboard: Add more i18n strings (#565 / @arturi) +- dashboard: Fix modal and page scroll (#564 / @arturi) +- dashboard: Refactor provider views (#554 / @arturi) +- dashboard: Restore focus after modal has been closed (#536 / @arturi) +- dashboard: Use empty input value so same file can be selected multiple times (@arturi / #534) +- dashboard: Use more accessible tip lib microtip (#536 / @arturi) +- docs: Add PHP snippets to XHRUpload docs (#567 / @goto-bus-stop) +- meta: Added instruction to fork the repo first (#512 / muhammadInam) +- meta: Automatically host releases on edgly and use that as our main CDN (#558 / @kvz) +- meta: Dependency version updates (#523 / @goto-bus-stop) +- meta: Remove unused files from published package (#586 / @goto-bus-stop) +- s3: Respect `limit` option for upload parameter requests too; fix isXml() check when no content-type is available (#545, #544, #528 / @goto-bus-stop) +- statusbar: Fix status text still showing when statusbar is hidden (#525 / @goto-bus-stop) +- test: Alter jest testPathPattern to current dir, add chai (#583 / @arturi) +- thumbnail: Add thumbnail generation plugin (#461 / @richardwillars) +- thumbnail: Fix blank preview thumbnails for images in Safari; use slightly different stap scaling (#458, #584 / @arturi) +- transloadit: Add `transloadit:assembly-executing` event (#547 / @goto-bus-stop) +- transloadit: Add assembly results to to the `complete` callback (#527 / @goto-bus-stop) +- transloadit: Easily pass form fields (#593 / @goto-bus-stop) +- tus: `resume: false` — don’t store url (@arturi / #507) +- uppy-server: Detect file upload size from the server (@ifedapoolarewaju) +- uppy-server: Fix circular json stringify error (@ifedapoolarewaju) +- uppy-server: Load standalone server options via config path (@ifedapoolarewaju) +- uppy-server: Pass response from uppy-server upload’s endpoint (#591 / @ifedapoolarewaju) +- uppy-server: Schedule job to delete stale upload files (@ifedapoolarewaju) +- uppy-server: Security audit, ask @acconut +- uppy-server: Support localhost urls as endpoints (@ifedapoolarewaju) +- url: New plugin that imports files from urls (#588 / @arturi, @ifedapoolarewaju) +- webcam: Font styling for Webcam option (#509 / @muhammadInam) +- webcam: Mirror image preview, add option to select which camera is used to capture, try filling the whole Dashboard with webcam preview image, remove URL.createObjectURL() (#574 / @arturi, @nqst) +- website: Add Transloadit example to website (#603 / @arturi) +- website: Doc fixes (#563 / @arturi) +- website: Improve the Contributing guide (#578 / @arturi) +- xhrupload: Add bundle option to send multiple files in one request (#442 / @goto-bus-stop) +- xhrupload: Prevent files from being uploaded multiple times in separate uploads (#552 / @richardwillars) +- xhrupload: Refactor response and error handling (#591 / @goto-bus-stop, @arturi, @ifedapoolarewaju) ## 0.22.1 @@ -197,127 +227,127 @@ Released: 2017-12-10. Released: 2017-11-14. -- [x] accessibility: add tabindex="0" to buttons and tabs, aria-labels, focus (#414 / @arturi) -- [x] core: allow setting custom `id` for plugins to allow a plugin to be used multiple times (#418 / @arturi) -- [x] core: do not check isPreviewSupported for unknown filetypes (#417 / @sadovnychyi) -- [x] core: refactor `uppy-base` (#382 / @goto-bus-stop) -- [x] core: remove functions from state object (#408 / @goto-bus-stop) -- [x] core: return `{ successful, failed }` from `uppy.upload()` (#404 / @goto-bus-stop) -- [x] core: update state with error messages rather than error objects (#406 / @richardwillars) -- [x] core: use `tinyify` for the unpkg bundle. (#371 / @goto-bus-stop) -- [x] dashboard: Fix pasting files, default `image` file name, add type to meta, file type refactor (#395 / @arturi) -- [x] dragdrop: Fix of the .uppy-DragDrop-inner spacing on small screens (#405 / @nqst) -- [x] react: fix `uppy` PropType, closes (#416 / @goto-bus-stop) -- [x] s3: automatically wrap XHRUpload. **Users should remove `.use(XHRUpload)` when using S3.** (#408 / @goto-bus-stop) -- [x] test: refactored end-to-end tests to not use website, switched to Webdriver.io, added tests for Edge, Safari, Android and iOS (#410 / @arturi) -- [x] tus: Rename Tus10 → Tus (#285 / @goto-bus-stop) -- [x] uppy-serer: mask sensitive data from request logs (@ifedapoolarewaju) -- [x] uppy-server: add request body validators (@ifedapoolarewaju) -- [x] uppy-server: migrate dropbox to use v2 API (#386 / @ifedapoolarewaju) -- [x] uppy-server: store tokens in user’s browser only (@ifedapoolarewaju) -- [x] webcam: only show the webcam tab when browser support is available (media recorder API) (#421 / @arturi, @goto-bus-stop) -- [x] webcam: simplify and refactor webcam plugin (modern browser APIs only) (#382 / @goto-bus-stop) -- [x] xhrupload: set a timeout in the onprogress event handler to detect stale network (#378 / @goto-bus-stop) -- [x] uppy-server: allow flexible whitelist endpoint protocols (@ifedapoolarewaju) +- accessibility: add tabindex="0" to buttons and tabs, aria-labels, focus (#414 / @arturi) +- core: allow setting custom `id` for plugins to allow a plugin to be used multiple times (#418 / @arturi) +- core: do not check isPreviewSupported for unknown filetypes (#417 / @sadovnychyi) +- core: refactor `uppy-base` (#382 / @goto-bus-stop) +- core: remove functions from state object (#408 / @goto-bus-stop) +- core: return `{ successful, failed }` from `uppy.upload()` (#404 / @goto-bus-stop) +- core: update state with error messages rather than error objects (#406 / @richardwillars) +- core: use `tinyify` for the unpkg bundle. (#371 / @goto-bus-stop) +- dashboard: Fix pasting files, default `image` file name, add type to meta, file type refactor (#395 / @arturi) +- dragdrop: Fix of the .uppy-DragDrop-inner spacing on small screens (#405 / @nqst) +- react: fix `uppy` PropType, closes (#416 / @goto-bus-stop) +- s3: automatically wrap XHRUpload. **Users should remove `.use(XHRUpload)` when using S3.** (#408 / @goto-bus-stop) +- test: refactored end-to-end tests to not use website, switched to Webdriver.io, added tests for Edge, Safari, Android and iOS (#410 / @arturi) +- tus: Rename Tus10 → Tus (#285 / @goto-bus-stop) +- uppy-serer: mask sensitive data from request logs (@ifedapoolarewaju) +- uppy-server: add request body validators (@ifedapoolarewaju) +- uppy-server: migrate dropbox to use v2 API (#386 / @ifedapoolarewaju) +- uppy-server: store tokens in user’s browser only (@ifedapoolarewaju) +- webcam: only show the webcam tab when browser support is available (media recorder API) (#421 / @arturi, @goto-bus-stop) +- webcam: simplify and refactor webcam plugin (modern browser APIs only) (#382 / @goto-bus-stop) +- xhrupload: set a timeout in the onprogress event handler to detect stale network (#378 / @goto-bus-stop) +- uppy-server: allow flexible whitelist endpoint protocols (@ifedapoolarewaju) ## 0.20.3 Released: 2017-10-18. -- [x] Start a completely new upload when retrying. (#390 / @goto-bus-stop) -- [x] dashboard: Show errors that occurred during processing on the file items. (#391 / @goto-bus-stop) -- [x] transloadit: Mark files as having errored if their assembly fails. (#392 / @goto-bus-stop) -- [x] core: Clear file upload progress when an upload starts. (#393 / @goto-bus-stop) -- [x] tus: Clean up `tus.Upload` instance and events when an upload starts, finishes, or fails. (#390 / @goto-bus-stop) +- Start a completely new upload when retrying. (#390 / @goto-bus-stop) +- dashboard: Show errors that occurred during processing on the file items. (#391 / @goto-bus-stop) +- transloadit: Mark files as having errored if their assembly fails. (#392 / @goto-bus-stop) +- core: Clear file upload progress when an upload starts. (#393 / @goto-bus-stop) +- tus: Clean up `tus.Upload` instance and events when an upload starts, finishes, or fails. (#390 / @goto-bus-stop) ## 0.20.2 Released: 2017-10-11. -- [x] docs: fix `getMetaFromForm` documentation (@arturi) -- [x] core: fix generating thumbnails for images with transparent background (#380 / @goto-bus-stop) -- [x] transloadit: use Translator class for localised strings (#383 / @goto-bus-stop) -- [x] goldenretriever: don't crash when required server-side (#384 / @goto-bus-stop) +- docs: fix `getMetaFromForm` documentation (@arturi) +- core: fix generating thumbnails for images with transparent background (#380 / @goto-bus-stop) +- transloadit: use Translator class for localised strings (#383 / @goto-bus-stop) +- goldenretriever: don't crash when required server-side (#384 / @goto-bus-stop) ## 0.20.1 Released: 2017-10-05. -- [x] redux: add plugin for syncing uppy state with a Redux store (#376 / @richardwillars) +- redux: add plugin for syncing uppy state with a Redux store (#376 / @richardwillars) ## 0.20.0 Released: 2017-10-03. Theme: React and Retry -- [x] core: retry/error when upload can’t start or fails (offline, connection lost, wrong endpoint); add error in file progress state, UI, question mark button (#307 / @arturi) -- [x] core: support for retry in Tus plugin (#307 / @arturi) -- [x] core: support for retry in XHRUpload plugin (#307 / @arturi) -- [x] core: Add support for Redux DevTools via a plugin (#373 / @arturi) -- [x] core: improve and merge the React PR (#170 / @goto-bus-stop, @arturi) -- [x] core: improve core.log method, add timestamps (#372 / @arturi) -- [x] dragdrop: redesign, add note, width/height options, arrow icon (#374 / @arturi) -- [x] uploaders: upload resolution changes, followup to #323 (#347 / @goto-bus-stop) -- [x] uploaders: issue warning when no uploading plugins are used (#372 / @arturi) -- [x] core: fix `replaceTargetContent` and add tests for `Plugin` (#354 / @gavboulton) -- [x] goldenretriever: Omit completed uploads from saved file state—previously, when an upload was finished and the user refreshed the page, all the finished files would still be there because we saved the entire list of files. Changed this to only store files that are part of an in-progress upload, or that have yet to be uploaded (#358, #324 / @goto-bus-stop) -- [x] goldenretriever: Remove files from cache when upload finished—this uses the deleteBlobs function when core:success fires (#358, #324 / @goto-bus-stop) -- [x] goldenretriever: add a timestamp to cached blobs, and to delete old blobs on boot (#358, #324 / @goto-bus-stop) -- [x] s3: have some way to configure content-disposition for uploads, see #243 (@goto-bus-stop) -- [x] core: move `setPluginState` and add `getPluginState` to `Plugin` class (#363 / @goto-bus-stop) +- core: retry/error when upload can’t start or fails (offline, connection lost, wrong endpoint); add error in file progress state, UI, question mark button (#307 / @arturi) +- core: support for retry in Tus plugin (#307 / @arturi) +- core: support for retry in XHRUpload plugin (#307 / @arturi) +- core: Add support for Redux DevTools via a plugin (#373 / @arturi) +- core: improve and merge the React PR (#170 / @goto-bus-stop, @arturi) +- core: improve core.log method, add timestamps (#372 / @arturi) +- dragdrop: redesign, add note, width/height options, arrow icon (#374 / @arturi) +- uploaders: upload resolution changes, followup to #323 (#347 / @goto-bus-stop) +- uploaders: issue warning when no uploading plugins are used (#372 / @arturi) +- core: fix `replaceTargetContent` and add tests for `Plugin` (#354 / @gavboulton) +- goldenretriever: Omit completed uploads from saved file state—previously, when an upload was finished and the user refreshed the page, all the finished files would still be there because we saved the entire list of files. Changed this to only store files that are part of an in-progress upload, or that have yet to be uploaded (#358, #324 / @goto-bus-stop) +- goldenretriever: Remove files from cache when upload finished—this uses the deleteBlobs function when core:success fires (#358, #324 / @goto-bus-stop) +- goldenretriever: add a timestamp to cached blobs, and to delete old blobs on boot (#358, #324 / @goto-bus-stop) +- s3: have some way to configure content-disposition for uploads, see #243 (@goto-bus-stop) +- core: move `setPluginState` and add `getPluginState` to `Plugin` class (#363 / @goto-bus-stop) ## 0.19.1 Released: 2017-09-20. -- [x] goldenretriever: fix restorefiles with id (#351 / @arturi) -- [x] goldenretriever: Clean up blobs that are not related to a file in state (#349 / @goto-bus-stop) -- [x] core: set the newState before emiting `core:state-update` (#341 / @sunil-shrestha, @arturi) -- [x] docs: Document StatusBar plugin (#350 / @goto-bus-stop) +- goldenretriever: fix restorefiles with id (#351 / @arturi) +- goldenretriever: Clean up blobs that are not related to a file in state (#349 / @goto-bus-stop) +- core: set the newState before emiting `core:state-update` (#341 / @sunil-shrestha, @arturi) +- docs: Document StatusBar plugin (#350 / @goto-bus-stop) ## 0.19.0 Released: 2017-09-15. Theme: Tests and better APIs -- [x] goldenretriever: allow passing options to `IndexedDbStore` (#339 / sunil-shrestha) -- [x] core: add Uppy instance ID option, namespace serviceWorker action types, add example using multiple Uppy instances with Goldenretriever (#333 / @goto-bus-stop) -- [x] core: fix `calculateTotalProgress` - NaN (#342 / @arturi) -- [x] core: fix and refactor restrictions (#345 / @arturi) -- [x] core: Better `generateFileID` (#330 / @arturi) -- [x] core: improve `isOnline()` (#319 / @richardwillars) -- [x] core: remove unused bootstrap styles (#329 / @arturi) -- [x] core: experiment with yo-yo --> preact and picodom (#297 / @arturi) -- [x] dashboard: fix FileItem source icon position and copy (@arturi) -- [x] dashboard: expose and document the show/hide/isOpen API (@arturi) -- [x] dashboard: allow multiple `triggers` of the same class `.open-uppy` (#328 / @arturi) -- [x] plugins: add `aria-hidden` to all SVG icons for accessibility (#4e808ca3d26f06499c58bb77abbf1c3c2b510b4d / @arturi) -- [x] core: Handle sync returns and throws in possibly-async function options (#315 / @goto-bus-stop) -- [x] core: switch to Jest tests, add more tests for Core and Utils (#310 / @richardwillars) -- [x] website: Minify bundle for `disc` (#332 / @goto-bus-stop) -- [x] transloadit: remove `this.state` getter (#331 / @goto-bus-stop) -- [x] server: option to define valid upload urls (@ifedapoolarewaju) -- [x] server: more automated tests (@ifedapoolarewaju) +- goldenretriever: allow passing options to `IndexedDbStore` (#339 / sunil-shrestha) +- core: add Uppy instance ID option, namespace serviceWorker action types, add example using multiple Uppy instances with Goldenretriever (#333 / @goto-bus-stop) +- core: fix `calculateTotalProgress` - NaN (#342 / @arturi) +- core: fix and refactor restrictions (#345 / @arturi) +- core: Better `generateFileID` (#330 / @arturi) +- core: improve `isOnline()` (#319 / @richardwillars) +- core: remove unused bootstrap styles (#329 / @arturi) +- core: experiment with yo-yo --> preact and picodom (#297 / @arturi) +- dashboard: fix FileItem source icon position and copy (@arturi) +- dashboard: expose and document the show/hide/isOpen API (@arturi) +- dashboard: allow multiple `triggers` of the same class `.open-uppy` (#328 / @arturi) +- plugins: add `aria-hidden` to all SVG icons for accessibility (#4e808ca3d26f06499c58bb77abbf1c3c2b510b4d / @arturi) +- core: Handle sync returns and throws in possibly-async function options (#315 / @goto-bus-stop) +- core: switch to Jest tests, add more tests for Core and Utils (#310 / @richardwillars) +- website: Minify bundle for `disc` (#332 / @goto-bus-stop) +- transloadit: remove `this.state` getter (#331 / @goto-bus-stop) +- server: option to define valid upload urls (@ifedapoolarewaju) +- server: more automated tests (@ifedapoolarewaju) ## 0.18.1 Released: 2017-09-05. Note: this version was released as a `@next` npm tag to unblock some users. -- [x] core: gradually resize image previews #275 (@goto-bus-stop) -- [x] informer: support “explanations”, a (?) button that shows more info on hover / click (#292 / @arturi) -- [x] fix webcam video recording (@goto-bus-stop) -- [x] bundle: add missing plugins (s3, statusbar, restoreFiles) to unpkg bundle (#301 / @goto-bus-stop) -- [x] xhrupload: Use error messages from the endpoint (#305 / @goto-bus-stop) -- [x] dashboard: prevent submitting outer form when pressing enter key while editing metadata (#306 / @goto-bus-stop) -- [x] dashboard: save metadata edits when pressing enter key (#308 / @arturi) -- [x] transloadit: upload to S3, then import into :tl: assembly using `/add_file?s3url=${url}` (#280 / @goto-bus-stop) -- [x] transloadit: add `alwaysRunAssembly` option to run assemblies when no files are uploaded (#290 / @goto-bus-stop) -- [x] core: use `iteratePlugins` inside `updateAll` (#312 / @richardwillars) -- [x] core: improve error when plugin does not have ID (#309 / @richardwillars) -- [x] tus: Clear stored `uploadUrl` on `uppy.resetProgress()` call (#314 / @goto-bus-stop) -- [x] website: simplify examples and code samples, prevent sidebar subheading links anywhere but in docs (@arturi) -- [x] website: group plugin docs together in the sidebar (@arturi) +- core: gradually resize image previews #275 (@goto-bus-stop) +- informer: support “explanations”, a (?) button that shows more info on hover / click (#292 / @arturi) +- fix webcam video recording (@goto-bus-stop) +- bundle: add missing plugins (s3, statusbar, restoreFiles) to unpkg bundle (#301 / @goto-bus-stop) +- xhrupload: Use error messages from the endpoint (#305 / @goto-bus-stop) +- dashboard: prevent submitting outer form when pressing enter key while editing metadata (#306 / @goto-bus-stop) +- dashboard: save metadata edits when pressing enter key (#308 / @arturi) +- transloadit: upload to S3, then import into :tl: assembly using `/add_file?s3url=${url}` (#280 / @goto-bus-stop) +- transloadit: add `alwaysRunAssembly` option to run assemblies when no files are uploaded (#290 / @goto-bus-stop) +- core: use `iteratePlugins` inside `updateAll` (#312 / @richardwillars) +- core: improve error when plugin does not have ID (#309 / @richardwillars) +- tus: Clear stored `uploadUrl` on `uppy.resetProgress()` call (#314 / @goto-bus-stop) +- website: simplify examples and code samples, prevent sidebar subheading links anywhere but in docs (@arturi) +- website: group plugin docs together in the sidebar (@arturi) ## 0.18.0 diff --git a/README.md b/README.md index cc75bab02..17bbc49c1 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ $ npm install uppy --save 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.22.5/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.23.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,12 +73,12 @@ Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly 1\. Add a script to the bottom of ``: ``` html - + ``` 2\. Add CSS to ``: ``` html - + ``` 3\. Initialize: @@ -106,6 +106,7 @@ Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly - `Tus` — resumable uploads via the open [tus](http://tus.io) standard - `XHRUpload` — regular uploads for any backend out there (like Apache, Nginx) - `Transloadit` — support for [Transloadit](http://transloadit.com)’s robust file uploading and encoding backend +- `AwsS3` — upload to AWS S3 (also works for Google Cloud) - `Dashboard` — universal UI with previews, progress bars, metadata editor and all the cool stuff - `DragDrop` — plain and simple drag and drop area - `FileInput` — even plainer “select files” button @@ -113,11 +114,10 @@ Alternatively, you can also use a pre-built bundle from Transloadit's CDN: Edgly - `StatusBar` — more detailed progress, pause/resume/cancel buttons, percentage, speed, uploaded/total sizes (included by default with `Dashboard`) - `Informer` — send notifications like “smile” before taking a selfie or “upload failed” when all is lost (also included by default with `Dashboard`) - `GoldenRetriever` — restores files after a browser crash, like it’s nothing +- `ThumbnailGenerator` — generates image previews (included by default with `Dashboard`) - `Form` — collects metadata from `
` right before an Uppy upload, then optionally appends results back to the form - `ReduxDevTools` — for your emerging [time traveling](https://github.com/gaearon/redux-devtools) needs -- `GoogleDrive` — select files from [Google Drive](https://www.google.com/drive/) -- `Dropbox` — select files from [Dropbox](https://www.dropbox.com/) -- `Instagram` — you guessed right — select files from [Instagram](https://www.instagram.com/) +- `GoogleDrive`, `Dropbox`, `Instagram`, `Url` — select files from [Google Drive](https://www.google.com/drive/), [Dropbox](https://www.dropbox.com/), [Instagram](https://www.instagram.com/) and direct urls from anywhere on the web. Note that[`uppy-server`](https://github.com/transloadit/uppy-server) is needed for these. - `Webcam` — snap and record those selfies 📷 ## Browser Support @@ -130,25 +130,43 @@ We aim to support IE10+ and recent versions of Safari, Edge, Chrome, Firefox, an ## FAQ -### React support? +### Why not just use ``? -Yep, we have Uppy React components, please see [Uppy React docs](https://uppy.io/docs/react/). +Having no JavaScript beats having a lot of it, so that’s a fair question! Running an uploading & encoding business for ten years though we found that in cases, the file input leaves some to be desired: -### Can I use it with Rails/Node/Go/PHP? +- We received complaints about broken uploads and found that resumable uploads are important, especially for big files and to be inclusive towards people on poorer connections (we also launched [tus.io](https://tus.io) to attack that problem). Uppy uploads can survive network outages and browser crashes or accidental navigate-aways. +- Uppy supports editing meta information before uploading (and e.g. cropping is planned). +- There’s the situation where people are using their mobile devices and want to upload on the go, but they have their picture on Instagram, files in Dropbox, or just a plain file url from anywhere on the open web. Uppy allows to pick files from those and push it to the destination without downloading it to your mobile device first. +- Accurate upload progress reporting is an issue on many platforms. +- Some file validation — size, type, number of files — can be done on the client with Uppy. +- Uppy integrates webcam support, in case your users want to upload a picture/video/audio that does not exist yet :) +- A larger drag & drop surface can be pleasant to work with. Some people also like that you can control the styling, language, etc. +- Uppy is aware of encoding backends. Often after an upload, the server needs to rotate, detect faces, optimize for iPad, or what have you. Uppy can track progress of this and report back to the user in different ways. +- Sometimes you might want your uploads to happen while you continue to interact on the same single page. -Yes, whatever you want on the backend will work with `XHRUpload` plugin, since it just does a `POST` or `PUT` request. If you want resumability with the Tus plugin, use [one of the tus server implementations](https://tus.io/implementations.html) 👌🏼 - -### Do I need to install special service/server for it? - -Nope, as mentioned previously, the `XHRUpload` plugin is old-school and just works with everything. However, you need [`uppy-server`](https://github.com/transloadit/uppy-server) if you’d like your users to be able to pick files from Instagram, Google Drive or Dropbox (more services coming). And you can add [tus](http://tus.io) if you want resumability. - -### Does Uppy support S3 uploads? - -Yes, there is an S3 plugin, check out the [docs](https://uppy.io/docs/aws-s3/) for more! +Not all apps need all of these features. A `` is fine in many situations. But these were a few things that our customers hit / asked about enough to spark us to develop Uppy. ### Why is all this goodness free? -Transloadit's team is small and we have a shared ambition to make a living from open source. By giving away projects like [tus.io](https://tus.io) and [Uppy](https://uppy.io), we're hoping to advance the state of the art, make life a tiny little bit better for everyone, and in doing so have rewarding jobs and get some eyes on our commercial service: [a content ingestion & processing platform](https://transloadit.com). Our thinking is that if just a fraction of our open source userbase can see the appeal of hosted versions straight from the source, that could already be enough to sustain our work. So far this is working out! We're able to dedicate 80% of our time to open source and haven't gone bankrupt just yet :D +Transloadit’s team is small and we have a shared ambition to make a living from open source. By giving away projects like [tus.io](https://tus.io) and [Uppy](https://uppy.io),we’re hoping to advance the state of the art, make life a tiny little bit better for everyone, and in doing so have rewarding jobs and get some eyes on our commercial service: [a content ingestion & processing platform](https://transloadit.com). + +Our thinking is that if just a fraction of our open source userbase can see the appeal of hosted versions straight from the source, that could already be enough to sustain our work. So far this is working out! We’re able to dedicate 80% of our time to open source and haven’t gone bankrupt just yet :D + +### Does Uppy support React? + +Yep, we have Uppy React components, please see [Uppy React docs](https://uppy.io/docs/react/). + +### Does Uppy support S3 uploads? + +Yes, there is an S3 plugin, please check out the [docs](https://uppy.io/docs/aws-s3/) for more. + +### Do I need to install special service/server for Uppy? Can I use it with Rails/Node/Go/PHP? + +Yes, whatever you want on the backend will work with `XHRUpload` plugin, since it just does a `POST` or `PUT` request. Here’s a [PHP backend example](https://uppy.io/docs/xhrupload/#Uploading-to-a-PHP-Server). + +If you want resumability with the Tus plugin, use [one of the tus server implementations](https://tus.io/implementations.html) 👌🏼 + +And you’ll need [`uppy-server`](https://github.com/transloadit/uppy-server) if you’d like your users to be able to pick files from Instagram, Google Drive, Dropbox or via direct urls (with more services coming). ## Contributions are welcome diff --git a/bin/upload-to-cdn.sh b/bin/upload-to-cdn.sh index f74379cf6..53db039c3 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.22.5/dist/uppy.css +# - Runs npm pack, and stores files to e.g. https://transloadit.edgly.net/releases/uppy/v0.23.0/dist/uppy.css # - Uses local package by default, if [version] argument was specified, takes package from npm # # Run as: diff --git a/examples/bundled-example/main.js b/examples/bundled-example/main.js index 809df2a6d..faa2a9e4e 100644 --- a/examples/bundled-example/main.js +++ b/examples/bundled-example/main.js @@ -48,7 +48,7 @@ const uppy = Uppy({ trigger: '#pick-files', metaFields: [ { id: 'license', name: 'License', placeholder: 'specify license' }, - { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' } + { id: 'caption', name: 'Caption', placeholder: 'add caption' } ] // target: '.uppy-target', // inline: true, diff --git a/examples/cdn-example/index.html b/examples/cdn-example/index.html index f8a3aac45..0c2a17a98 100644 --- a/examples/cdn-example/index.html +++ b/examples/cdn-example/index.html @@ -4,11 +4,11 @@ - + - + + + ``` 2\. Add CSS to ``: ``` html - + ``` 3\. Initialize: diff --git a/website/src/docs/plugins.md b/website/src/docs/plugins.md index 3a11d524a..7448c78c0 100644 --- a/website/src/docs/plugins.md +++ b/website/src/docs/plugins.md @@ -31,6 +31,10 @@ Plugins are what makes Uppy useful: they help select, manipulate and upload file Each plugin can have any number of options (please see specific plugin for details), but these are shared between some: +### `id` + +A unique string identifying the plugin. By default, the plugin's name is used, so usually it does not need to be configured manually. Use this if you need to add multiple plugins of the same type. + ### `target` Can be a `string` CSS selector, a DOM element, or a Plugin class. Consider the following example, where `DragDrop` plugin will be rendered into a `body` element: diff --git a/website/src/docs/react-dashboard.md b/website/src/docs/react-dashboard.md index 8ba54c696..798ec8abd 100644 --- a/website/src/docs/react-dashboard.md +++ b/website/src/docs/react-dashboard.md @@ -13,6 +13,7 @@ On top of all the [Dashboard][] options, the `` plugin adds tw - `open` - Boolean true or false, setting this to `true` opens the modal and setting it to `false` closes it. - `onRequestClose` - Callback called when the user attempts to close the modal, either by clicking the close button or by clicking outside the modal (if the `closeModalOnClickOutside` prop is set). + - `plugins` - Array of plugins you need to use in Dashboard. Example: `plugins={['Webcam']}`. ```js class MusicUploadButton extends React.Component { @@ -40,6 +41,8 @@ class MusicUploadButton extends React.Component { } render () { + this.props.uppy.use(Webcam); // the same as this.props.uppy.use(Webcam, { id: "Webcam" }); + return (
@@ -48,6 +51,7 @@ class MusicUploadButton extends React.Component { closeModalOnClickOutside open={this.state.modalOpen} onRequestClose={this.handleClose} + plugins={['Webcam']} />
); diff --git a/website/src/docs/statusbar.md b/website/src/docs/statusbar.md index 61b3be970..8d4b6a465 100644 --- a/website/src/docs/statusbar.md +++ b/website/src/docs/statusbar.md @@ -12,6 +12,39 @@ Best used together with a simple file source plugin, such as [FileInput][] or [D ## Options +```js +uppy.use(StatusBar, { + target: 'body', + hideUploadButton: false, + showProgressDetails: false, + hideAfterFinish: true + locale: { + strings: { + uploading: 'Uploading', + uploadComplete: 'Upload complete', + uploadFailed: 'Upload failed', + pleasePressRetry: 'Please press Retry to upload again', + paused: 'Paused', + error: 'Error', + retry: 'Retry', + pressToRetry: 'Press to retry', + retryUpload: 'Retry upload', + resumeUpload: 'Resume upload', + cancelUpload: 'Cancel upload', + pauseUpload: 'Pause upload', + uploadXFiles: { + 0: 'Upload %{smart_count} file', + 1: 'Upload %{smart_count} files' + }, + uploadXNewFiles: { + 0: 'Upload +%{smart_count} file', + 1: 'Upload +%{smart_count} files' + } + } + } +}) +``` + ### `target: null` DOM element, CSS selector, or plugin to mount the StatusBar into. diff --git a/website/src/docs/transloadit.md b/website/src/docs/transloadit.md index 93510212c..08704bb87 100644 --- a/website/src/docs/transloadit.md +++ b/website/src/docs/transloadit.md @@ -7,40 +7,42 @@ permalink: docs/transloadit/ The Transloadit plugin can be used to upload files to [Transloadit](https://transloadit.com/) for all kinds of processing, such as transcoding video, resizing images, zipping/unzipping, [and more](https://transloadit.com/services/). -The Transloadit plugin uses the [Tus plugin](/docs/tus) for the uploading itself. -To upload files to Transloadit directly, both the Tus and Transloadit plugins must be used: +[Try it live](/examples/transloadit/) ```js -// The `resume: false` option _must_ be provided to the Tus plugin. -uppy.use(Tus, { - resume: false -}) uppy.use(Transloadit, { - // Transloadit plugin options + service: 'https://api2.transloadit.com', + waitForEncoding: false, + waitForMetadata: false, + importFromUploadURLs: false, + alwaysRunAssembly: false, + params: null, + signature: null, + fields: {} }) ``` -NB: It is not required to use the `Tus` plugin if [importFromUploadURLs](#importFromUploadURLs) is enabled. +As of Uppy 0.24 the Transloadit plugin includes the [Tus](/docs/tus) plugin to handle the uploading, so you no longer have to add it manually. ## Options +### `service` + +The Transloadit API URL to use. Defaults to `https://api2.transloadit.com`, which will attempt to route traffic efficiently based on where your users are. You can set this to something like `https://api2-us-east-1.transloadit.com` if you want to use a particular region. + ### `waitForEncoding` -Whether to wait for all assemblies to complete before completing the upload. +Whether to wait for all Assemblies to complete before completing the upload. ### `waitForMetadata` -Whether to wait for metadata to be extracted from uploaded files before completing the upload. -If `waitForEncoding` is enabled, this has no effect. +Whether to wait for metadata to be extracted from uploaded files before completing the upload. If `waitForEncoding` is enabled, this has no effect. ### `importFromUploadURLs` -Instead of uploading to Transloadit's servers directly, allow another plugin to upload files, and then import those files into the Transloadit assembly. -Default `false`. +Instead of uploading to Transloadit's servers directly, allow another plugin to upload files, and then import those files into the Transloadit Assembly. Default `false`. -When enabling this option, Transloadit will *not* configure the Tus plugin to upload to Transloadit. -Instead, a separate upload plugin must be used. -Once the upload completes, the Transloadit plugin adds the uploaded file to the assembly. +When enabling this option, Transloadit will *not* configure the Tus plugin to upload to Transloadit. Instead, a separate upload plugin must be used. Once the upload completes, the Transloadit plugin adds the uploaded file to the Assembly. For example, to upload files to an S3 bucket and then transcode them: @@ -53,36 +55,78 @@ uppy.use(AwsS3, { uppy.use(Transloadit, { importFromUploadURLs: true, params: { - auth: { key: /* secret */ }, - template_id: /* secret */ + auth: { key: 'YOUR_API_KEY' }, + template_id: 'YOUR_TEMPLATE_ID' } }) ``` -In order for this to work, the upload plugin must assign a publically accessible `uploadURL` property to the uploaded file object. -The Tus and S3 plugins both do this—for the XHRUpload plugin, you may have to specify a custom `getUploadResponse` function. +In order for this to work, the upload plugin must assign a publically accessible `uploadURL` property to the uploaded file object. The Tus and S3 plugins both do this—for the XHRUpload plugin, you may have to specify a custom `getUploadResponse` function. + +### `alwaysRunAssembly` + +When true, always create and run an Assembly when `uppy.upload()` is called, even if no files were selected. This allows running Assemblies that do not receive files, but instead use a robot like [`/s3/import`](https://transloadit.com/docs/transcoding/#s3-import) to download the files from elsewhere, for example for a bulk transcoding job. ### `params` -The assembly parameters to use for the upload. +The Assembly parameters to use for the upload. See the Transloadit documentation on [Assembly Instructions](https://transloadit.com/docs/#14-assembly-instructions). `params` should be a plain JavaScript object, or a JSON string if you are using the [`signature`](#signature) option. + +The `auth.key` Assembly parameter is required. You can also use the `steps` or `template_id` options here as described in the Transloadit documentation. + +```js +uppy.use(Transloadit, { + params: { + auth: { key: 'YOUR_TRANSLOADIT_KEY' }, + steps: { + encode: { + robot: '/video/encode', + use: { + steps: [ ':original' ], + fields: [ 'file_input_field2' ] + }, + preset: 'iphone' + } + } + } +}) +``` ### `signature` -An optional signature for the assembly parameters. +An optional signature for the Assembly parameters. See the Transloadit documentation on [Signature Authentication](https://transloadit.com/docs/#26-signature-authentication). If a `signature` is provided, `params` should be a JSON string instead of a JavaScript object, as otherwise the generated JSON in the browser may be different from the JSON string that was used to generate the signature. ### `fields` -An object of form fields to send along to the assembly. +An object of form fields to send along to the Assembly. Keys are field names, and values are field values. See also the Transloadit documentation on [Form Fields In Instructions](https://transloadit.com/docs/#23-form-fields-in-instructions). + +```js +uppy.use(Transloadit, { + ..., + fields: { + message: 'This is a form field' + } +}) +``` + +You can also pass an array of field names to send global or file metadata along to the Assembly. Global metadata is set using the [`meta` option](/docs/uppy/#meta) in the Uppy constructor, or using the [`setMeta` method](/docs/uppy/#uppy-setMeta-data). File metadata is set using the [`setFileMeta`](/docs/uppy/#uppy-setFileMeta-fileID-data) method. The [Form](/docs/form) plugin also sets global metadata based on the values of ``s in the form, providing a handy way to use values from HTML form fields: + +```js +uppy.use(Form, { target: 'form#my-form', getMetaFromForm: true }) +uppy.use(Transloadit, { + fields: ['field_name', 'other_field_name'], + params: { ... } +}) +``` + +Form fields can also be computed dynamically using custom logic, by using the [`getAssemblyOptions(file)`](/docs/transloadit/#getAssemblyOptions-file) option. ### `getAssemblyOptions(file)` -While `params`, `signature`, and `fields` must be determined ahead of time, the `getAssemblyOptions` allows using dynamically generated values for these options. -This way, it is possible to use different assembly parameters for different files. +While `params`, `signature`, and `fields` must be determined ahead of time, the `getAssemblyOptions` allows using dynamically generated values for these options. This way, it is possible to use different Assembly parameters for different files, or to use some user input in an Assembly. -A custom `getAssemblyOptions()` option should return an object or a Promise for an object with properties `{ params, signature, fields }`. -For example, to add a field with some user-provided data from the `MetaData` plugin: +A custom `getAssemblyOptions()` option should return an object or a Promise for an object with properties `{ params, signature, fields }`. For example, to add a field with some user-provided data from the `MetaData` plugin: ```js uppy.use(MetaData, { @@ -105,10 +149,27 @@ uppy.use(Transloadit, { }) ``` -Now, the `${fields.caption}` variable will be available in the assembly template. +Now, the `${fields.caption}` variable will be available in the Assembly template. -`getAssemblyOptions()` may also return a Promise, so it could retrieve signed assembly parameters from a server. -For example, assuming an endpoint `/transloadit-params` that responds with a JSON object with `{ params, signature }` properties: +Combine the `getAssemblyOptions()` option with the [Form](/docs/form) plugin to pass user input from a `` to a Transloadit Assembly: + +```js +// This will add form field values to each file's `.meta` object: +uppy.use(Form, { getMetaFromForm: true }) +uppy.use(Transloadit, { + getAssemblyOptions (file) { + return { + params: { ... }, + // Pass through the fields you need: + fields: { + message: file.meta.message + } + } + } +}) +``` + +`getAssemblyOptions()` may also return a Promise, so it could retrieve signed Assembly parameters from a server. For example, assuming an endpoint `/transloadit-params` that responds with a JSON object with `{ params, signature }` properties: ```js uppy.use(Transloadit, { @@ -124,12 +185,12 @@ uppy.use(Transloadit, { ### `transloadit:assembly-created` -Fired when an assembly is created. +Fired when an Assembly is created. **Parameters** - - `assembly` - The initial assembly status. - - `fileIDs` - The IDs of the files that will be uploaded to this assembly. + - `assembly` - The initial [Assembly Status][assembly-status]. + - `fileIDs` - The IDs of the files that will be uploaded to this Assembly. ```js uppy.on('transloadit:assembly-created', (assembly, fileIDs) => { @@ -148,7 +209,7 @@ Fired when Transloadit has received an upload. **Parameters** - `file` - The Transloadit file object that was uploaded. - - `assembly` - The assembly status of the assembly the file was uploaded to. + - `assembly` - The [Assembly Status][assembly-status] of the Assembly the file was uploaded to. ### `transloadit:assembly-executing` @@ -160,15 +221,15 @@ Fired when Transloadit has received all uploads, and is now executing the Assemb ### `transloadit:result` -Fired when a result came in from an assembly. +Fired when a result came in from an Assembly. **Parameters** - - `stepName` - The name of the assembly step that generated this result. + - `stepName` - The name of the Assembly step that generated this result. - `result` - The result object from Transloadit. This result object contains one additional property, namely `localId`. This is the ID of the file in Uppy's local state, and can be used with `uppy.getFile(id)`. - - `assembly` - The assembly status of the assembly that generated this result. + - `assembly` - The [Assembly Status][assembly-status] of the Assembly that generated this result. ```js uppy.on('transloadit:result', (stepName, result) => { @@ -184,11 +245,11 @@ uppy.on('transloadit:result', (stepName, result) => { ### `transloadit:complete` -Fired when an assembly completed. +Fired when an Assembly completed. **Parameters** - - `assembly` - The final assembly status of the completed assembly. + - `assembly` - The final [Assembly Status][assembly-status] of the completed Assembly. ```js uppy.on('transloadit:complete', (assembly) => { @@ -196,3 +257,5 @@ uppy.on('transloadit:complete', (assembly) => { console.log(assembly.results) }) ``` + +[assembly-status]: https://transloadit.com/docs/api-docs/#assembly-status-response diff --git a/website/src/docs/uppy.md b/website/src/docs/uppy.md index 26a603681..9e391d5b6 100644 --- a/website/src/docs/uppy.md +++ b/website/src/docs/uppy.md @@ -318,6 +318,36 @@ Subscribe to an uppy-event. See below for the full list of events. Uppy exposes events that you can subscribe to in your app: +### `file-added` + +Fired each time file is added. + +```javascript +uppy.on('file-added', (file) => { + console.log('Added file', file) +}) +``` + +### `file-removed` + +Fired each time file is removed. + +```javascript +uppy.on('file-removed', (file) => { + console.log('Removed file', file) +}) +``` + +### `upload` + +Fired when upload starts. + +```javascript +uppy.on('upload', () => { + console.log('Starting upload...') +}) +``` + ### `upload-progress` Fired each time file upload progress is available, `data` object looks like this: diff --git a/website/src/docs/xhrupload.md b/website/src/docs/xhrupload.md index aefaf1689..eb680d36b 100644 --- a/website/src/docs/xhrupload.md +++ b/website/src/docs/xhrupload.md @@ -59,6 +59,8 @@ headers: { Send all files in a single multipart request. When `bundle` is `true`, `formData` must also be set to `true`. +> Note: When `bundle` is `true`, file metadata is **not** sent to the endpoint. This is because it's not obvious how metadata should be sent when there are multiple files in a single request. If you need this, please open an issue and we'll try to figure it out together. + All files will be appended to the provided `fieldName` field in the request. To upload files on different fields, use [`uppy.setFileState()`](/docs/uppy#uppy-setFileState-fileID-state) to set the `xhrUpload.fieldName` property on the file: ```js @@ -72,11 +74,16 @@ uppy.setFileState(otherFileID, { ### `getResponseData(xhr)` -When an upload has completed, Uppy will extract response data from the upload endpoint and send it back in the `upload-success` event: +When an upload has completed, Uppy will extract response data from the upload endpoint. This response data will be available on the file's `.response` property, and be emitted in the `upload-success` event: ```js -uppy.on('upload-success', (fileId, resp, uploadURL) => { - // do something with resp +uppy.getFile(fileID).response +// { status: HTTP status code, +// body: extracted response data } + +uppy.on('upload-success', (fileID, body) => { + // do something with extracted response data + // (`body` is equivalent to `uppy.getFile(fileID).response.body`) }) ``` @@ -101,7 +108,7 @@ getResponseData (xhr) { } ``` -### `getResponseError(xhr)` +### `getResponseError(xhr.responseText, xhr)` If the upload endpoint responds with a non-2xx status code, the upload is assumed to have failed. The endpoint might have responded with some information about the error, though. @@ -110,7 +117,7 @@ Pass in a `getResponseError` function to extract error data from the `XMLHttpReq For example, if the endpoint responds with a JSON object containing a `{ message }` property, this would show that message to the user: ```js -getResponseError (xhr) { +getResponseError (responseText, xhr) { return new Error(JSON.parse(xhr.response).message) } ``` @@ -131,6 +138,31 @@ The default is 30 seconds. Limit the amount of uploads going on at the same time. Passing `0` means no limit. +## POST Parameters / Form Fields + +When using XHRUpload with `formData: true`, file metadata is sent along with each upload request. You can set metadata for a file using [`uppy.setFileMeta(fileID, data)`](/docs/uppy#uppy-setFileMeta-fileID-data), or for all files simultaneously using [`uppy.setMeta(data)`](/docs/uppy#uppy-setMeta-data). + +It may be useful to set metadata depending on some file properties, such as the size. You can use the [`file-added`](/docs/uppy/#file-added) event and the [`uppy.setFileMeta(fileID, data)`](/docs/uppy#uppy-setFileMeta-fileID-data) method to do this: + +```js +uppy.on('file-added', (file) => { + uppy.setFileMeta(file.id, { + size: file.size + }) +}) +``` + +Now, a form field named `size` will be sent along to the [`endpoint`](#endpoint-39-39) once the upload starts. + +By default, all metadata is sent, including Uppy's default `name` and `type` metadata. If you do not want the `name` and `type` metadata properties to be sent to your upload endpoint, you can use the [`metaFields`](#metaFields-null) option to restrict the field names that should be sent. + +```js +uppy.use(XHRUpload, { + // Only send our own `size` metadata field. + metaFields: ['size'] +}) +``` + ## Uploading to a PHP Server The XHRUpload plugin works similarly to a `` upload. You can use the `$_FILES` variable on the server to work with uploaded files. See the PHP documentation on [Handling file uploads][PHP.file-upload]. diff --git a/website/src/examples/dashboard/app.es6 b/website/src/examples/dashboard/app.es6 index 72750a497..f1326aedb 100644 --- a/website/src/examples/dashboard/app.es6 +++ b/website/src/examples/dashboard/app.es6 @@ -3,6 +3,7 @@ const Dashboard = require('uppy/lib/plugins/Dashboard') const GoogleDrive = require('uppy/lib/plugins/GoogleDrive') const Dropbox = require('uppy/lib/plugins/Dropbox') const Instagram = require('uppy/lib/plugins/Instagram') +const Url = require('uppy/lib/plugins/Url') const Webcam = require('uppy/lib/plugins/Webcam') const Tus = require('uppy/lib/plugins/Tus') @@ -58,6 +59,10 @@ function uppyInit () { uppy.use(Instagram, { target: Dashboard, host: UPPY_SERVER }) } + if (opts.Url) { + uppy.use(Url, { target: Dashboard, host: UPPY_SERVER }) + } + if (opts.Webcam) { uppy.use(Webcam, { target: Dashboard }) } diff --git a/website/src/examples/dashboard/app.html b/website/src/examples/dashboard/app.html index 810992d59..d532cd64e 100644 --- a/website/src/examples/dashboard/app.html +++ b/website/src/examples/dashboard/app.html @@ -9,6 +9,7 @@ + @@ -27,6 +28,7 @@ GoogleDrive: document.querySelector('#opts-GoogleDrive'), Dropbox: document.querySelector('#opts-Dropbox'), Instagram: document.querySelector('#opts-Instagram'), + Url: document.querySelector('#opts-Url'), autoProceed: document.querySelector('#opts-autoProceed'), restrictions: document.querySelector('#opts-restrictions') } @@ -37,6 +39,7 @@ GoogleDrive: true, Instagram: true, Dropbox: false, + Url: true, autoProceed: false, restrictions: false } diff --git a/website/src/examples/i18n/app.html b/website/src/examples/i18n/app.html index 667ea8187..7922b483b 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.23.0/dist/uppy.min.css -->
+https://transloadit.edgly.net/releases/uppy/v0.23.0/dist/uppy.min.js --> + +