From 8be2004826ce2f8cd136c6b7cc7b2e987f818b72 Mon Sep 17 00:00:00 2001 From: Evgenia Karunus Date: Wed, 5 Jun 2019 19:04:34 +0500 Subject: [PATCH] Feature/replace dnd in drag drop package (#1565) * /examples/dev - added drag-drop plugin dev environment * @uppy/drag-drop - moved isDragDropSupported() to @uppy/utils * @uppy/drag-drop - got rid of drag-drop npm library * examples/dev - made compiled files placed in /output instead of /lib * ~/examples/dev - made watchify only watch files once * @uppy/drag-drop - add onPaste * /examples/dev - readded html css override-attempts * @uppy/drag-drop - made whole area clickable, and made it accessible * @uppy/drag-drop - removed excessive outline in firefox * REVERTED last 2 commits --- .gitignore | 2 +- examples/dev/{index.html => Dashboard.html} | 23 ++- examples/dev/Dashboard.js | 70 +++++++++ examples/dev/DragDrop.html | 25 +++ examples/dev/DragDrop.js | 27 ++++ examples/dev/index.js | 8 + examples/dev/main.js | 68 -------- examples/dev/output/.empty | 0 examples/dev/package.json | 12 +- package-lock.json | 115 ++++++-------- package.json | 2 +- 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 | 148 ++++++++++-------- packages/@uppy/drag-drop/src/style.scss | 19 +-- .../@uppy/utils/src/isDragDropSupported.js | 22 +++ packages/@uppy/utils/types/index.d.ts | 4 + 18 files changed, 313 insertions(+), 237 deletions(-) rename examples/dev/{index.html => Dashboard.html} (81%) create mode 100644 examples/dev/Dashboard.js create mode 100644 examples/dev/DragDrop.html create mode 100644 examples/dev/DragDrop.js create mode 100644 examples/dev/index.js delete mode 100644 examples/dev/main.js create mode 100644 examples/dev/output/.empty create mode 100644 packages/@uppy/utils/src/isDragDropSupported.js diff --git a/.gitignore b/.gitignore index 162650657..edf72955e 100644 --- a/.gitignore +++ b/.gitignore @@ -26,7 +26,7 @@ uppy-*.tgz .eslintcache .cache -output/* +**/output/* !output/.keep examples/dev/file.txt issues.txt diff --git a/examples/dev/index.html b/examples/dev/Dashboard.html similarity index 81% rename from examples/dev/index.html rename to examples/dev/Dashboard.html index 9d8af9b7a..99a64e8a8 100644 --- a/examples/dev/index.html +++ b/examples/dev/Dashboard.html @@ -3,9 +3,7 @@ - uppy - - + Dashboard -
-

Uppy is here

+ + +
+

Dashboard is here

+ +

True ?
@@ -55,6 +52,6 @@
- + diff --git a/examples/dev/Dashboard.js b/examples/dev/Dashboard.js new file mode 100644 index 000000000..53ffc48e6 --- /dev/null +++ b/examples/dev/Dashboard.js @@ -0,0 +1,70 @@ +const Uppy = require('@uppy/core/src') +const Dashboard = require('@uppy/dashboard/src') +const Instagram = require('@uppy/instagram/src') +const Dropbox = require('@uppy/dropbox/src') +const GoogleDrive = require('@uppy/google-drive/src') +const Url = require('@uppy/url/src') +const Webcam = require('@uppy/webcam/src') +const Tus = require('@uppy/tus/src') +// const XHRUpload = require('@uppy/xhr-upload/src') +const Form = require('@uppy/form/src') + +const TUS_ENDPOINT = 'https://master.tus.io/files/' +// const XHR_ENDPOINT = 'https://api2.transloadit.com' + +module.exports = () => { + const uppyDashboard = Uppy({ + debug: true, + meta: { + username: 'John', + license: 'Creative Commons' + } + }) + .use(Dashboard, { + trigger: '#pick-files', + // inline: true, + target: '.foo', + metaFields: [ + { id: 'license', name: 'License', placeholder: 'specify license' }, + { id: 'caption', name: 'Caption', placeholder: 'add caption' } + ], + showProgressDetails: true, + proudlyDisplayPoweredByUppy: true, + note: '2 files, images and video only' + }) + .use(GoogleDrive, { target: Dashboard, companionUrl: 'http://localhost:3020' }) + .use(Instagram, { target: Dashboard, companionUrl: 'http://localhost:3020' }) + .use(Dropbox, { target: Dashboard, companionUrl: 'http://localhost:3020' }) + .use(Url, { target: Dashboard, companionUrl: 'http://localhost:3020' }) + .use(Webcam, { target: Dashboard }) + .use(Tus, { endpoint: TUS_ENDPOINT }) + // .use(XHRUpload, { endpoint: XHR_ENDPOINT }) + .use(Form, { target: '#upload-form' }) + // .use(GoldenRetriever, {serviceWorker: true}) + + uppyDashboard.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) + }) + + const modalTrigger = document.querySelector('#pick-files') + if (modalTrigger) modalTrigger.click() + + /* eslint-disable compat/compat */ + if ('serviceWorker' in navigator) { + navigator.serviceWorker + .register('/sw.js') + .then((registration) => { + console.log('ServiceWorker registration successful with scope: ', registration.scope) + }) + .catch((error) => { + console.log('Registration failed with ' + error) + }) + } + /* eslint-enable */ +} diff --git a/examples/dev/DragDrop.html b/examples/dev/DragDrop.html new file mode 100644 index 000000000..db97bfecc --- /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 000000000..36af27d04 --- /dev/null +++ b/examples/dev/DragDrop.js @@ -0,0 +1,27 @@ +const Uppy = require('@uppy/core/src') +const Tus = require('@uppy/tus/src') + +const DragDrop = require('@uppy/drag-drop/src') +const ProgressBar = require('@uppy/progress-bar/src') + +module.exports = () => { + 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/index.js b/examples/dev/index.js new file mode 100644 index 000000000..d82aa91ee --- /dev/null +++ b/examples/dev/index.js @@ -0,0 +1,8 @@ +const DragDrop = require('./DragDrop.js') +const Dashboard = require('./Dashboard.js') + +switch (window.location.pathname.toLowerCase()) { + case '/': + case '/dashboard.html': Dashboard(); break + case '/dragdrop.html': DragDrop(); break +} diff --git a/examples/dev/main.js b/examples/dev/main.js deleted file mode 100644 index ec4303d0d..000000000 --- a/examples/dev/main.js +++ /dev/null @@ -1,68 +0,0 @@ -const Uppy = require('./../../packages/@uppy/core/src') -const Dashboard = require('./../../packages/@uppy/dashboard/src') -const Instagram = require('./../../packages/@uppy/instagram/src') -const Dropbox = require('./../../packages/@uppy/dropbox/src') -const GoogleDrive = require('./../../packages/@uppy/google-drive/src') -const Url = require('./../../packages/@uppy/url/src') -const Webcam = require('./../../packages/@uppy/webcam/src') -const Tus = require('./../../packages/@uppy/tus/src') -// const XHRUpload = require('./../../packages/@uppy/xhr-upload/src') -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({ - debug: true, - meta: { - username: 'John', - license: 'Creative Commons' - } -}) - .use(Dashboard, { - trigger: '#pick-files', - // inline: true, - target: '.foo', - metaFields: [ - { id: 'license', name: 'License', placeholder: 'specify license' }, - { id: 'caption', name: 'Caption', placeholder: 'add caption' } - ], - showProgressDetails: true, - proudlyDisplayPoweredByUppy: true, - note: '2 files, images and video only' - }) - .use(GoogleDrive, { target: Dashboard, companionUrl: 'http://localhost:3020' }) - .use(Instagram, { target: Dashboard, companionUrl: 'http://localhost:3020' }) - .use(Dropbox, { target: Dashboard, companionUrl: 'http://localhost:3020' }) - .use(Url, { target: Dashboard, companionUrl: 'http://localhost:3020' }) - .use(Webcam, { target: Dashboard }) - .use(Tus, { endpoint: TUS_ENDPOINT }) - // .use(XHRUpload, { endpoint: XHR_ENDPOINT }) - .use(Form, { target: '#upload-form' }) - // .use(GoldenRetriever, {serviceWorker: true}) - -uppy.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) -}) - -/* eslint-disable compat/compat */ -if ('serviceWorker' in navigator) { - navigator.serviceWorker - .register('/sw.js') - .then((registration) => { - console.log('ServiceWorker registration successful with scope: ', registration.scope) - }) - .catch((error) => { - console.log('Registration failed with ' + error) - }) -} -/* eslint-enable */ - -var modalTrigger = document.querySelector('#pick-files') -if (modalTrigger) modalTrigger.click() diff --git a/examples/dev/output/.empty b/examples/dev/output/.empty new file mode 100644 index 000000000..e69de29bb diff --git a/examples/dev/package.json b/examples/dev/package.json index f0fde4dce..cdc3daec9 100644 --- a/examples/dev/package.json +++ b/examples/dev/package.json @@ -1,10 +1,5 @@ { "name": "uppy-dev-example", - "aliasify": { - "aliases": { - "@uppy": "../../packages/@uppy" - } - }, "dependencies": { "@babel/core": "^7.4.4", "aliasify": "^2.1.0", @@ -13,6 +8,11 @@ }, "private": true, "scripts": { - "watch:sandbox": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify main.js -o bundle.js" + "watch:sandbox": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify index.js -o output/index.js" + }, + "aliasify": { + "aliases": { + "@uppy": "../../packages/@uppy" + } } } diff --git a/package-lock.json b/package-lock.json index f9bba267b..41527ff82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6073,11 +6073,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", @@ -10024,16 +10019,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", @@ -12590,11 +12575,6 @@ "integrity": "sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==", "dev": true }, - "flatten": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", - "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=" - }, "flush-write-stream": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz", @@ -12831,21 +12811,21 @@ "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==", "dev": true, "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=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true @@ -12863,14 +12843,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "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==", "dev": true, "optional": true, @@ -12881,28 +12861,28 @@ }, "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=", "dev": true, "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=", "dev": true, "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=", "dev": true, "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=", "dev": true, "optional": true @@ -12926,28 +12906,28 @@ }, "delegates": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "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=", "dev": true, "optional": true }, "fs.realpath": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "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=", "dev": true, "optional": true, @@ -12979,7 +12959,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=", "dev": true, "optional": true @@ -12996,7 +12976,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==", "dev": true, "optional": true, @@ -13006,7 +12986,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -13017,21 +12997,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "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==", "dev": true, "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=", "dev": true, "optional": true, @@ -13041,14 +13021,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "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==", "dev": true, "optional": true, @@ -13058,14 +13038,14 @@ }, "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true, "optional": true }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, @@ -13113,7 +13093,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -13142,7 +13122,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==", "dev": true, "optional": true, @@ -13155,21 +13135,21 @@ }, "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=", "dev": true, "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=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -13179,21 +13159,21 @@ }, "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=", "dev": true, "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=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -13204,14 +13184,14 @@ }, "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=", "dev": true, "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==", "dev": true, "optional": true @@ -13231,7 +13211,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -13240,7 +13220,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==", "dev": true, "optional": true, @@ -13273,14 +13253,14 @@ }, "safer-buffer": { "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "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==", "dev": true, "optional": true @@ -13294,21 +13274,21 @@ }, "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=", "dev": true, "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=", "dev": true, "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=", "dev": true, "optional": true, @@ -13320,7 +13300,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==", "dev": true, "optional": true, @@ -13330,7 +13310,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=", "dev": true, "optional": true, @@ -13340,7 +13320,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=", "dev": true, "optional": true @@ -13372,7 +13352,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=", "dev": true, "optional": true @@ -13389,7 +13369,7 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true @@ -23846,11 +23826,6 @@ "is-promise": "^2.1.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", diff --git a/package.json b/package.json index 806fd1027..c5955dd6c 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/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", diff --git a/packages/@uppy/dashboard/package.json b/packages/@uppy/dashboard/package.json index 81bd97795..5917146a7 100644 --- a/packages/@uppy/dashboard/package.json +++ b/packages/@uppy/dashboard/package.json @@ -29,7 +29,6 @@ "@uppy/utils": "1.0.2", "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 0c5f1a033..fdfc410a7 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -818,7 +818,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 9b68ea5ab..e2aeab47a 100644 --- a/packages/@uppy/drag-drop/package.json +++ b/packages/@uppy/drag-drop/package.json @@ -26,7 +26,6 @@ }, "dependencies": { "@uppy/utils": "1.0.2", - "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 e89c42a11..39aefeb06 100644 --- a/packages/@uppy/drag-drop/src/index.js +++ b/packages/@uppy/drag-drop/src/index.js @@ -1,7 +1,8 @@ const { Plugin } = require('@uppy/core') const Translator = require('@uppy/utils/lib/Translator') const toArray = require('@uppy/utils/lib/toArray') -const dragDrop = require('drag-drop') +const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported') +const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles') const { h } = require('preact') /** @@ -35,7 +36,8 @@ module.exports = class DragDrop extends Plugin { this.opts = Object.assign({}, defaultOpts, opts) // Check for browser dragDrop support - this.isDragDropSupported = this.checkDragDropSupport() + this.isDragDropSupported = isDragDropSupported() + this.removeDragOverClassTimeout = null // i18n this.translator = new Translator([ this.defaultLocale, this.uppy.locale, this.opts.locale ]) @@ -43,68 +45,35 @@ 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.checkDragDropSupport = this.checkDragDropSupport.bind(this) + 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) } - /** - * 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 + addFile (file) { + try { + this.uppy.addFile({ + source: this.id, + name: file.name, + type: file.type, + data: file, + meta: { + relativePath: file.relativePath || null + } + }) + } catch (err) { + // Nothing, restriction errors handled in Core } - - if (!('FormData' in window)) { - return false - } - - if (!('FileReader' in window)) { - return false - } - - return true - } - - 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 - } - }) } handleInputChange (event) { this.uppy.log('[DragDrop] Files selected through input') - const files = toArray(event.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) // We clear the input after a file is selected, because otherwise // change event is not fired in Chrome and Safari when a file @@ -115,6 +84,49 @@ 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() + 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 + this.uppy.log('[DragDrop] File were dropped') + getDroppedFiles(event.dataTransfer) + .then((files) => { + 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) { /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */ const hiddenInputStyle = { @@ -125,18 +137,32 @@ 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 ( -
+