mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 08:16:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: FileUploader + Base64

Browse source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-05-31 22:31:14 +02:00
parent da092a9bd3
commit 1876db0ddc
7 changed files with 251 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

323
package-lock.json generated
View file

@ -2220,6 +2220,37 @@
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==", "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
"dev": true "dev": true
}, },
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-eslint": { "babel-eslint": {
"version": "10.1.0", "version": "10.1.0",
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@ -4767,9 +4798,9 @@
"dev": true "dev": true
}, },
"eventemitter3": { "eventemitter3": {
"version": "4.0.0", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
"integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==", "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
"dev": true "dev": true
}, },
"events": { "events": {
@ -6233,9 +6264,9 @@
"dev": true "dev": true
}, },
"html-entities": { "html-entities": {
"version": "1.2.1", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz", "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz",
"integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=", "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==",
"dev": true "dev": true
}, },
"html-minifier": { "html-minifier": {
@ -6384,16 +6415,10 @@
} }
} }
}, },
"http-parser-js": {
"version": "0.4.10",
"resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
"integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=",
"dev": true
},
"http-proxy": { "http-proxy": {
"version": "1.18.0", "version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz", "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==", "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"eventemitter3": "^4.0.0", "eventemitter3": "^4.0.0",
@ -6701,12 +6726,6 @@
"loose-envify": "^1.0.0" "loose-envify": "^1.0.0"
} }
}, },
"invert-kv": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
"integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
"dev": true
},
"ip": { "ip": {
"version": "1.1.5", "version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@ -7240,15 +7259,6 @@
"launch-editor": "^2.2.1" "launch-editor": "^2.2.1"
} }
}, },
"lcid": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
"integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
"dev": true,
"requires": {
"invert-kv": "^2.0.0"
}
},
"less": { "less": {
"version": "3.11.1", "version": "3.11.1",
"resolved": "https://registry.npmjs.org/less/-/less-3.11.1.tgz", "resolved": "https://registry.npmjs.org/less/-/less-3.11.1.tgz",
@ -7990,9 +8000,9 @@
} }
}, },
"loglevel": { "loglevel": {
"version": "1.6.7", "version": "1.6.8",
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.7.tgz", "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",
"integrity": "sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==", "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==",
"dev": true "dev": true
}, },
"loose-envify": { "loose-envify": {
@ -8029,15 +8039,6 @@
"semver": "^5.6.0" "semver": "^5.6.0"
} }
}, },
"map-age-cleaner": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
"integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
"dev": true,
"requires": {
"p-defer": "^1.0.0"
}
},
"map-cache": { "map-cache": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@ -8076,25 +8077,6 @@
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
"dev": true "dev": true
}, },
"mem": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
"integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
"dev": true,
"requires": {
"map-age-cleaner": "^0.1.1",
"mimic-fn": "^2.0.0",
"p-is-promise": "^2.0.0"
},
"dependencies": {
"mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true
}
}
},
"memory-fs": { "memory-fs": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@ -8650,10 +8632,14 @@
"dev": true "dev": true
}, },
"object-is": { "object-is": {
"version": "1.0.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.2.tgz", "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
"integrity": "sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==", "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
"dev": true "dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.5"
}
}, },
"object-keys": { "object-keys": {
"version": "1.1.1", "version": "1.1.1",
@ -8830,41 +8816,18 @@
"integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=", "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
"dev": true "dev": true
}, },
"os-locale": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
"integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
"dev": true,
"requires": {
"execa": "^1.0.0",
"lcid": "^2.0.0",
"mem": "^4.0.0"
}
},
"os-tmpdir": { "os-tmpdir": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true "dev": true
}, },
"p-defer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
"integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
"dev": true
},
"p-finally": { "p-finally": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
"dev": true "dev": true
}, },
"p-is-promise": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
"integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
"dev": true
},
"p-limit": { "p-limit": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
@ -10943,13 +10906,14 @@
} }
}, },
"sockjs": { "sockjs": {
"version": "0.3.19", "version": "0.3.20",
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
"integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==", "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==",
"dev": true, "dev": true,
"requires": { "requires": {
"faye-websocket": "^0.10.0", "faye-websocket": "^0.10.0",
"uuid": "^3.0.1" "uuid": "^3.4.0",
"websocket-driver": "0.6.5"
} }
}, },
"sockjs-client": { "sockjs-client": {
@ -12367,9 +12331,9 @@
} }
}, },
"webpack-dev-server": { "webpack-dev-server": {
"version": "3.10.3", "version": "3.11.0",
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz", "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz",
"integrity": "sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==", "integrity": "sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==",
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-html": "0.0.7", "ansi-html": "0.0.7",
@ -12380,31 +12344,31 @@
"debug": "^4.1.1", "debug": "^4.1.1",
"del": "^4.1.1", "del": "^4.1.1",
"express": "^4.17.1", "express": "^4.17.1",
"html-entities": "^1.2.1", "html-entities": "^1.3.1",
"http-proxy-middleware": "0.19.1", "http-proxy-middleware": "0.19.1",
"import-local": "^2.0.0", "import-local": "^2.0.0",
"internal-ip": "^4.3.0", "internal-ip": "^4.3.0",
"ip": "^1.1.5", "ip": "^1.1.5",
"is-absolute-url": "^3.0.3", "is-absolute-url": "^3.0.3",
"killable": "^1.0.1", "killable": "^1.0.1",
"loglevel": "^1.6.6", "loglevel": "^1.6.8",
"opn": "^5.5.0", "opn": "^5.5.0",
"p-retry": "^3.0.1", "p-retry": "^3.0.1",
"portfinder": "^1.0.25", "portfinder": "^1.0.26",
"schema-utils": "^1.0.0", "schema-utils": "^1.0.0",
"selfsigned": "^1.10.7", "selfsigned": "^1.10.7",
"semver": "^6.3.0", "semver": "^6.3.0",
"serve-index": "^1.9.1", "serve-index": "^1.9.1",
"sockjs": "0.3.19", "sockjs": "0.3.20",
"sockjs-client": "1.4.0", "sockjs-client": "1.4.0",
"spdy": "^4.0.1", "spdy": "^4.0.2",
"strip-ansi": "^3.0.1", "strip-ansi": "^3.0.1",
"supports-color": "^6.1.0", "supports-color": "^6.1.0",
"url": "^0.11.0", "url": "^0.11.0",
"webpack-dev-middleware": "^3.7.2", "webpack-dev-middleware": "^3.7.2",
"webpack-log": "^2.0.0", "webpack-log": "^2.0.0",
"ws": "^6.2.1", "ws": "^6.2.1",
"yargs": "12.0.5" "yargs": "^13.3.2"
}, },
"dependencies": { "dependencies": {
"ansi-regex": { "ansi-regex": {
@ -12414,33 +12378,39 @@
"dev": true "dev": true
}, },
"cliui": { "cliui": {
"version": "4.1.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
"integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
"dev": true, "dev": true,
"requires": { "requires": {
"string-width": "^2.1.1", "string-width": "^3.1.0",
"strip-ansi": "^4.0.0", "strip-ansi": "^5.2.0",
"wrap-ansi": "^2.0.0" "wrap-ansi": "^5.1.0"
}, },
"dependencies": { "dependencies": {
"ansi-regex": { "ansi-regex": {
"version": "3.0.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"dev": true "dev": true
}, },
"strip-ansi": { "strip-ansi": {
"version": "4.0.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-regex": "^3.0.0" "ansi-regex": "^4.1.0"
} }
} }
} }
}, },
"emoji-regex": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
"integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
"dev": true
},
"find-up": { "find-up": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@ -12450,12 +12420,6 @@
"locate-path": "^3.0.0" "locate-path": "^3.0.0"
} }
}, },
"get-caller-file": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
"dev": true
},
"is-absolute-url": { "is-absolute-url": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz", "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
@ -12502,11 +12466,27 @@
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
"dev": true "dev": true
}, },
"require-main-filename": { "portfinder": {
"version": "1.0.1", "version": "1.0.26",
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", "integrity": "sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==",
"dev": true "dev": true,
"requires": {
"async": "^2.6.2",
"debug": "^3.1.1",
"mkdirp": "^0.5.1"
},
"dependencies": {
"debug": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
}
}
}, },
"schema-utils": { "schema-utils": {
"version": "1.0.0", "version": "1.0.0",
@ -12526,28 +12506,29 @@
"dev": true "dev": true
}, },
"string-width": { "string-width": {
"version": "2.1.1", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
"dev": true, "dev": true,
"requires": { "requires": {
"emoji-regex": "^7.0.1",
"is-fullwidth-code-point": "^2.0.0", "is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^4.0.0" "strip-ansi": "^5.1.0"
}, },
"dependencies": { "dependencies": {
"ansi-regex": { "ansi-regex": {
"version": "3.0.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"dev": true "dev": true
}, },
"strip-ansi": { "strip-ansi": {
"version": "4.0.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-regex": "^3.0.0" "ansi-regex": "^4.1.0"
} }
} }
} }
@ -12571,61 +12552,55 @@
} }
}, },
"wrap-ansi": { "wrap-ansi": {
"version": "2.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"string-width": "^1.0.1", "ansi-styles": "^3.2.0",
"strip-ansi": "^3.0.1" "string-width": "^3.0.0",
"strip-ansi": "^5.0.0"
}, },
"dependencies": { "dependencies": {
"is-fullwidth-code-point": { "ansi-regex": {
"version": "1.0.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"dev": true, "dev": true
"requires": {
"number-is-nan": "^1.0.0"
}
}, },
"string-width": { "strip-ansi": {
"version": "1.0.2", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true, "dev": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "ansi-regex": "^4.1.0"
"is-fullwidth-code-point": "^1.0.0",
"strip-ansi": "^3.0.0"
} }
} }
} }
}, },
"yargs": { "yargs": {
"version": "12.0.5", "version": "13.3.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz", "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
"integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==", "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
"dev": true, "dev": true,
"requires": { "requires": {
"cliui": "^4.0.0", "cliui": "^5.0.0",
"decamelize": "^1.2.0",
"find-up": "^3.0.0", "find-up": "^3.0.0",
"get-caller-file": "^1.0.1", "get-caller-file": "^2.0.1",
"os-locale": "^3.0.0",
"require-directory": "^2.1.1", "require-directory": "^2.1.1",
"require-main-filename": "^1.0.1", "require-main-filename": "^2.0.0",
"set-blocking": "^2.0.0", "set-blocking": "^2.0.0",
"string-width": "^2.0.0", "string-width": "^3.0.0",
"which-module": "^2.0.0", "which-module": "^2.0.0",
"y18n": "^3.2.1 || ^4.0.0", "y18n": "^4.0.0",
"yargs-parser": "^11.1.1" "yargs-parser": "^13.1.2"
} }
}, },
"yargs-parser": { "yargs-parser": {
"version": "11.1.1", "version": "13.1.2",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
"integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==", "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
"dev": true, "dev": true,
"requires": { "requires": {
"camelcase": "^5.0.0", "camelcase": "^5.0.0",
@ -12672,13 +12647,11 @@
} }
}, },
"websocket-driver": { "websocket-driver": {
"version": "0.7.3", "version": "0.6.5",
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
"integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==", "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
"dev": true, "dev": true,
"requires": { "requires": {
"http-parser-js": ">=0.4.0 <0.4.11",
"safe-buffer": ">=5.1.0",
"websocket-extensions": ">=0.1.1" "websocket-extensions": ">=0.1.1"
} }
}, },

1
package.json
View file

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

BIN
src/assets/logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.7 KiB

1
src/assets/logo.svg
View file

@ -1 +0,0 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 539 B

95
src/components/FileUploader.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div <div
class="drop-area pa-4 text-center" class="drop-area pa-4 text-center"
:class="{'drag-over':dragging }" :class="{'drag-over':dragging, 'pb-0':!loading}"
@dragover.prevent @dragover.prevent
@drop.prevent="imageDropped" @drop.prevent="imageDropped"
@dragenter="dragEnter()" @dragenter="dragEnter()"
@ -9,47 +9,112 @@
@dragleave="dragLeave()" @dragleave="dragLeave()"
@dragexit="dragExit()" @dragexit="dragExit()"
> >
<p>Drag & drop a file here</p> <div v-if="loading">
<p class="or">or</p> <v-progress-circular
<v-btn depressed>select a file</v-btn> indeterminate
<p class="or">or</p> color="primary"
<v-text-field outlined dense label="Paste an url to the file" hide-details></v-text-field>
/>
</div>
<div v-else>
<p>Drag & drop a file here</p>
<p class="or">or</p>
<v-btn depressed @click="manualUploadClicked">select a file</v-btn>
<input ref="uploadInput" type="file" hidden @change="(e) => handleFiles(e.target.files[0])">
<div v-if="allowUrl">
<p class="or">or</p>
<v-text-field
ref="urlInput"
@click:append="urlFilled(url)"
@keypress.enter="urlFilled(url)"
v-model="url"
append-icon="fa-arrow-right"
dense
label="Paste the file url"
outlined
:error-messages="urlErrors"
/>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as axios from "axios";
export default { export default {
name: "FileUploader", name: "FileUploader",
props: ['value'], props: {
allowUrl: {
type: Boolean,
default: true
}
},
data() { data() {
return { return {
dragging: false, dragging: false,
dragEnterCounter: 0 urlErrors: undefined,
dragEnterCounter: 0,
url: '',
loading: false
} }
}, },
methods: { methods: {
imageDropped(e) { imageDropped(e) {
this.dragging = false; this.dragging = false;
const droppedFiles = [...e.dataTransfer.files];
if (!droppedFiles || droppedFiles.length === 0) return; if (e.dataTransfer.items.length > 0) {
const item = e.dataTransfer.items[0];
switch (item.kind) {
case 'string':
item.getAsString(url => this.urlFilled(url));
break;
case 'file':
this.handleFiles(item.getAsFile());
break;
}
}
this.$emit('input', droppedFiles[0])
}, },
dragEnter() { dragEnter() {
this.dragEnterCounter++; this.dragEnterCounter++;
this.dragging = true; this.dragging = true;
}, },
dragLeave() { dragLeave() {
if(--this.dragEnterCounter <= 0){ if (--this.dragEnterCounter <= 0) {
this.dragging = false; this.dragging = false;
} }
}, },
async urlFilled(url) {
if (url && url.length > 0) {
this.loading = true;
try {
const {data, headers} = await axios.get(url);
const name = url.split('/').pop();
const file = new File([data], name, {type: headers['content-type']})
this.handleFiles(file);
} catch (ignored) {
this.urlErrors = 'Incorrect url'
}
this.loading = false;
}
},
dragEnd() { dragEnd() {
this.dragging = false; this.dragging = false;
}, },
dragExit() { dragExit() {
this.dragging = false; this.dragging = false;
},
handleFiles(file) {
if (!file) return;
this.$emit('input', file)
},
manualUploadClicked() {
this.$refs.uploadInput.click()
} }
} }
} }
@ -73,5 +138,11 @@
border-color: #4CAF50; border-color: #4CAF50;
} }
.v-input__icon {
button {
margin-top: 0 !important;
}
}
} }
</style> </style>

36
src/routes/tools/FileToBase64.vue
View file

@ -4,21 +4,21 @@
<v-card> <v-card>
<v-card-title>File to Base64</v-card-title> <v-card-title>File to Base64</v-card-title>
<v-card-text> <v-card-text>
<FileUploader v-model="imageFile"/> <FileUploader v-model="file"/>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" lg="4" md="6" sm="12" v-if="base64"> <v-col cols="12" lg="4" md="6" sm="12" v-if="base64 || loading">
<v-card> <v-card>
<v-card-title>Result</v-card-title> <v-card-title>Result</v-card-title>
<v-card-text> <v-card-text>
<v-img :src="base64" class="mb-4" v-if="isImage"/>
<v-textarea <v-textarea
label="File in base 64" label="File in base 64"
outlined outlined
readonly readonly
v-model="base64" v-model="base64"
hide-details hide-details
:loading="loading"
/> />
<div class="text-center mt-4"> <div class="text-center mt-4">
<v-btn @click="copyBase64()" depressed>Copy base64</v-btn> <v-btn @click="copyBase64()" depressed>Copy base64</v-btn>
@ -32,34 +32,36 @@
<script> <script>
import FileUploader from '../../components/FileUploader' import FileUploader from '../../components/FileUploader'
import {copyToClipboard, fileIsImage} from "../../utils/helpers"; import {copyToClipboard} from "../../utils/helpers";
export default { export default {
name: "FileToBase64", name: "FileToBase64",
components: {FileUploader}, components: {FileUploader},
data() { data() {
return { return {
imageFile: undefined, file: undefined,
loading: false,
base64: '', base64: '',
isImage: false, copyBase64() {
copyBase64(){
copyToClipboard(this.base64) copyToClipboard(this.base64)
this.$toast.success('Copied to clipboard.') this.$toast.success('Copied to clipboard.')
} }
} }
}, },
methods:{
handleBase64(base64){
this.base64 = base64;
this.loading = false;
}
},
watch: { watch: {
imageFile() { file() {
this.isImage = fileIsImage(this.imageFile); this.loading = true;
this.base64 = '';
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(this.imageFile); reader.onload = () => this.handleBase64(reader.result);
reader.onload = () => { reader.onerror = () => this.handleBase64('[An error as occurred]');
this.base64 = reader.result; reader.readAsDataURL(this.file);
}
reader.onerror = () => {
this.base64 = '[An error as occurred]';
}
} }
} }
} }