From da64828cfeeec323c4900459d80b82b114197b57 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Fri, 17 May 2019 04:50:59 +0500 Subject: [PATCH 01/10] /examples/dev - added drag-drop plugin dev environment --- examples/dev/{index.html => Dashboard.html} | 21 +++++------------ examples/dev/{main.js => Dashboard.js} | 10 ++++----- examples/dev/DragDrop.html | 25 +++++++++++++++++++++ examples/dev/DragDrop.js | 25 +++++++++++++++++++++ examples/dev/package.json | 5 ++++- package.json | 2 +- 6 files changed, 65 insertions(+), 23 deletions(-) rename examples/dev/{index.html => Dashboard.html} (84%) rename examples/dev/{main.js => Dashboard.js} (94%) create mode 100644 examples/dev/DragDrop.html create mode 100644 examples/dev/DragDrop.js diff --git a/examples/dev/index.html b/examples/dev/Dashboard.html similarity index 84% rename from examples/dev/index.html rename to examples/dev/Dashboard.html index 9d8af9b7a2..36757ddbb5 100644 --- a/examples/dev/index.html +++ b/examples/dev/Dashboard.html @@ -4,8 +4,6 @@ uppy - - + + +
-

Uppy is here

+

Dashboard is here


@@ -55,6 +44,6 @@

Uppy is here

- + diff --git a/examples/dev/main.js b/examples/dev/Dashboard.js similarity index 94% rename from examples/dev/main.js rename to examples/dev/Dashboard.js index ec4303d0d4..1033303374 100644 --- a/examples/dev/main.js +++ b/examples/dev/Dashboard.js @@ -12,7 +12,7 @@ const Form = require('./../../packages/@uppy/form/src') const TUS_ENDPOINT = 'https://master.tus.io/files/' // const XHR_ENDPOINT = 'https://api2.transloadit.com' -const uppy = Uppy({ +const uppyDashboard = Uppy({ debug: true, meta: { username: 'John', @@ -41,7 +41,7 @@ const uppy = Uppy({ .use(Form, { target: '#upload-form' }) // .use(GoldenRetriever, {serviceWorker: true}) -uppy.on('complete', (result) => { +uppyDashboard.on('complete', (result) => { if (result.failed.length === 0) { console.log('Upload successful 😀') } else { @@ -51,6 +51,9 @@ uppy.on('complete', (result) => { console.log('failed files:', result.failed) }) +const modalTrigger = document.querySelector('#pick-files') +if (modalTrigger) modalTrigger.click() + /* eslint-disable compat/compat */ if ('serviceWorker' in navigator) { navigator.serviceWorker @@ -63,6 +66,3 @@ if ('serviceWorker' in navigator) { }) } /* eslint-enable */ - -var modalTrigger = document.querySelector('#pick-files') -if (modalTrigger) modalTrigger.click() diff --git a/examples/dev/DragDrop.html b/examples/dev/DragDrop.html new file mode 100644 index 0000000000..58dc60f8bb --- /dev/null +++ b/examples/dev/DragDrop.html @@ -0,0 +1,25 @@ + + + + + + Drag-Drop + + + +
+

Drag-drop is here

+
+
+
+ + + + + diff --git a/examples/dev/DragDrop.js b/examples/dev/DragDrop.js new file mode 100644 index 0000000000..df4507a4f1 --- /dev/null +++ b/examples/dev/DragDrop.js @@ -0,0 +1,25 @@ +const Uppy = require('./../../packages/@uppy/core/src') +const Tus = require('./../../packages/@uppy/tus/src') + +const DragDrop = require('./../../packages/@uppy/drag-drop/src') +const ProgressBar = require('./../../packages/@uppy/progress-bar/src') + +const uppyDragDrop = Uppy({ + debug: true, + autoProceed: true +}) + .use(DragDrop, { + target: '#uppyDragDrop' + }) + .use(ProgressBar, { target: '#uppyDragDrop-progress', hideAfterFinish: false }) + .use(Tus, { endpoint: 'https://master.tus.io/files/' }) + +uppyDragDrop.on('complete', (result) => { + if (result.failed.length === 0) { + console.log('Upload successful 😀') + } else { + console.warn('Upload failed 😞') + } + console.log('successful files:', result.successful) + console.log('failed files:', result.failed) +}) diff --git a/examples/dev/package.json b/examples/dev/package.json index 637e74ac0c..441d28d9e5 100644 --- a/examples/dev/package.json +++ b/examples/dev/package.json @@ -3,10 +3,13 @@ "aliasify": "^2.1.0", "babel-core": "^6.26.3", "babelify": "^8.0.0", + "npm-run-all": "^4.1.5", "watchify": "^3.11.0" }, "scripts": { - "watch:sandbox": "watchify -t babelify -t aliasify main.js -o bundle.js -vd" + "watch:sandbox": "npm-run-all --parallel watch:Dashboard watch:DragDrop", + "watch:Dashboard": "watchify -t babelify -t aliasify Dashboard.js -o lib/Dashboard.js -vd", + "watch:DragDrop": "watchify -t babelify -t aliasify DragDrop.js -o lib/DragDrop.js -vd" }, "aliasify": { "aliases": { diff --git a/package.json b/package.json index 6a93aa1f53..6a9cfcc7bf 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "build": "npm-run-all --parallel build:js build:css --serial size", "contributors:fetch": "bash -c 'githubcontrib --owner transloadit --repo uppy --cols 6 $([ \"${GITHUB_TOKEN:-}\" = \"\" ] && echo \"\" || echo \"--authToken ${GITHUB_TOKEN:-}\") --showlogin true --sortOrder desc'", "contributors:save": "bash -c 'replace-x -m \"[\\s\\S]+\" \"\n## Contributors\n\n$(npm run --silent contributors:fetch)\n\" README.md'", - "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/bundle.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"", + "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --index Dashboard.html --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/lib/*.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"", "dev:watch-sandbox": "cd examples/dev && npm run watch:sandbox", "dev:with-companion": "npm-run-all --parallel start:companion dev:watch-sandbox watch:js:lib watch:css dev:browsersync", "dev": "npm-run-all --parallel dev:watch-sandbox watch:js:lib watch:css dev:browsersync", From 4bfe2261155a1192aaf17e0d592f29cfd1d4c759 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Fri, 17 May 2019 19:31:55 +0500 Subject: [PATCH 02/10] @uppy/drag-drop - moved isDragDropSupported() to @uppy/utils --- packages/@uppy/drag-drop/src/index.js | 26 ++----------------- .../@uppy/utils/src/isDragDropSupported.js | 22 ++++++++++++++++ packages/@uppy/utils/types/index.d.ts | 4 +++ 3 files changed, 28 insertions(+), 24 deletions(-) create mode 100644 packages/@uppy/utils/src/isDragDropSupported.js diff --git a/packages/@uppy/drag-drop/src/index.js b/packages/@uppy/drag-drop/src/index.js index e32ab078da..aabd876f3a 100644 --- a/packages/@uppy/drag-drop/src/index.js +++ b/packages/@uppy/drag-drop/src/index.js @@ -1,6 +1,7 @@ const { Plugin } = require('@uppy/core') const Translator = require('@uppy/utils/lib/Translator') const toArray = require('@uppy/utils/lib/toArray') +const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported') const dragDrop = require('drag-drop') const { h } = require('preact') @@ -35,7 +36,7 @@ module.exports = class DragDrop extends Plugin { this.opts = Object.assign({}, defaultOpts, opts) // Check for browser dragDrop support - this.isDragDropSupported = this.checkDragDropSupport() + this.isDragDropSupported = isDragDropSupported() // i18n this.translator = new Translator([ this.defaultLocale, this.uppy.locale, this.opts.locale ]) @@ -45,32 +46,9 @@ module.exports = class DragDrop extends Plugin { // Bind `this` to class methods this.handleDrop = this.handleDrop.bind(this) this.handleInputChange = this.handleInputChange.bind(this) - this.checkDragDropSupport = this.checkDragDropSupport.bind(this) this.render = this.render.bind(this) } - /** - * Checks if the browser supports Drag & Drop (not supported on mobile devices, for example). - * @return {Boolean} - */ - checkDragDropSupport () { - const div = document.createElement('div') - - if (!('draggable' in div) || !('ondragstart' in div && 'ondrop' in div)) { - return false - } - - if (!('FormData' in window)) { - return false - } - - if (!('FileReader' in window)) { - return false - } - - return true - } - handleDrop (files) { this.uppy.log('[DragDrop] Files dropped') diff --git a/packages/@uppy/utils/src/isDragDropSupported.js b/packages/@uppy/utils/src/isDragDropSupported.js new file mode 100644 index 0000000000..ccb2647a9d --- /dev/null +++ b/packages/@uppy/utils/src/isDragDropSupported.js @@ -0,0 +1,22 @@ +/** + * Checks if the browser supports Drag & Drop (not supported on mobile devices, for example). + * + * @return {Boolean} + */ +module.exports = function isDragDropSupported () { + const div = document.createElement('div') + + if (!('draggable' in div) || !('ondragstart' in div && 'ondrop' in div)) { + return false + } + + if (!('FormData' in window)) { + return false + } + + if (!('FileReader' in window)) { + return false + } + + return true +} diff --git a/packages/@uppy/utils/types/index.d.ts b/packages/@uppy/utils/types/index.d.ts index 3d88782cf3..6131507a28 100644 --- a/packages/@uppy/utils/types/index.d.ts +++ b/packages/@uppy/utils/types/index.d.ts @@ -93,6 +93,10 @@ declare module '@uppy/utils/lib/isObjectURL' { export default function isObjectURL(url: string): boolean; } +declare module '@uppy/utils/lib/isDragDropSupported' { + export default function isDragDropSupported(): boolean; +} + declare module '@uppy/utils/lib/isPreviewSupported' { export default function isPreviewSupported(mime: string): boolean; } From 2859a91a183381a8f40e97d6bf621114038b3519 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Fri, 17 May 2019 23:15:50 +0500 Subject: [PATCH 03/10] @uppy/drag-drop - got rid of drag-drop npm library --- package-lock.json | 159 +++++++++++------------- packages/@uppy/dashboard/package.json | 1 - packages/@uppy/dashboard/src/index.js | 3 +- packages/@uppy/drag-drop/package.json | 1 - packages/@uppy/drag-drop/src/index.js | 114 +++++++++++------ packages/@uppy/drag-drop/src/style.scss | 19 +-- 6 files changed, 155 insertions(+), 142 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2c8e8023c6..eba0a3dde4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1954,7 +1954,7 @@ }, "acorn-jsx": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz", "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=", "dev": true, "requires": { @@ -1963,7 +1963,7 @@ "dependencies": { "acorn": { "version": "3.3.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", + "resolved": "http://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=", "dev": true } @@ -2666,7 +2666,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -2934,7 +2934,7 @@ }, "babel-plugin-istanbul": { "version": "4.1.6", - "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz", + "resolved": "http://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz", "integrity": "sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==", "dev": true, "requires": { @@ -2952,25 +2952,25 @@ }, "babel-plugin-syntax-async-functions": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=", "dev": true }, "babel-plugin-syntax-exponentiation-operator": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=", "dev": true }, "babel-plugin-syntax-jsx": { "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", "dev": true }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=", "dev": true }, @@ -3606,11 +3606,6 @@ "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==" }, - "blob-to-buffer": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/blob-to-buffer/-/blob-to-buffer-1.2.8.tgz", - "integrity": "sha512-re0AIxakF504MgeMtIyJkVcZ8T5aUxtp/QmTMlmjyb3P44E1BEv5x3LATBGApWAJATyXHtkXRD+gWTmeyYLiQA==" - }, "block-stream": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", @@ -6783,16 +6778,6 @@ "resolved": "https://registry.npmjs.org/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz", "integrity": "sha1-ED01J/0xUo9AGIEwyEHv3XgmTlw=" }, - "drag-drop": { - "version": "2.13.3", - "resolved": "https://registry.npmjs.org/drag-drop/-/drag-drop-2.13.3.tgz", - "integrity": "sha512-g+qp+ssi6+v9Qnyyco0dfyA9sYZYYDddGbc0STdMHc9hfyHeYzqGs4v18jFksgHDtYBWf+ocnUkO6jF7MbFudg==", - "requires": { - "blob-to-buffer": "^1.0.2", - "flatten": "^1.0.2", - "run-parallel": "^1.0.0" - } - }, "dtrace-provider": { "version": "0.8.7", "resolved": "https://registry.npmjs.org/dtrace-provider/-/dtrace-provider-0.8.7.tgz", @@ -7365,7 +7350,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -7476,7 +7461,7 @@ }, "eslint": { "version": "4.19.1", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz", + "resolved": "http://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz", "integrity": "sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==", "dev": true, "requires": { @@ -7853,7 +7838,7 @@ "dependencies": { "semver": { "version": "5.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", "dev": true } @@ -8828,7 +8813,8 @@ "flatten": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", - "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=" + "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=", + "dev": true }, "flush-write-stream": { "version": "1.1.1", @@ -9010,19 +8996,19 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "optional": true }, @@ -9038,13 +9024,13 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "optional": true, "requires": { @@ -9060,25 +9046,25 @@ }, "code-point-at": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "optional": true }, @@ -9099,19 +9085,19 @@ }, "delegates": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz", + "resolved": false, "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "optional": true, "requires": { @@ -9120,13 +9106,13 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "resolved": false, "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "optional": true, "requires": { @@ -9156,7 +9142,7 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "optional": true }, @@ -9171,7 +9157,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", + "resolved": false, "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "optional": true, "requires": { @@ -9180,7 +9166,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "optional": true, "requires": { @@ -9190,19 +9176,19 @@ }, "inherits": { "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "optional": true }, "ini": { "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "optional": true, "requires": { @@ -9211,13 +9197,13 @@ }, "isarray": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "optional": true, "requires": { @@ -9226,7 +9212,7 @@ }, "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "optional": true }, @@ -9251,7 +9237,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "optional": true, "requires": { @@ -9295,7 +9281,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "optional": true, "requires": { @@ -9321,7 +9307,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "resolved": false, "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "optional": true, "requires": { @@ -9333,19 +9319,19 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "resolved": false, "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "optional": true }, "once": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "optional": true, "requires": { @@ -9354,19 +9340,19 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "optional": true, "requires": { @@ -9376,13 +9362,13 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": false, "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "resolved": false, "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "optional": true }, @@ -9400,7 +9386,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "optional": true } @@ -9408,7 +9394,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": false, "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "optional": true, "requires": { @@ -9438,13 +9424,13 @@ }, "safer-buffer": { "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "optional": true }, "sax": { "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "resolved": false, "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "optional": true }, @@ -9456,19 +9442,19 @@ }, "set-blocking": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "resolved": false, "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "optional": true, "requires": { @@ -9479,7 +9465,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": false, "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "optional": true, "requires": { @@ -9488,7 +9474,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "optional": true, "requires": { @@ -9497,7 +9483,7 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "resolved": false, "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "optional": true }, @@ -9518,7 +9504,7 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "resolved": false, "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "optional": true }, @@ -9533,7 +9519,7 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "optional": true }, @@ -10730,7 +10716,7 @@ }, "inquirer": { "version": "0.12.0", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz", + "resolved": "http://registry.npmjs.org/inquirer/-/inquirer-0.12.0.tgz", "integrity": "sha1-HvK/1jUE3wvHV4X/+MLEHfEvB34=", "dev": true, "requires": { @@ -10757,7 +10743,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -11513,7 +11499,7 @@ }, "yargs": { "version": "11.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", + "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "dev": true, "requires": { @@ -11627,7 +11613,7 @@ }, "jest-get-type": { "version": "22.4.3", - "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz", + "resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz", "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==", "dev": true }, @@ -11868,7 +11854,7 @@ }, "yargs": { "version": "11.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", + "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "dev": true, "requires": { @@ -12174,7 +12160,7 @@ }, "json5": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz", "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", "dev": true }, @@ -18301,7 +18287,7 @@ }, "progress": { "version": "1.1.8", - "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz", + "resolved": "http://registry.npmjs.org/progress/-/progress-1.1.8.tgz", "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=", "dev": true }, @@ -19241,7 +19227,7 @@ }, "regexpp": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz", "integrity": "sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==", "dev": true }, @@ -19275,7 +19261,7 @@ }, "regjsgen": { "version": "0.2.0", - "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", + "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=", "dev": true }, @@ -19620,11 +19606,6 @@ "once": "^1.3.0" } }, - "run-parallel": { - "version": "1.1.9", - "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz", - "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==" - }, "run-queue": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz", @@ -21312,7 +21293,7 @@ }, "table": { "version": "3.8.3", - "resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz", + "resolved": "http://registry.npmjs.org/table/-/table-3.8.3.tgz", "integrity": "sha1-K7xULw/amGGnVdOUf+/Ys/UThV8=", "dev": true, "requires": { @@ -21338,7 +21319,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { diff --git a/packages/@uppy/dashboard/package.json b/packages/@uppy/dashboard/package.json index ac1a94ff81..4b4a2e122b 100644 --- a/packages/@uppy/dashboard/package.json +++ b/packages/@uppy/dashboard/package.json @@ -29,7 +29,6 @@ "@uppy/utils": "0.30.6", "classnames": "^2.2.6", "cuid": "^2.1.1", - "drag-drop": "2.13.3", "lodash.throttle": "^4.1.1", "preact": "8.2.9", "preact-css-transition-group": "^1.3.0", diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index f3700c2e56..136bb45759 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -802,7 +802,8 @@ module.exports = class Dashboard extends Plugin { metaFields: this.opts.metaFields, targets: [], // We'll make them visible once .containerWidth is determined - areInsidesReadyToBeVisible: false + areInsidesReadyToBeVisible: false, + isDraggingOver: false }) const { inline, closeAfterFinish } = this.opts diff --git a/packages/@uppy/drag-drop/package.json b/packages/@uppy/drag-drop/package.json index 7fdfd59c50..4151ca7b30 100644 --- a/packages/@uppy/drag-drop/package.json +++ b/packages/@uppy/drag-drop/package.json @@ -26,7 +26,6 @@ }, "dependencies": { "@uppy/utils": "0.30.6", - "drag-drop": "2.13.3", "preact": "8.2.9" }, "devDependencies": { diff --git a/packages/@uppy/drag-drop/src/index.js b/packages/@uppy/drag-drop/src/index.js index aabd876f3a..14e0859840 100644 --- a/packages/@uppy/drag-drop/src/index.js +++ b/packages/@uppy/drag-drop/src/index.js @@ -2,7 +2,7 @@ const { Plugin } = require('@uppy/core') const Translator = require('@uppy/utils/lib/Translator') const toArray = require('@uppy/utils/lib/toArray') const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported') -const dragDrop = require('drag-drop') +const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles') const { h } = require('preact') /** @@ -37,6 +37,7 @@ module.exports = class DragDrop extends Plugin { // Check for browser dragDrop support this.isDragDropSupported = isDragDropSupported() + this.removeDragOverClassTimeout = null // i18n this.translator = new Translator([ this.defaultLocale, this.uppy.locale, this.opts.locale ]) @@ -44,26 +45,26 @@ module.exports = class DragDrop extends Plugin { this.i18nArray = this.translator.translateArray.bind(this.translator) // Bind `this` to class methods - this.handleDrop = this.handleDrop.bind(this) this.handleInputChange = this.handleInputChange.bind(this) this.render = this.render.bind(this) + + this.handleDragOver = this.handleDragOver.bind(this) + this.handleDragLeave = this.handleDragLeave.bind(this) + this.handleDrop = this.handleDrop.bind(this) + this.addFile = this.addFile.bind(this) } - handleDrop (files) { - this.uppy.log('[DragDrop] Files dropped') - - files.forEach((file) => { - try { - this.uppy.addFile({ - source: this.id, - name: file.name, - type: file.type, - data: file - }) - } catch (err) { - // Nothing, restriction errors handled in Core - } - }) + addFile (file) { + try { + this.uppy.addFile({ + source: this.id, + name: file.name, + type: file.type, + data: file + }) + } catch (err) { + // Nothing, restriction errors handled in Core + } } handleInputChange (ev) { @@ -71,18 +72,46 @@ module.exports = class DragDrop extends Plugin { const files = toArray(ev.target.files) - files.forEach((file) => { - try { - this.uppy.addFile({ - source: this.id, - name: file.name, - type: file.type, - data: file - }) - } catch (err) { - // Nothing, restriction errors handled in Core - } - }) + files.forEach(this.addFile) + } + + handleDrop (event, dropCategory) { + event.preventDefault() + event.stopPropagation() + clearTimeout(this.removeDragOverClassTimeout) + // 1. Add a small (+) icon on drop + event.dataTransfer.dropEffect = 'copy' + + // 2. Remove dragover class + this.setPluginState({ isDraggingOver: false }) + + // 3. Add all dropped files + getDroppedFiles(event.dataTransfer) + .then((files) => { + if (files.length > 0) { + this.uppy.log('[DragDrop] Files were dropped') + files.forEach(this.addFile) + } + }) + } + + handleDragOver (event) { + event.preventDefault() + event.stopPropagation() + + clearTimeout(this.removeDragOverClassTimeout) + this.setPluginState({ isDraggingOver: true }) + } + + handleDragLeave (event) { + event.preventDefault() + event.stopPropagation() + + clearTimeout(this.removeDragOverClassTimeout) + // Timeout against flickering, this solution is taken from drag-drop library. Solution with 'pointer-events: none' didn't work across browsers. + this.removeDragOverClassTimeout = setTimeout(() => { + this.setPluginState({ isDraggingOver: false }) + }, 50) } render (state) { @@ -95,18 +124,31 @@ module.exports = class DragDrop extends Plugin { position: 'absolute', zIndex: -1 } - const DragDropClass = `uppy-Root uppy-DragDrop-container ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''}` - const DragDropStyle = { + + const dragDropClass = ` + uppy-Root + uppy-DragDrop-container + ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''} + ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''} + ` + + const dragDropStyle = { width: this.opts.width, height: this.opts.height } + const restrictions = this.uppy.opts.restrictions // empty value="" on file input, so that the input is cleared after a file is selected, // because Uppy will be handling the upload and so we can select same file // after removing — otherwise browser thinks it’s already selected return ( -
+

Dashboard is here

- + diff --git a/examples/dev/DragDrop.html b/examples/dev/DragDrop.html index 58dc60f8bb..1bca42933d 100644 --- a/examples/dev/DragDrop.html +++ b/examples/dev/DragDrop.html @@ -20,6 +20,6 @@

Drag-drop is here

- + diff --git a/examples/dev/output/.empty b/examples/dev/output/.empty new file mode 100644 index 0000000000..e69de29bb2 diff --git a/examples/dev/package.json b/examples/dev/package.json index 06d92fee11..0d84b7a834 100644 --- a/examples/dev/package.json +++ b/examples/dev/package.json @@ -15,8 +15,8 @@ "private": true, "scripts": { "watch:sandbox": "npm-run-all --parallel watch:Dashboard watch:DragDrop", - "watch:Dashboard": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify Dashboard.js -o lib/Dashboard.js", - "watch:DragDrop": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify DragDrop.js -o lib/DragDrop.js" + "watch:Dashboard": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify Dashboard.js -o output/Dashboard.js", + "watch:DragDrop": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify DragDrop.js -o output/DragDrop.js" }, "aliasify": { "aliases": { diff --git a/package.json b/package.json index 7fda784bd7..c5955dd6c0 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "build": "npm-run-all --parallel build:js build:css --serial size", "contributors:fetch": "bash -c 'githubcontrib --owner transloadit --repo uppy --cols 6 $([ \"${GITHUB_TOKEN:-}\" = \"\" ] && echo \"\" || echo \"--authToken ${GITHUB_TOKEN:-}\") --showlogin true --sortOrder desc'", "contributors:save": "bash -c 'replace-x -m \"[\\s\\S]+\" \"\n## Contributors\n\n$(npm run --silent contributors:fetch)\n\" README.md'", - "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --index Dashboard.html --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/lib/*.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"", + "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --index Dashboard.html --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/output/*.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"", "dev:watch-sandbox": "cd examples/dev && npm run watch:sandbox", "dev:with-companion": "npm-run-all --parallel start:companion dev:watch-sandbox watch:js:lib watch:css dev:browsersync", "dev": "npm-run-all --parallel dev:watch-sandbox watch:js:lib watch:css dev:browsersync", From 8e5dd526f6e4515b45d3b999bc2de8eba638c678 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Tue, 28 May 2019 07:06:48 +0500 Subject: [PATCH 05/10] ~/examples/dev - made watchify only watch files once --- examples/dev/Dashboard.html | 4 +- examples/dev/Dashboard.js | 120 ++++++++++++++++++------------------ examples/dev/DragDrop.html | 2 +- examples/dev/DragDrop.js | 44 ++++++------- examples/dev/index.js | 8 +++ examples/dev/package.json | 10 +-- 6 files changed, 96 insertions(+), 92 deletions(-) create mode 100644 examples/dev/index.js diff --git a/examples/dev/Dashboard.html b/examples/dev/Dashboard.html index e568224f09..23efa25e01 100644 --- a/examples/dev/Dashboard.html +++ b/examples/dev/Dashboard.html @@ -3,7 +3,7 @@ - uppy + Dashboard @@ -34,6 +41,7 @@

Dashboard is here

+
True ?
From 68422b19bdd0f1191e3e6928116734446a8016a9 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Tue, 4 Jun 2019 03:48:10 +0500 Subject: [PATCH 08/10] @uppy/drag-drop - made whole area clickable, and made it accessible --- examples/dev/DragDrop.html | 5 +- packages/@uppy/drag-drop/src/index.js | 92 ++++++++++++++----------- packages/@uppy/drag-drop/src/style.scss | 19 +++++ 3 files changed, 73 insertions(+), 43 deletions(-) diff --git a/examples/dev/DragDrop.html b/examples/dev/DragDrop.html index db97bfecc3..3d285c680d 100644 --- a/examples/dev/DragDrop.html +++ b/examples/dev/DragDrop.html @@ -10,13 +10,16 @@ main { text-align: center; margin: 20px auto; - width: 400px; + max-width: 400px; }

Drag-drop is here

+ +
+
diff --git a/packages/@uppy/drag-drop/src/index.js b/packages/@uppy/drag-drop/src/index.js index 39aefeb068..b0cf234a54 100644 --- a/packages/@uppy/drag-drop/src/index.js +++ b/packages/@uppy/drag-drop/src/index.js @@ -49,7 +49,6 @@ module.exports = class DragDrop extends Plugin { this.handleDragOver = this.handleDragOver.bind(this) this.handleDragLeave = this.handleDragLeave.bind(this) this.handleDrop = this.handleDrop.bind(this) - this.handlePaste = this.handlePaste.bind(this) this.addFile = this.addFile.bind(this) this.render = this.render.bind(this) } @@ -84,12 +83,6 @@ module.exports = class DragDrop extends Plugin { event.target.value = null } - handlePaste (event) { - this.uppy.log('[DragDrop] Files were pasted') - const files = toArray(event.clipboardData.files) - files.forEach(this.addFile) - } - handleDrop (event, dropCategory) { event.preventDefault() event.stopPropagation() @@ -127,20 +120,51 @@ module.exports = class DragDrop extends Plugin { }, 50) } - render (state) { - /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */ - const hiddenInputStyle = { - width: '0.1px', - height: '0.1px', - opacity: 0, - overflow: 'hidden', - position: 'absolute', - zIndex: -1 - } + renderHiddenFileInput () { + const restrictions = this.uppy.opts.restrictions + return ( + { this.fileInputRef = ref }} + name={this.opts.inputName} + multiple={restrictions.maxNumberOfFiles !== 1} + accept={restrictions.allowedFileTypes} + onchange={this.handleInputChange} /> + ) + } + + renderArrowSvg () { + return ( + + ) + } + renderLabel () { + return ( +
+ {this.i18nArray('dropHereOr', { + browse: {this.i18n('browse')} + })} +
+ ) + } + + renderNote () { + return ( + {this.opts.note} + ) + } + + render (state) { const dragDropClass = ` uppy-Root uppy-DragDrop-container + uppy-u-reset ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''} ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''} ` @@ -150,38 +174,22 @@ module.exports = class DragDrop extends Plugin { height: this.opts.height } - const restrictions = this.uppy.opts.restrictions - - // empty value="" on file input, so that the input is cleared after a file is selected, - // because Uppy will be handling the upload and so we can select same file - // after removing — otherwise browser thinks it’s already selected return ( -
this.fileInputRef.click()} onDragOver={this.handleDragOver} onDragLeave={this.handleDragLeave} - onDrop={this.handleDrop} - onPaste={this.handlePaste}> + onDrop={this.handleDrop} > + {this.renderHiddenFileInput()}
- - - {this.opts.note} + {this.renderArrowSvg()} + {this.renderLabel()} + {this.renderNote()}
-
+ ) } diff --git a/packages/@uppy/drag-drop/src/style.scss b/packages/@uppy/drag-drop/src/style.scss index 3faecf9b11..2e0d5466ca 100644 --- a/packages/@uppy/drag-drop/src/style.scss +++ b/packages/@uppy/drag-drop/src/style.scss @@ -7,6 +7,15 @@ justify-content: center; border-radius: 7px; background-color: $white; + cursor: pointer; + font-size: inherit; + font-color: inherit; + font-family: $font-family-base; + max-width: 100%; + &:focus{ + outline: none; + box-shadow: 0 0 0 3px rgba($blue, 0.4); + } } .uppy-DragDrop-inner { @@ -16,6 +25,16 @@ line-height: 1.4; } +// http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ +.uppy-DragDrop-input{ + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} + .uppy-DragDrop-arrow { width: 60px; height: 60px; From a1b8dba210cd7c401835a50c11acb5382372e055 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Tue, 4 Jun 2019 04:06:43 +0500 Subject: [PATCH 09/10] @uppy/drag-drop - removed excessive outline in firefox --- packages/@uppy/drag-drop/src/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/@uppy/drag-drop/src/style.scss b/packages/@uppy/drag-drop/src/style.scss index 2e0d5466ca..5987476d2c 100644 --- a/packages/@uppy/drag-drop/src/style.scss +++ b/packages/@uppy/drag-drop/src/style.scss @@ -16,6 +16,10 @@ outline: none; box-shadow: 0 0 0 3px rgba($blue, 0.4); } + // firefox fix: removes thin dotted outline + &::-moz-focus-inner { + border: 0; + } } .uppy-DragDrop-inner { From 8fbd9a6032c00b8300c806be746bf301b94396e8 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Wed, 19 Jun 2019 19:51:39 +0300 Subject: [PATCH 10/10] change dragText classname to browse, minor spacing and order changes --- packages/@uppy/drag-drop/src/index.js | 4 ++-- packages/@uppy/drag-drop/src/style.scss | 13 +++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/@uppy/drag-drop/src/index.js b/packages/@uppy/drag-drop/src/index.js index d1afece388..922b3625dc 100644 --- a/packages/@uppy/drag-drop/src/index.js +++ b/packages/@uppy/drag-drop/src/index.js @@ -150,7 +150,7 @@ module.exports = class DragDrop extends Plugin { return (
{this.i18nArray('dropHereOr', { - browse: {this.i18n('browse')} + browse: {this.i18n('browse')} })}
) @@ -165,8 +165,8 @@ module.exports = class DragDrop extends Plugin { render (state) { const dragDropClass = ` uppy-Root - uppy-DragDrop-container uppy-u-reset + uppy-DragDrop-container ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''} ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''} ` diff --git a/packages/@uppy/drag-drop/src/style.scss b/packages/@uppy/drag-drop/src/style.scss index 5987476d2c..18772861a4 100644 --- a/packages/@uppy/drag-drop/src/style.scss +++ b/packages/@uppy/drag-drop/src/style.scss @@ -8,14 +8,14 @@ border-radius: 7px; background-color: $white; cursor: pointer; - font-size: inherit; - font-color: inherit; font-family: $font-family-base; max-width: 100%; - &:focus{ + + &:focus { outline: none; box-shadow: 0 0 0 3px rgba($blue, 0.4); } + // firefox fix: removes thin dotted outline &::-moz-focus-inner { border: 0; @@ -30,7 +30,7 @@ } // http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ -.uppy-DragDrop-input{ +.uppy-DragDrop-input { width: 0.1px; height: 0.1px; opacity: 0; @@ -50,9 +50,10 @@ border: 2px dashed lighten($gray-500, 10%); } -.uppy-DragDrop--isDraggingOver{ +.uppy-DragDrop--isDraggingOver { border: 2px dashed $blue; background: $gray-200; + .uppy-DragDrop-arrow { fill: $gray-500; } @@ -70,6 +71,6 @@ color: lighten($gray-500, 10%); } -.uppy-DragDrop-dragText { +.uppy-DragDrop-browse { color: $blue; }