refactor IPFS dropzone

* only allow single file for now
* async file content reading
* output list of files by default in Dropzone component
This commit is contained in:
Matthias Kretschmann 2019-09-18 12:52:42 +02:00
parent 302986d63b
commit 6d4b6b77c2
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 291 additions and 230 deletions

316
client/package-lock.json generated
View File

@ -1426,9 +1426,9 @@
}
},
"@hapi/subtext": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/@hapi/subtext/-/subtext-6.1.1.tgz",
"integrity": "sha512-Y7NjKFRPwlzKRw5IdwRou42hR4IBQZolT+/DlvfSr/CBjGyu38n5+9LKfNKzqB/0AVEk+xynCijsx1o1UVWX8A==",
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/@hapi/subtext/-/subtext-6.1.2.tgz",
"integrity": "sha512-G1kqD1E2QdxpvpL26WieIyo3z0qCa/sAGSa2TJI/PYPWCR9rL0rqFvhWY774xPZ4uK1PV3TIaJcx8AruAvxclg==",
"requires": {
"@hapi/boom": "7.x.x",
"@hapi/bourne": "1.x.x",
@ -1759,9 +1759,9 @@
}
},
"@oceanprotocol/squid": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.7.2.tgz",
"integrity": "sha512-zIfGeqrFi0fZsSiFREq66xTxD0FMO6pBsNCsLFn7KlCq4H6keSSif0iIiDboBQ28uOuqZEG1t7HomCYrmXuoEg==",
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.7.3.tgz",
"integrity": "sha512-6Tgf8iwFJFkvVWhpdn0vrmGQE6t8h1bnepjO0wYEjGl/5Xd1VLEbwDTiOVuAUHyvVIPFcG83XGC4L0L1JfqeUQ==",
"requires": {
"@oceanprotocol/keeper-contracts": "^0.11.1",
"@oceanprotocol/secret-store-client": "0.0.15",
@ -1877,6 +1877,15 @@
"graceful-fs": "^4.1.6"
}
},
"minipass": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.6.5.tgz",
"integrity": "sha512-ewSKOPFH9blOLXx0YSE+mbrNMBFPS+11a2b03QZ+P4LVrUHW/GAlqeYC7DBknDyMWkHzrzTpDhUvy7MUxqyrPA==",
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
}
},
"nan": {
"version": "2.14.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
@ -1985,13 +1994,13 @@
}
},
"tar": {
"version": "4.4.10",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.10.tgz",
"integrity": "sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==",
"version": "4.4.11",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.11.tgz",
"integrity": "sha512-iI4zh3ktLJKaDNZKZc+fUONiQrSn9HkCFzamtb7k8FFmVilHVob7QsLX/VySAW8lAviMzMbFw4QtFb4errwgYA==",
"requires": {
"chownr": "^1.1.1",
"fs-minipass": "^1.2.5",
"minipass": "^2.3.5",
"minipass": "^2.6.4",
"minizlib": "^1.2.1",
"mkdirp": "^0.5.0",
"safe-buffer": "^5.1.2",
@ -2833,12 +2842,6 @@
"integrity": "sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==",
"dev": true
},
"@types/yargs-parser": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.0.0.tgz",
"integrity": "sha512-wBlsw+8n21e6eTd4yVv8YD/E3xq0O6nNnJIquutAsFGE7EyMKz7W6RNT6BRu1SmdgmlCZ9tb0X+j+D6HGr8pZw==",
"dev": true
},
"@typescript-eslint/eslint-plugin": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.6.0.tgz",
@ -3134,9 +3137,9 @@
}
},
"acorn-jsx": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz",
"integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg==",
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.2.tgz",
"integrity": "sha512-tiNTrP1MP0QrChmD2DdupCr6HWSFeKVw5d/dHTu4Y7rkAkRhU/Dt7dphAfIUyxtHpl/eBVip5uTNSpQJHylpAw==",
"dev": true
},
"acorn-walk": {
@ -6843,7 +6846,6 @@
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
"integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
"dev": true,
"requires": {
"is-obj": "^1.0.0"
}
@ -7234,111 +7236,6 @@
}
}
},
"eslint": {
"version": "5.16.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-5.16.0.tgz",
"integrity": "sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
"ajv": "^6.9.1",
"chalk": "^2.1.0",
"cross-spawn": "^6.0.5",
"debug": "^4.0.1",
"doctrine": "^3.0.0",
"eslint-scope": "^4.0.3",
"eslint-utils": "^1.3.1",
"eslint-visitor-keys": "^1.0.0",
"espree": "^5.0.1",
"esquery": "^1.0.1",
"esutils": "^2.0.2",
"file-entry-cache": "^5.0.1",
"functional-red-black-tree": "^1.0.1",
"glob": "^7.1.2",
"globals": "^11.7.0",
"ignore": "^4.0.6",
"import-fresh": "^3.0.0",
"imurmurhash": "^0.1.4",
"inquirer": "^6.2.2",
"js-yaml": "^3.13.0",
"json-stable-stringify-without-jsonify": "^1.0.1",
"levn": "^0.3.0",
"lodash": "^4.17.11",
"minimatch": "^3.0.4",
"mkdirp": "^0.5.1",
"natural-compare": "^1.4.0",
"optionator": "^0.8.2",
"path-is-inside": "^1.0.2",
"progress": "^2.0.0",
"regexpp": "^2.0.1",
"semver": "^5.5.1",
"strip-ansi": "^4.0.0",
"strip-json-comments": "^2.0.1",
"table": "^5.2.3",
"text-table": "^0.2.0"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"dev": true,
"requires": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
"semver": "^5.5.0",
"shebang-command": "^1.2.0",
"which": "^1.2.9"
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"import-fresh": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz",
"integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==",
"dev": true,
"requires": {
"parent-module": "^1.0.0",
"resolve-from": "^4.0.0"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
"ansi-regex": "^3.0.0"
}
}
}
},
"eslint-config-react-app": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-4.0.1.tgz",
@ -7650,17 +7547,6 @@
"integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==",
"dev": true
},
"espree": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/espree/-/espree-5.0.1.tgz",
"integrity": "sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==",
"dev": true,
"requires": {
"acorn": "^6.0.7",
"acorn-jsx": "^5.0.0",
"eslint-visitor-keys": "^1.0.0"
}
},
"esprima": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@ -8599,6 +8485,7 @@
"inherits": "^2.0.3",
"readable-stream": "^2.3.6"
}
},
"fnv1a": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/fnv1a/-/fnv1a-1.0.1.tgz",
@ -10911,9 +10798,9 @@
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
},
"inquirer": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.0.tgz",
"integrity": "sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==",
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz",
"integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==",
"dev": true,
"requires": {
"ansi-escapes": "^3.2.0",
@ -12423,7 +12310,6 @@
"is-alphabetical": "^1.0.0",
"is-decimal": "^1.0.0"
}
"is-arguments": {
},
"is-arrayish": {
"version": "0.2.1",
@ -16960,9 +16846,9 @@
"integrity": "sha1-DMj20OK2IrR5xA1JnEbWS3Vcb18="
},
"nanoid": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.1.tgz",
"integrity": "sha512-0YbJdaL4JFoejIOoawgLcYValFGJ2iyUuVDIWL3g8Es87SSOWFbWdRUMV3VMSiyPs3SQ3QxCIxFX00q5DLkMCw=="
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.0.tgz",
"integrity": "sha512-g5WwS+p6Cm+zQhO2YOpRbQThZVnNb7DDq74h8YDCLfAGynrEOrbx2E16dc8ciENiP1va5sqaAruqn2sN+xpkWg=="
},
"nanomatch": {
"version": "1.2.13",
@ -17422,12 +17308,6 @@
"integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
"dev": true
},
"object-is": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
"dev": true
},
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@ -20414,12 +20294,111 @@
"workbox-webpack-plugin": "4.2.0"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
"dev": true
},
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"dev": true,
"requires": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
"semver": "^5.5.0",
"shebang-command": "^1.2.0",
"which": "^1.2.9"
},
"dependencies": {
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
}
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"eslint": {
"version": "5.16.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-5.16.0.tgz",
"integrity": "sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
"ajv": "^6.9.1",
"chalk": "^2.1.0",
"cross-spawn": "^6.0.5",
"debug": "^4.0.1",
"doctrine": "^3.0.0",
"eslint-scope": "^4.0.3",
"eslint-utils": "^1.3.1",
"eslint-visitor-keys": "^1.0.0",
"espree": "^5.0.1",
"esquery": "^1.0.1",
"esutils": "^2.0.2",
"file-entry-cache": "^5.0.1",
"functional-red-black-tree": "^1.0.1",
"glob": "^7.1.2",
"globals": "^11.7.0",
"ignore": "^4.0.6",
"import-fresh": "^3.0.0",
"imurmurhash": "^0.1.4",
"inquirer": "^6.2.2",
"js-yaml": "^3.13.0",
"json-stable-stringify-without-jsonify": "^1.0.1",
"levn": "^0.3.0",
"lodash": "^4.17.11",
"minimatch": "^3.0.4",
"mkdirp": "^0.5.1",
"natural-compare": "^1.4.0",
"optionator": "^0.8.2",
"path-is-inside": "^1.0.2",
"progress": "^2.0.0",
"regexpp": "^2.0.1",
"semver": "^5.5.1",
"strip-ansi": "^4.0.0",
"strip-json-comments": "^2.0.1",
"table": "^5.2.3",
"text-table": "^0.2.0"
},
"dependencies": {
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
}
}
},
"espree": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/espree/-/espree-5.0.1.tgz",
"integrity": "sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==",
"dev": true,
"requires": {
"acorn": "^6.0.7",
"acorn-jsx": "^5.0.0",
"eslint-visitor-keys": "^1.0.0"
}
},
"fs-extra": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@ -20438,6 +20417,16 @@
"dev": true,
"optional": true
},
"import-fresh": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz",
"integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==",
"dev": true,
"requires": {
"parent-module": "^1.0.0",
"resolve-from": "^4.0.0"
}
},
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@ -20447,6 +20436,12 @@
"graceful-fs": "^4.1.6"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"resolve": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
@ -20456,11 +20451,26 @@
"path-parse": "^1.0.6"
}
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
},
"semver": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
"integrity": "sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==",
"dev": true
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": {
"ansi-regex": "^3.0.0"
}
}
}
},
@ -21134,9 +21144,9 @@
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
"sanitize-filename": {
}
},
"sanitize-filename": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz",
"integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==",
@ -22833,9 +22843,9 @@
"dev": true
},
"table": {
"version": "5.4.4",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.4.tgz",
"integrity": "sha512-IIfEAUx5QlODLblLrGTTLJA7Tk0iLSGBvgY8essPRVNGHAzThujww1YqHLs6h3HfTg55h++RzLHH5Xw/rfv+mg==",
"version": "5.4.6",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
"integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
"dev": true,
"requires": {
"ajv": "^6.10.2",

View File

@ -14,7 +14,7 @@
},
"dependencies": {
"@oceanprotocol/art": "^2.2.0",
"@oceanprotocol/squid": "^0.7.2",
"@oceanprotocol/squid": "^0.7.3",
"@oceanprotocol/typographies": "^0.1.0",
"@sindresorhus/slugify": "^0.9.1",
"axios": "^0.19.0",

View File

@ -35,3 +35,11 @@
opacity: .5;
pointer-events: none;
}
.dropzoneFiles {
padding: $spacer 0;
ul {
margin: 0;
}
}

View File

@ -1,34 +1,62 @@
import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
import styles from './Dropzone.module.scss'
import { formatBytes } from '../../utils/utils'
export default function Dropzone({
handleOnDrop,
disabled
disabled,
multiple
}: {
handleOnDrop(files: File[]): void
disabled?: boolean
multiple?: boolean
}) {
const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [
handleOnDrop
])
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop
})
const {
acceptedFiles,
getRootProps,
getInputProps,
isDragActive,
isDragReject
} = useDropzone({ onDrop })
const files = acceptedFiles.map((file: any) => (
<li key={file.path}>
{file.path} - {formatBytes(file.size, 0)}
</li>
))
return (
<div
{...getRootProps({
className: isDragActive
? styles.dragover
: disabled
? styles.disabled
: styles.dropzone
})}
>
<input {...getInputProps()} />
<p>{`Drag 'n' drop some files here, or click to select files`}</p>
</div>
<>
{acceptedFiles.length > 0 ? (
<aside className={styles.dropzoneFiles}>
<ul>{files}</ul>
</aside>
) : (
<div
{...getRootProps({
className: isDragActive
? styles.dragover
: disabled
? styles.disabled
: styles.dropzone
})}
>
<input {...getInputProps({ multiple })} />
<p>
{isDragActive && !isDragReject
? `Drop it like it's hot!`
: multiple
? `Drag 'n' drop some files here, or click to select files`
: `Drag 'n' drop a file here, or click to select a file`}
{}
</p>
</div>
)}
</>
)
}

View File

@ -1,11 +1,12 @@
/* eslint-disable no-console */
import React, { useState } from 'react'
import React, { useState, useEffect } from 'react'
import useIpfsApi from '../../../../hooks/use-ipfs-api'
import Label from '../../../../components/atoms/Form/Label'
import Spinner from '../../../../components/atoms/Spinner'
import Dropzone from '../../../../components/molecules/Dropzone'
import { formatBytes, pingUrl } from './utils'
import { formatBytes } from '../../../../utils/utils'
import { pingUrl, readFileAsync } from './utils'
import { ipfsGatewayUri } from '../../../../config'
import styles from './index.module.scss'
@ -26,54 +27,56 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
const [loading, setLoading] = useState(false)
const [message, setMessage] = useState('')
const [received, setReceived] = useState(0)
async function saveToIpfs(data: Buffer, size: number) {
const totalSize = formatBytes(size, 0)
setLoading(true)
setMessage(`Adding to IPFS<br /><small>0/${totalSize}</small><br />`)
useEffect(() => {
setMessage(
`Adding to IPFS<br />
<small>${formatBytes(received, 0)}</small><br />`
)
}, [received])
async function addToIpfs(data: Buffer | ArrayBuffer | File | File[]) {
try {
const response = await ipfs.add(data, {
progress: (length: number) =>
setMessage(
`Adding to IPFS<br />
<small>${formatBytes(
length,
0
)}/${totalSize}</small><br />`
)
progress: (length: number) => {
console.log(`Received: ${formatBytes(length, 0)}`)
setReceived(length)
}
})
console.log(response)
const cid = response[0].hash
console.log(`File added: ${cid}`)
// Ping gateway url to make it globally available,
// but store native url in DDO.
const urlGateway = `${ipfsGatewayUri}/ipfs/${cid}`
const url = `ipfs://${cid}`
setMessage('Checking IPFS gateway URL')
await pingUrl(urlGateway)
// add IPFS url to file.url
addFile(url)
return cid
} catch (error) {
console.error(`Adding to IPFS failed: ${error.message}`)
setLoading(false)
}
}
function handleOnDrop(files: File[]) {
files.forEach((file: File) => {
const reader: any = new FileReader()
async function handleOnDrop(acceptedFiles: File[]) {
const { size } = acceptedFiles[0]
const totalSize = formatBytes(size, 0)
reader.readAsArrayBuffer(file)
reader.onloadend = () => {
const buffer: any = Buffer.from(reader.result)
saveToIpfs(buffer, file.size)
}
})
setLoading(true)
setMessage(`Adding to IPFS<br /><small>0/${totalSize}</small><br />`)
// Add file to IPFS node
const content: any = await readFileAsync(acceptedFiles[0])
const data = Buffer.from(content)
const cid = await addToIpfs(data)
if (!cid) return
// Ping gateway url to make it globally available,
// but store native url in DDO.
const urlGateway = `${ipfsGatewayUri}/ipfs/${cid}`
const url = `ipfs://${cid}`
setMessage('Checking IPFS gateway URL')
await pingUrl(urlGateway)
// add IPFS url to file.url
addFile(url)
}
return (
@ -84,7 +87,11 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
{loading ? (
<Spinner message={message} />
) : (
<Dropzone handleOnDrop={handleOnDrop} disabled={!isIpfsReady} />
<Dropzone
multiple={false}
handleOnDrop={handleOnDrop}
disabled={!isIpfsReady}
/>
)}
{ipfsMessage !== '' && (
<div className={styles.message} title={ipfsVersion}>

View File

@ -13,12 +13,16 @@ export async function pingUrl(url: string) {
}
}
export function formatBytes(a: number, b: number) {
if (a === 0) return '0 Bytes'
const c = 1024
const d = b || 2
const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const f = Math.floor(Math.log(a) / Math.log(c))
return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
export function readFileAsync(file: File) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onerror = () => {
reader.abort()
reject(new DOMException('Problem parsing input file.'))
}
reader.onload = () => {
resolve(reader.result)
}
reader.readAsArrayBuffer(file)
})
}

View File

@ -1,6 +1,7 @@
import React, { FormEvent, PureComponent, ChangeEvent } from 'react'
import axios from 'axios'
import { Logger } from '@oceanprotocol/squid'
import { Logger, File } from '@oceanprotocol/squid'
import shortid from 'shortid'
import Button from '../../../components/atoms/Button'
import Help from '../../../components/atoms/Form/Help'
import ItemForm from './ItemForm'
@ -10,17 +11,8 @@ import styles from './index.module.scss'
import { serviceUri } from '../../../config'
import cleanupContentType from '../../../utils/cleanupContentType'
import shortid from 'shortid'
export interface File {
url: string
contentType: string
checksum?: string
checksumType?: string
contentLength?: number
resourceId?: string
encoding?: string
compression?: string
export interface FilePublish extends File {
found: boolean // non-standard
}
@ -80,7 +72,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
}
private async getFile(url: string) {
const file: File = {
const file: FilePublish = {
url,
contentType: '',
found: false // non-standard
@ -124,7 +116,7 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
})
}
const file: File | undefined = await this.getFile(url)
const file: FilePublish | undefined = await this.getFile(url)
file && this.props.files.push(file)
const event = {

View File

@ -1,5 +1,5 @@
import React, { ChangeEvent, Component, FormEvent } from 'react'
import { Logger } from '@oceanprotocol/squid'
import { Logger, File } from '@oceanprotocol/squid'
import Web3 from 'web3'
import Route from '../../components/templates/Route'
import Form from '../../components/atoms/Form/Form'
@ -11,7 +11,6 @@ import ReactGA from 'react-ga'
import { allowPricing } from '../../config'
import { steps } from '../../data/form-publish.json'
import Content from '../../components/atoms/Content'
import { File } from './Files'
import withTracker from '../../hoc/withTracker'
type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'

13
client/src/utils/utils.ts Normal file
View File

@ -0,0 +1,13 @@
export function formatBytes(a: number, b: number) {
if (a === 0) return '0 Bytes'
const c = 1024
const d = b || 2
const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const f = Math.floor(Math.log(a) / Math.log(c))
return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
}
export function arraySum(array: number[]) {
return array.reduce((a, b) => a + b, 0)
}