diff --git a/package-lock.json b/package-lock.json
index b369cb84..3db44f58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -904,67 +904,67 @@
},
"babel-plugin-syntax-async-functions": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
+ "resolved": "https://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-async-generators": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz",
"integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=",
"dev": true
},
"babel-plugin-syntax-class-constructor-call": {
"version": "6.18.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz",
"integrity": "sha1-nLnTn+Q8hgC+yBRkVt3L1OGnZBY=",
"dev": true
},
"babel-plugin-syntax-class-properties": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
"integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=",
"dev": true
},
"babel-plugin-syntax-decorators": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
"integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
"dev": true
},
"babel-plugin-syntax-dynamic-import": {
"version": "6.18.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
"integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
"dev": true
},
"babel-plugin-syntax-exponentiation-operator": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz",
+ "resolved": "https://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-export-extensions": {
"version": "6.13.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz",
"integrity": "sha1-cKFITw+QiaToStRLrDU8lbmxJyE=",
"dev": true
},
"babel-plugin-syntax-flow": {
"version": "6.18.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
"integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=",
"dev": true
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
- "resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+ "resolved": "https://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": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+ "resolved": "https://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
},
@@ -1795,7 +1795,7 @@
},
"browserify-aes": {
"version": "1.2.0",
- "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
"dev": true,
"requires": {
@@ -1832,7 +1832,7 @@
},
"browserify-rsa": {
"version": "4.0.1",
- "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+ "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
"dev": true,
"requires": {
@@ -1876,7 +1876,7 @@
},
"buffer": {
"version": "4.9.1",
- "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
@@ -2672,7 +2672,7 @@
},
"create-hash": {
"version": "1.2.0",
- "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
"dev": true,
"requires": {
@@ -2685,7 +2685,7 @@
},
"create-hmac": {
"version": "1.1.7",
- "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+ "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
"dev": true,
"requires": {
@@ -3139,7 +3139,7 @@
},
"diffie-hellman": {
"version": "5.0.3",
- "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+ "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
"dev": true,
"requires": {
@@ -3209,7 +3209,7 @@
},
"dom-converter": {
"version": "0.1.4",
- "resolved": "http://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
+ "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
"integrity": "sha1-pF71cnuJDJv/5tfIduexnLDhfzs=",
"dev": true,
"requires": {
@@ -3275,7 +3275,7 @@
},
"duplexer": {
"version": "0.1.1",
- "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
"integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
"dev": true
},
@@ -3687,7 +3687,7 @@
},
"express": {
"version": "4.16.3",
- "resolved": "http://registry.npmjs.org/express/-/express-4.16.3.tgz",
+ "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz",
"integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=",
"dev": true,
"requires": {
@@ -3766,7 +3766,7 @@
},
"external-editor": {
"version": "2.2.0",
- "resolved": "http://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
"integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
"dev": true,
"requires": {
@@ -3896,6 +3896,11 @@
"escape-string-regexp": "^1.0.5"
}
},
+ "file-drop-element": {
+ "version": "0.0.2",
+ "resolved": "https://registry.npmjs.org/file-drop-element/-/file-drop-element-0.0.2.tgz",
+ "integrity": "sha512-ie1c+6fiHYuJUh9VBav+iVexHa3rzAb8P90oNPfWx7vzY8sUtTNynYgj9ak69onp5zLK0eyeLe75JWqpSRBNNw=="
+ },
"file-loader": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
@@ -4829,13 +4834,13 @@
"dependencies": {
"minimist": {
"version": "0.1.0",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz",
"integrity": "sha1-md9lelJXTCHJBXSX33QnkLK0wN4=",
"dev": true
},
"yargs": {
"version": "1.2.6",
- "resolved": "http://registry.npmjs.org/yargs/-/yargs-1.2.6.tgz",
+ "resolved": "https://registry.npmjs.org/yargs/-/yargs-1.2.6.tgz",
"integrity": "sha1-nHtKgv1dWVsr8Xq23MQxNUMv40s=",
"dev": true,
"requires": {
@@ -5252,7 +5257,7 @@
},
"html-webpack-plugin": {
"version": "3.2.0",
- "resolved": "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
"integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
"dev": true,
"requires": {
@@ -5308,7 +5313,7 @@
},
"readable-stream": {
"version": "1.0.34",
- "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"dev": true,
"requires": {
@@ -5340,7 +5345,7 @@
},
"http-errors": {
"version": "1.6.3",
- "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
"dev": true,
"requires": {
@@ -5369,7 +5374,7 @@
},
"http-proxy-middleware": {
"version": "0.18.0",
- "resolved": "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
+ "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
"integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==",
"dev": true,
"requires": {
@@ -5643,7 +5648,7 @@
},
"inquirer": {
"version": "5.2.0",
- "resolved": "http://registry.npmjs.org/inquirer/-/inquirer-5.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-5.2.0.tgz",
"integrity": "sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==",
"dev": true,
"requires": {
@@ -5844,7 +5849,7 @@
},
"is-builtin-module": {
"version": "1.0.0",
- "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
"integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
"dev": true,
"requires": {
@@ -6565,7 +6570,7 @@
},
"onetime": {
"version": "1.1.0",
- "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true
},
@@ -6583,7 +6588,7 @@
},
"load-json-file": {
"version": "1.1.0",
- "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
"requires": {
@@ -6765,7 +6770,7 @@
},
"onetime": {
"version": "1.1.0",
- "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true
},
@@ -7010,7 +7015,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
@@ -7100,7 +7105,7 @@
},
"mini-css-extract-plugin": {
"version": "0.3.0",
- "resolved": "http://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.3.0.tgz",
+ "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.3.0.tgz",
"integrity": "sha512-xWifHy3fqq0HZeEZ0WTi22tek85YQqNFlGxtvSXJXBi1O6XgqKMyK6fsupSBaaIsyBdfpr9QsG93hrWu13pruQ==",
"dev": true,
"requires": {
@@ -7131,7 +7136,7 @@
},
"minimist": {
"version": "0.0.8",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
},
@@ -7194,7 +7199,7 @@
},
"mkdirp": {
"version": "0.5.1",
- "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
@@ -7449,7 +7454,7 @@
},
"chalk": {
"version": "0.4.0",
- "resolved": "http://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz",
"integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=",
"dev": true,
"requires": {
@@ -7791,7 +7796,7 @@
},
"p-cancelable": {
"version": "0.4.1",
- "resolved": "http://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
+ "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
"integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
"dev": true
},
@@ -7901,7 +7906,7 @@
},
"parse-asn1": {
"version": "5.1.1",
- "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
+ "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
"integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
"dev": true,
"requires": {
@@ -8028,7 +8033,7 @@
},
"pause-stream": {
"version": "0.0.11",
- "resolved": "http://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+ "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
"integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
"dev": true,
"requires": {
@@ -8805,7 +8810,7 @@
},
"public-encrypt": {
"version": "4.0.2",
- "resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
"integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
"dev": true,
"requires": {
@@ -9695,7 +9700,7 @@
},
"sha.js": {
"version": "2.4.11",
- "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+ "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
"dev": true,
"requires": {
@@ -10330,7 +10335,7 @@
"dependencies": {
"rimraf": {
"version": "2.2.8",
- "resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
"integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
"dev": true
}
@@ -10350,7 +10355,7 @@
},
"through": {
"version": "2.3.8",
- "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
+ "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},
@@ -12122,7 +12127,7 @@
},
"wrap-ansi": {
"version": "2.1.0",
- "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
"dev": true,
"requires": {
@@ -12518,7 +12523,7 @@
},
"minimist": {
"version": "1.2.0",
- "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
},
diff --git a/package.json b/package.json
index cb01a7b5..9a2fa084 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
"linkstate": "^1.1.1",
"preact": "^8.3.1",
"pretty-bytes": "^5.1.0",
- "worker-plugin": "^1.1.1"
+ "worker-plugin": "^1.1.1",
+ "file-drop-element": "0.0.2"
}
}
diff --git a/src/components/App/custom-els/FileDrop/index.ts b/src/components/App/custom-els/FileDrop/index.ts
deleted file mode 100644
index 5f298ebf..00000000
--- a/src/components/App/custom-els/FileDrop/index.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { bind } from '../../../../lib/initial-util';
-import './styles.css';
-
-// tslint:disable-next-line:max-line-length
-function firstMatchingItem(list: DataTransferItemList, acceptVal: string): DataTransferItem | undefined {
- // Split accepts values by ',' then by '/'. Trim everything & lowercase.
- const accepts = acceptVal.toLowerCase().split(',').map((accept) => {
- return accept.trim().split('/').map(part => part.trim());
- }).filter(acceptParts => acceptParts.length === 2); // Filter invalid values
-
- return Array.from(list).find((item) => {
- if (item.kind !== 'file') return false;
-
- // 'Parse' the type.
- const [typeMain, typeSub] = item.type.toLowerCase().split('/').map(s => s.trim());
-
- for (const [acceptMain, acceptSub] of accepts) {
- // Look for an exact match, or a partial match if * is accepted, eg image/*.
- if (typeMain === acceptMain && (acceptSub === '*' || typeSub === acceptSub)) {
- return true;
- }
- }
- return false;
- });
-}
-
-function getFileData(data: DataTransfer, accept: string): File | undefined {
- const dragDataItem = firstMatchingItem(data.items, accept);
- if (!dragDataItem) return;
-
- return dragDataItem.getAsFile() || undefined;
-}
-
-interface FileDropEventInit extends EventInit {
- action: FileDropAccept;
- file: File;
-}
-
-type FileDropAccept = 'drop' | 'paste';
-
-// Safari and Edge don't quite support extending Event, this works around it.
-function fixExtendedEvent(instance: Event, type: Function) {
- if (!(instance instanceof type)) {
- Object.setPrototypeOf(instance, type.prototype);
- }
-}
-
-export class FileDropEvent extends Event {
- private _action: FileDropAccept;
- private _file: File;
- constructor(typeArg: string, eventInitDict: FileDropEventInit) {
- super(typeArg, eventInitDict);
- fixExtendedEvent(this, FileDropEvent);
- this._file = eventInitDict.file;
- this._action = eventInitDict.action;
- }
-
- get action() {
- return this._action;
- }
-
- get file() {
- return this._file;
- }
-}
-
-/*
- Example Usage.
-
- [everything in here is a drop target.]
-
-
- dropElement.addEventListner('dropfile', (event) => console.log(event.detail))
-*/
-export class FileDrop extends HTMLElement {
-
- private _dragEnterCount = 0;
-
- constructor() {
- super();
- this.addEventListener('dragover', event => event.preventDefault());
- this.addEventListener('drop', this._onDrop);
- this.addEventListener('dragenter', this._onDragEnter);
- this.addEventListener('dragend', () => this._reset());
- this.addEventListener('dragleave', this._onDragLeave);
- this.addEventListener('paste', this._onPaste);
- }
-
- get accept() {
- return this.getAttribute('accept') || '';
- }
-
- set accept(val: string) {
- this.setAttribute('accept', val);
- }
-
- @bind
- private _onDragEnter(event: DragEvent) {
- this._dragEnterCount += 1;
- if (this._dragEnterCount > 1) return;
-
- // We don't have data, attempt to get it and if it matches, set the correct state.
- const validDrop: boolean = event.dataTransfer.items.length ?
- !!firstMatchingItem(event.dataTransfer.items, this.accept) :
- // Safari doesn't give file information on drag enter, so the best we can do is return valid.
- true;
-
- if (validDrop) {
- this.classList.add('drop-valid');
- } else {
- this.classList.add('drop-invalid');
- }
- }
-
- @bind
- private _onDragLeave() {
- this._dragEnterCount -= 1;
- if (this._dragEnterCount === 0) {
- this._reset();
- }
- }
-
- @bind
- private _onDrop(event: DragEvent) {
- event.preventDefault();
- this._reset();
- const action = 'drop';
- const file = getFileData(event.dataTransfer, this.accept);
- if (file === undefined) return;
-
- this.dispatchEvent(new FileDropEvent('filedrop', { action, file }));
- }
-
- @bind
- private _onPaste(event: ClipboardEvent) {
- const action = 'paste';
- const file = getFileData(event.clipboardData, this.accept);
- if (file === undefined) return;
-
- this.dispatchEvent(new FileDropEvent('filedrop', { action, file }));
- }
-
- private _reset() {
- this._dragEnterCount = 0;
- this.classList.remove('drop-valid');
- this.classList.remove('drop-invalid');
- }
-}
-
-customElements.define('file-drop', FileDrop);
diff --git a/src/components/App/custom-els/FileDrop/missing-types.d.ts b/src/components/App/custom-els/FileDrop/missing-types.d.ts
deleted file mode 100644
index 116ac6f6..00000000
--- a/src/components/App/custom-els/FileDrop/missing-types.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { FileDropEvent, FileDrop } from '.';
-
-declare global {
-
- interface HTMLElementEventMap {
- 'filedrop': FileDropEvent;
- }
-
- namespace JSX {
- interface IntrinsicElements {
- 'file-drop': FileDropAttributes;
- }
-
- interface FileDropAttributes extends HTMLAttributes {
- accept?: string;
- onfiledrop?: ((this: FileDrop, ev: FileDropEvent) => any) | null;
- }
- }
-}
diff --git a/src/components/App/custom-els/FileDrop/styles.css b/src/components/App/custom-els/FileDrop/styles.css
deleted file mode 100644
index ffb6888d..00000000
--- a/src/components/App/custom-els/FileDrop/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-file-drop {
- display: block;
-}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 3aa34cb0..7bea30f5 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -2,8 +2,8 @@ import { h, Component } from 'preact';
import { bind, linkRef, Fileish } from '../../lib/initial-util';
import * as style from './style.scss';
-import { FileDropEvent } from './custom-els/FileDrop';
-import './custom-els/FileDrop';
+import * as FileDropElement from 'file-drop-element';
+import 'file-drop-element';
import SnackBarElement, { SnackOptions } from '../../lib/SnackBar';
import '../../lib/SnackBar';
import Intro from '../intro';
@@ -54,7 +54,7 @@ export default class App extends Component {
}
@bind
- private onFileDrop(event: FileDropEvent) {
+ private onFileDrop(event: FileDropElement.FileDropEvent) {
const { file } = event;
if (!file) return;
this.setState({ file });