Added ecstatica generator, file uploader and user tools

This commit is contained in:
2019-11-02 04:58:00 +05:30
parent 7440c26a5c
commit fb10774af5
67 changed files with 2284 additions and 255 deletions

View File

@@ -978,7 +978,8 @@
"@emotion/hash": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz",
"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw=="
"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==",
"dev": true
},
"@hapi/address": {
"version": "2.1.2",
@@ -1202,6 +1203,7 @@
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.5.2.tgz",
"integrity": "sha512-yARw/hwavOXqljP+biDXHcmfbC63n8EkA8C10/tZt7KkBp7fs+7+z3BNR+ffotd8/uhirIC1jQWWKdLoUc34yA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.5.2",
@@ -1218,10 +1220,20 @@
"react-transition-group": "^4.3.0"
}
},
"@material-ui/icons": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz",
"integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/styles": {
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.5.2.tgz",
"integrity": "sha512-QUqPk4tdPiDLs/1flB6qdAqUrYSxHv4YLCgvFeZw9A9OK/lf8LFjciF/SsSIDOCwoV2kf3BiGTzWUGjb/TTgzA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.4.4",
"@emotion/hash": "^0.7.1",
@@ -1245,6 +1257,7 @@
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.5.2.tgz",
"integrity": "sha512-h9RWvdM9XKlHHqwiuhyvWdobptQkHli+m2jJFs7i1AI/hmGsIc4reDmS7fInhETgt/Txx7uiAIznfRNIIVHmQw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.5.2",
@@ -1255,6 +1268,7 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.1.tgz",
"integrity": "sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==",
"dev": true,
"requires": {
"@types/react": "*"
}
@@ -1263,6 +1277,7 @@
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.5.2.tgz",
"integrity": "sha512-zhbNfHd1gLa8At6RPDG7uMZubHxbY+LtM6IkSfeWi6Lo4Ax80l62YaN1QmUpO1IvGCkn/j62tQX3yObiQZrJsQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
@@ -1549,7 +1564,8 @@
"@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
"dev": true
},
"@types/q": {
"version": "1.5.2",
@@ -1560,6 +1576,7 @@
"version": "16.9.11",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz",
"integrity": "sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"csstype": "^2.2.0"
@@ -1569,6 +1586,7 @@
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
"integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
"dev": true,
"requires": {
"@types/react": "*"
}
@@ -3135,11 +3153,13 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true
"bundled": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3152,15 +3172,18 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3263,7 +3286,8 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true
"bundled": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@@ -3273,6 +3297,7 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3285,17 +3310,20 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true
"bundled": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3312,6 +3340,7 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3384,7 +3413,8 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -3394,6 +3424,7 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -3499,6 +3530,7 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -3721,7 +3753,8 @@
"clsx": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
"integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
"integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==",
"dev": true
},
"co": {
"version": "4.6.0",
@@ -3957,7 +3990,8 @@
"convert-css-length": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz",
"integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg=="
"integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==",
"dev": true
},
"convert-source-map": {
"version": "1.6.0",
@@ -4233,6 +4267,7 @@
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
"integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.6.2",
"is-in-browser": "^1.0.2"
@@ -4242,6 +4277,7 @@
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.2"
}
@@ -4374,7 +4410,8 @@
"csstype": {
"version": "2.6.7",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==",
"dev": true
},
"currently-unhandled": {
"version": "0.4.1",
@@ -4714,6 +4751,7 @@
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
"integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.6.3",
"csstype": "^2.6.7"
@@ -4723,6 +4761,7 @@
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.2"
}
@@ -6875,7 +6914,8 @@
"hyphenate-style-name": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
"integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
"integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==",
"dev": true
},
"iconv-lite": {
"version": "0.4.24",
@@ -7220,7 +7260,8 @@
"is-in-browser": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=",
"dev": true
},
"is-lower-case": {
"version": "1.1.3",
@@ -7872,7 +7913,6 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -8598,6 +8638,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0.tgz",
"integrity": "sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"csstype": "^2.6.5",
@@ -8609,6 +8650,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz",
"integrity": "sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"hyphenate-style-name": "^1.0.3",
@@ -8619,6 +8661,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz",
"integrity": "sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.0.0"
@@ -8628,6 +8671,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz",
"integrity": "sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.0.0"
@@ -8637,6 +8681,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz",
"integrity": "sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.0.0",
@@ -8647,6 +8692,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz",
"integrity": "sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.0.0"
@@ -8656,6 +8702,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz",
"integrity": "sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.0.0"
@@ -8665,6 +8712,7 @@
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz",
"integrity": "sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.3.1",
"css-vendor": "^2.0.6",
@@ -10139,7 +10187,8 @@
"normalize-scroll-left": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
"integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
"integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA==",
"dev": true
},
"normalize-url": {
"version": "1.9.1",
@@ -12421,6 +12470,7 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
"integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",

View File

@@ -3,7 +3,6 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.5.2",
"@svgr/webpack": "4.3.2",
"@typescript-eslint/eslint-plugin": "^2.2.0",
"@typescript-eslint/parser": "^2.2.0",
@@ -154,6 +153,8 @@
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"@material-ui/core": "^4.5.2",
"@material-ui/icons": "^4.5.1",
"babel-loader": "^8.0.6",
"body-parser": "^1.19.0",
"plop": "^2.5.2",

View File

@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './{{pascalCase name}}.module.css';
const {{pascalCase name}} = props => {
return (

View File

@@ -0,0 +1,890 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="https://github.githubassets.com">
<link rel="dns-prefetch" href="https://avatars0.githubusercontent.com">
<link rel="dns-prefetch" href="https://avatars1.githubusercontent.com">
<link rel="dns-prefetch" href="https://avatars2.githubusercontent.com">
<link rel="dns-prefetch" href="https://avatars3.githubusercontent.com">
<link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
<link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
<link crossorigin="anonymous" media="all" integrity="sha512-/YEVWs7BzxfKyUd6zVxjEQcXRWsLbcEjv045Rq8DSoipySmQblhVKxlXLva2GtNd5DhwCxHwW1RM0N9I7S2Vew==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-481a47a96965f6706fb41bae0d14b09a.css" />
<link crossorigin="anonymous" media="all" integrity="sha512-y6ClXuNSXHX02KTSpyAB44/9EYuqesDamipEk7dPNLuJNpS2cp9emQ9spRMyEqHniLQv/gT+3LNh5ClmcmjqTQ==" rel="stylesheet" href="https://github.githubassets.com/assets/site-212da8d2e327716b925d34199c85916c.css" />
<link crossorigin="anonymous" media="all" integrity="sha512-ZeXRnWYCu8+fvsUFY0/VTPql8vwvSfrBVUoZlQNG17AZTnz1N3mvsz8dmX705rPZPJYQ/ekLzym0eof+ity3Ew==" rel="stylesheet" href="https://github.githubassets.com/assets/github-4aa6c31d1652b09080e404b2bf72f75c.css" />
<meta name="viewport" content="width=device-width">
<title>react-file-upload/baseline-cloud_upload-24px.svg at master · LukasMarx/react-file-upload · GitHub</title>
<meta name="description" content="Contribute to LukasMarx/react-file-upload development by creating an account on GitHub.">
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<meta property="fb:app_id" content="1401488693436528">
<meta name="twitter:image:src" content="https://avatars3.githubusercontent.com/u/8080408?s=400&amp;v=4" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary" /><meta name="twitter:title" content="LukasMarx/react-file-upload" /><meta name="twitter:description" content="Contribute to LukasMarx/react-file-upload development by creating an account on GitHub." />
<meta property="og:image" content="https://avatars3.githubusercontent.com/u/8080408?s=400&amp;v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="LukasMarx/react-file-upload" /><meta property="og:url" content="https://github.com/LukasMarx/react-file-upload" /><meta property="og:description" content="Contribute to LukasMarx/react-file-upload development by creating an account on GitHub." />
<link rel="assets" href="https://github.githubassets.com/">
<meta name="request-id" content="0939:1DB0:5A653:87A69:5DBC9C48" data-pjax-transient>
<meta name="selected-link" value="repo_source" data-pjax-transient>
<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
<meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">
<meta name="octolytics-host" content="collector.githubapp.com" /><meta name="octolytics-app-id" content="github" /><meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event" /><meta name="octolytics-dimension-request_id" content="0939:1DB0:5A653:87A69:5DBC9C48" /><meta name="octolytics-dimension-region_edge" content="ap-south-1" /><meta name="octolytics-dimension-region_render" content="iad" /><meta name="octolytics-dimension-ga_id" content="" class="js-octo-ga-id" /><meta name="octolytics-dimension-visitor_id" content="9100614185115577652" />
<meta name="analytics-location" content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" />
<meta name="google-analytics" content="UA-3769691-2">
<meta class="js-ga-set" name="dimension1" content="Logged Out">
<meta name="hostname" content="github.com">
<meta name="user-login" content="">
<meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload" content="YTZiZTVlMmE3MzY5MjM0YTM3ZjA2YThiN2QzYzk2OGI3YjRhYzdkZDA1MjU4YTdiOWFjMWNmMTEwOWM1MjcwMXx7InJlbW90ZV9hZGRyZXNzIjoiMTA2LjUxLjExMS4xNjIiLCJyZXF1ZXN0X2lkIjoiMDkzOToxREIwOjVBNjUzOjg3QTY5OjVEQkM5QzQ4IiwidGltZXN0YW1wIjoxNTcyNjQxODY5LCJob3N0IjoiZ2l0aHViLmNvbSJ9">
<meta name="enabled-features" content="ACTIONS_V2_ON_MARKETPLACE,MARKETPLACE_FEATURED_BLOG_POSTS,MARKETPLACE_INVOICED_BILLING,MARKETPLACE_SOCIAL_PROOF_CUSTOMERS,MARKETPLACE_TRENDING_SOCIAL_PROOF,MARKETPLACE_RECOMMENDATIONS,MARKETPLACE_PENDING_INSTALLATIONS">
<meta name="html-safe-nonce" content="7d346afba54fef0f15d5612544a0660287b6f7d1">
<meta http-equiv="x-pjax-version" content="2d925211d3845ba5eac90761112bd92e">
<link href="https://github.com/LukasMarx/react-file-upload/commits/master.atom" rel="alternate" title="Recent Commits to react-file-upload:master" type="application/atom+xml">
<meta name="go-import" content="github.com/LukasMarx/react-file-upload git https://github.com/LukasMarx/react-file-upload.git">
<meta name="octolytics-dimension-user_id" content="8080408" /><meta name="octolytics-dimension-user_login" content="LukasMarx" /><meta name="octolytics-dimension-repository_id" content="170667907" /><meta name="octolytics-dimension-repository_nwo" content="LukasMarx/react-file-upload" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="170667907" /><meta name="octolytics-dimension-repository_network_root_nwo" content="LukasMarx/react-file-upload" /><meta name="octolytics-dimension-repository_explore_github_marketplace_ci_cta_shown" content="false" />
<link rel="canonical" href="https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg" data-pjax-transient>
<meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
<meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
<link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">
<link rel="icon" type="image/x-icon" class="js-site-favicon" href="https://github.githubassets.com/favicon.ico">
<meta name="theme-color" content="#1e2327">
<link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
</head>
<body class="logged-out env-production page-responsive page-blob">
<div class="position-relative js-header-wrapper ">
<a href="#start-of-content" tabindex="1" class="px-2 py-4 bg-blue text-white show-on-focus js-skip-to-content">Skip to content</a>
<span class="Progress progress-pjax-loader position-fixed width-full js-pjax-loader-bar">
<span class="progress-pjax-loader-bar top-0 left-0" style="width: 0%;"></span>
</span>
<header class="Header-old header-logged-out js-details-container Details position-relative f4 py-2" role="banner">
<div class="container-lg d-lg-flex flex-items-center p-responsive">
<div class="d-flex flex-justify-between flex-items-center">
<a class="mr-4" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
<svg height="32" class="octicon octicon-mark-github text-white" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
</a>
<div class="d-lg-none css-truncate css-truncate-target width-fit p-2">
<svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
<a class="Header-link" href="/LukasMarx">LukasMarx</a>
/
<a class="Header-link" href="/LukasMarx/react-file-upload">react-file-upload</a>
</div>
<div class="d-flex flex-items-center">
<a href="/join?source=header-repo"
class="d-inline-block d-lg-none f5 text-white no-underline border border-gray-dark rounded-2 px-2 py-1 mr-3 mr-sm-5"
data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e47d3acc7c86e98f566b20a8a9fb25410a7074fdeaec3d095485536905a503a5"
data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">
Sign&nbsp;up
</a>
<button class="btn-link d-lg-none mt-1 js-details-target" type="button" aria-label="Toggle navigation" aria-expanded="false">
<svg height="24" class="octicon octicon-three-bars text-white" viewBox="0 0 12 16" version="1.1" width="18" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"/></svg>
</button>
</div>
</div>
<div class="HeaderMenu HeaderMenu--logged-out position-fixed top-0 right-0 bottom-0 height-fit position-lg-relative d-lg-flex flex-justify-between flex-items-center flex-auto">
<div class="d-flex d-lg-none flex-justify-end border-bottom bg-gray-light p-3">
<button class="btn-link js-details-target" type="button" aria-label="Toggle navigation" aria-expanded="false">
<svg height="24" class="octicon octicon-x text-gray" viewBox="0 0 12 16" version="1.1" width="18" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
</button>
</div>
<nav class="mt-0 px-3 px-lg-0 mb-5 mb-lg-0" aria-label="Global">
<ul class="d-lg-flex list-style-none">
<li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
<details class="HeaderMenu-details details-overlay details-reset width-full">
<summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
Why GitHub?
<svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
<path d="M1,1l6.2,6L13,1"></path>
</svg>
</summary>
<div class="dropdown-menu flex-auto rounded-1 bg-white px-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
<a href="/features" class="py-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Features">Features <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a>
<ul class="list-style-none f5 pb-3">
<li class="edge-item-fix"><a href="/features/code-review/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Code review">Code review</a></li>
<li class="edge-item-fix"><a href="/features/project-management/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Project management">Project management</a></li>
<li class="edge-item-fix"><a href="/features/integrations" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Integrations">Integrations</a></li>
<li class="edge-item-fix"><a href="/features/actions" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Actions">Actions</a>
<li class="edge-item-fix"><a href="/features/package-registry" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Package Registry">Package registry</a>
<li class="edge-item-fix"><a href="/features/security" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Security">Security</a>
<li class="edge-item-fix"><a href="/features#team-management" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Team management">Team management</a></li>
<li class="edge-item-fix"><a href="/features#social-coding" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Social coding">Social coding</a></li>
<li class="edge-item-fix"><a href="/features#documentation" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Documentation">Documentation</a></li>
<li class="edge-item-fix"><a href="/features#code-hosting" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Code hosting">Code hosting</a></li>
</ul>
<ul class="list-style-none mb-0 border-lg-top pt-lg-3">
<li class="edge-item-fix"><a href="/customer-stories" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Customer stories">Customer stories <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
<li class="edge-item-fix"><a href="/security" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Security">Security <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
</ul>
</div>
</details>
</li>
<li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3">
<a href="/enterprise" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Enterprise">Enterprise</a>
</li>
<li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
<details class="HeaderMenu-details details-overlay details-reset width-full">
<summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
Explore
<svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
<path d="M1,1l6.2,6L13,1"></path>
</svg>
</summary>
<div class="dropdown-menu flex-auto rounded-1 bg-white px-0 pt-2 pb-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
<ul class="list-style-none mb-3">
<li class="edge-item-fix"><a href="/explore" class="py-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Explore">Explore GitHub <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
</ul>
<h4 class="text-gray-light text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Learn &amp; contribute</h4>
<ul class="list-style-none mb-3">
<li class="edge-item-fix"><a href="/topics" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Topics">Topics</a></li>
<li class="edge-item-fix"><a href="/collections" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Collections">Collections</a></li>
<li class="edge-item-fix"><a href="/trending" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Trending">Trending</a></li>
<li class="edge-item-fix"><a href="https://lab.github.com/" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Learning lab">Learning Lab</a></li>
<li class="edge-item-fix"><a href="https://opensource.guide" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Open source guides">Open source guides</a></li>
</ul>
<h4 class="text-gray-light text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Connect with others</h4>
<ul class="list-style-none mb-0">
<li class="edge-item-fix"><a href="https://github.com/events" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Events">Events</a></li>
<li class="edge-item-fix"><a href="https://github.community" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Community forum">Community forum</a></li>
<li class="edge-item-fix"><a href="https://education.github.com" class="py-2 pb-0 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to GitHub Education">GitHub Education</a></li>
</ul>
</div>
</details>
</li>
<li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3">
<a href="/marketplace" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Marketplace">Marketplace</a>
</li>
<li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
<details class="HeaderMenu-details details-overlay details-reset width-full">
<summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
Pricing
<svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
<path d="M1,1l6.2,6L13,1"></path>
</svg>
</summary>
<div class="dropdown-menu flex-auto rounded-1 bg-white px-0 pt-2 pb-4 mt-0 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
<a href="/pricing" class="pb-2 lh-condensed-ultra d-block link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Pricing">Plans <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a>
<ul class="list-style-none mb-3">
<li class="edge-item-fix"><a href="/pricing#feature-comparison" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Compare plans">Compare plans</a></li>
<li class="edge-item-fix"><a href="https://enterprise.github.com/contact" class="py-2 lh-condensed-ultra d-block link-gray no-underline f5" data-ga-click="(Logged out) Header, go to Contact Sales">Contact Sales</a></li>
</ul>
<ul class="list-style-none mb-0 border-lg-top pt-lg-3">
<li class="edge-item-fix"><a href="/nonprofit" class="py-2 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Nonprofits">Nonprofit <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
<li class="edge-item-fix"><a href="https://education.github.com" class="py-2 pb-0 lh-condensed-ultra d-block no-underline link-gray-dark no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Education">Education <span class="Bump-link-symbol float-right text-normal text-gray-light">&rarr;</span></a></li>
</ul>
</div>
</details>
</li>
</ul>
</nav>
<div class="d-lg-flex flex-items-center px-3 px-lg-0 text-center text-lg-left">
<div class="d-lg-flex mb-3 mb-lg-0">
<div class="header-search flex-self-stretch flex-lg-self-auto mr-0 mr-lg-3 mb-3 mb-lg-0 scoped-search site-scoped-search js-site-search position-relative js-jump-to"
role="combobox"
aria-owns="jump-to-results"
aria-label="Search or jump to"
aria-haspopup="listbox"
aria-expanded="false"
>
<div class="position-relative">
<!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-site-search-form" role="search" aria-label="Site" data-scope-type="Repository" data-scope-id="170667907" data-scoped-search-url="/LukasMarx/react-file-upload/search" data-unscoped-search-url="/search" action="/LukasMarx/react-file-upload/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
<label class="form-control input-sm header-search-wrapper p-0 header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center js-chromeless-input-container">
<input type="text"
class="form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
data-hotkey="s,/"
name="q"
value=""
placeholder="Search"
data-unscoped-placeholder="Search GitHub"
data-scoped-placeholder="Search"
autocapitalize="off"
aria-autocomplete="list"
aria-controls="jump-to-results"
aria-label="Search"
data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations#csrf-token=5H0dqBdLWPNmkt6i5kIlQa0iK+n6NJvXWc61w3STLAiJiII7zkk3mIyoQtvQXa8KpQFyRMNWzsVFP2opLwlFLQ=="
spellcheck="false"
autocomplete="off"
>
<input type="hidden" class="js-site-search-type-field" name="type" >
<img src="https://github.githubassets.com/images/search-key-slash.svg" alt="" class="mr-2 header-search-key-slash">
<div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
<ul class="d-none js-jump-to-suggestions-template-container">
<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-suggestion" role="option">
<a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
<div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
<svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
<svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
<svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
</div>
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
<div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>
<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
In this repository
</span>
<span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true" class="d-inline-block ml-1 v-align-middle"></span>
</div>
<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
Jump to
<span class="d-inline-block ml-1 v-align-middle"></span>
</div>
</a>
</li>
</ul>
<ul class="d-none js-jump-to-no-results-template-container">
<li class="d-flex flex-justify-center flex-items-center f5 d-none js-jump-to-suggestion p-2">
<span class="text-gray">No suggested jump to results</span>
</li>
</ul>
<ul id="jump-to-results" role="listbox" class="p-0 m-0 js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container">
<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-scoped-search d-none" role="option">
<a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
<div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
<svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
<svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
<svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
</div>
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
<div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>
<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
In this repository
</span>
<span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true" class="d-inline-block ml-1 v-align-middle"></span>
</div>
<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
Jump to
<span class="d-inline-block ml-1 v-align-middle"></span>
</div>
</a>
</li>
<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-global-search d-none" role="option">
<a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="">
<div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
<svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
<svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
<svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
</div>
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
<div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>
<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
In this repository
</span>
<span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true" class="d-inline-block ml-1 v-align-middle"></span>
</div>
<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
Jump to
<span class="d-inline-block ml-1 v-align-middle"></span>
</div>
</a>
</li>
</ul>
</div>
</label>
</form> </div>
</div>
</div>
<a href="/login?return_to=%2FLukasMarx%2Freact-file-upload%2Fblob%2Fmaster%2Fapp%2Fpublic%2Fbaseline-cloud_upload-24px.svg"
class="HeaderMenu-link no-underline mr-3"
data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="0e1fb4664f0b7f6371963096b529c4187d6efa06e69b1177dd9bb6c245395c0d"
data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">
Sign&nbsp;in
</a>
<a href="/join?source=header-repo&amp;source_repo=LukasMarx%2Freact-file-upload"
class="HeaderMenu-link d-inline-block no-underline border border-gray-dark rounded-1 px-2 py-1"
data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="0e1fb4664f0b7f6371963096b529c4187d6efa06e69b1177dd9bb6c245395c0d"
data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">
Sign&nbsp;up
</a>
</div>
</div>
</div>
</header>
</div>
<div id="start-of-content" class="show-on-focus"></div>
<div id="js-flash-container">
</div>
<div class="application-main " data-commit-hovercards-enabled>
<div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
<main >
<div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav pt-0 pt-lg-4 ">
<div class="repohead-details-container clearfix container-lg p-responsive d-none d-lg-block">
<ul class="pagehead-actions">
<li>
<a class="tooltipped tooltipped-s btn btn-sm btn-with-count" aria-label="You must be signed in to watch a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;notification subscription menu watch&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="8e05956f344137dba3e4d3d1fb5ccb9d49bf350d8302eb1d8c02111023c2a73c" href="/login?return_to=%2FLukasMarx%2Freact-file-upload">
<svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
Watch
</a> <a class="social-count" href="/LukasMarx/react-file-upload/watchers"
aria-label="6 users are watching this repository">
6
</a>
</li>
<li>
<a class="btn btn-sm btn-with-count tooltipped tooltipped-s" aria-label="You must be signed in to star a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;star button&quot;,&quot;repository_id&quot;:170667907,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e5e4dc9037758b2feb7b4befd6ef38f21f0258e43c43d637cc632386e4fe4bd8" href="/login?return_to=%2FLukasMarx%2Freact-file-upload">
<svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
Star
</a>
<a class="social-count js-social-count" href="/LukasMarx/react-file-upload/stargazers"
aria-label="81 users starred this repository">
81
</a>
</li>
<li>
<a class="btn btn-sm btn-with-count tooltipped tooltipped-s" aria-label="You must be signed in to fork a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;repo details fork button&quot;,&quot;repository_id&quot;:170667907,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="20824e61ae1bf9316ad5b8a4c5be7406ea95cb84395b72dce9f32e57a65c1490" href="/login?return_to=%2FLukasMarx%2Freact-file-upload">
<svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
Fork
</a>
<a href="/LukasMarx/react-file-upload/network/members" class="social-count"
aria-label="64 users forked this repository">
64
</a>
</li>
</ul>
<h1 class="public ">
<svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
<span class="author" itemprop="author"><a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=8080408" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LukasMarx">LukasMarx</a></span><!--
--><span class="path-divider">/</span><!--
--><strong itemprop="name"><a data-pjax="#js-repo-pjax-container" href="/LukasMarx/react-file-upload">react-file-upload</a></strong>
</h1>
</div>
<nav class="hx_reponav reponav js-repo-nav js-sidenav-container-pjax container-lg p-responsive d-none d-lg-block"
itemscope
itemtype="http://schema.org/BreadcrumbList"
aria-label="Repository"
data-pjax="#js-repo-pjax-container">
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a class="js-selected-navigation-item selected reponav-item" itemprop="url" data-hotkey="g c" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /LukasMarx/react-file-upload" href="/LukasMarx/react-file-upload">
<svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
<span itemprop="name">Code</span>
<meta itemprop="position" content="1">
</a> </span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /LukasMarx/react-file-upload/issues" href="/LukasMarx/react-file-upload/issues">
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
<span itemprop="name">Issues</span>
<span class="Counter">2</span>
<meta itemprop="position" content="2">
</a> </span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a data-hotkey="g p" itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /LukasMarx/react-file-upload/pulls" href="/LukasMarx/react-file-upload/pulls">
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0010 15a1.993 1.993 0 001-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v6.56A1.993 1.993 0 002 15a1.993 1.993 0 001-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
<span itemprop="name">Pull requests</span>
<span class="Counter">0</span>
<meta itemprop="position" content="3">
</a> </span>
<a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /LukasMarx/react-file-upload/projects" href="/LukasMarx/react-file-upload/projects">
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"/></svg>
Projects
<span class="Counter" >0</span>
</a>
<a data-skip-pjax="true" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy code_scanning /LukasMarx/react-file-upload/security/advisories" href="/LukasMarx/react-file-upload/security/advisories">
<svg class="octicon octicon-shield" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 2l7-2 7 2v6.02C14 12.69 8.69 16 7 16c-1.69 0-7-3.31-7-7.98V2zm1 .75L7 1l6 1.75v5.268C13 12.104 8.449 15 7 15c-1.449 0-6-2.896-6-6.982V2.75zm1 .75L7 2v12c-1.207 0-5-2.482-5-5.985V3.5z"/></svg>
Security
</a>
<a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse people /LukasMarx/react-file-upload/pulse" href="/LukasMarx/react-file-upload/pulse">
<svg class="octicon octicon-graph" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
Insights
</a>
</nav>
<div class="reponav-wrapper reponav-small d-lg-none">
<nav class="reponav js-reponav text-center no-wrap"
itemscope
itemtype="http://schema.org/BreadcrumbList">
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a class="js-selected-navigation-item selected reponav-item" itemprop="url" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /LukasMarx/react-file-upload" href="/LukasMarx/react-file-upload">
<span itemprop="name">Code</span>
<meta itemprop="position" content="1">
</a> </span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /LukasMarx/react-file-upload/issues" href="/LukasMarx/react-file-upload/issues">
<span itemprop="name">Issues</span>
<span class="Counter">2</span>
<meta itemprop="position" content="2">
</a> </span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /LukasMarx/react-file-upload/pulls" href="/LukasMarx/react-file-upload/pulls">
<span itemprop="name">Pull requests</span>
<span class="Counter">0</span>
<meta itemprop="position" content="3">
</a> </span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /LukasMarx/react-file-upload/projects" href="/LukasMarx/react-file-upload/projects">
<span itemprop="name">Projects</span>
<span class="Counter">0</span>
<meta itemprop="position" content="4">
</a> </span>
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="security alerts policy code_scanning /LukasMarx/react-file-upload/security/advisories" href="/LukasMarx/react-file-upload/security/advisories">
<span itemprop="name">Security</span>
<meta itemprop="position" content="6">
</a>
<a class="js-selected-navigation-item reponav-item" data-selected-links="pulse /LukasMarx/react-file-upload/pulse" href="/LukasMarx/react-file-upload/pulse">
Pulse
</a>
</nav>
</div>
</div>
<div class="container-lg clearfix new-discussion-timeline experiment-repo-nav p-responsive">
<div class="repository-content ">
<a class="d-none js-permalink-shortcut" data-hotkey="y" href="/LukasMarx/react-file-upload/blob/b321778f03acb78a5da4311925f79dfea08eea4d/app/public/baseline-cloud_upload-24px.svg">Permalink</a>
<!-- blob contrib key: blob_contributors:v21:f3ae05fa37f6b3dd79d613dafe8f8c3b -->
<div class="signup-prompt-bg rounded-1">
<div class="signup-prompt p-4 text-center mb-4 rounded-1">
<div class="position-relative">
<!-- '"` --><!-- </textarea></xmp> --></option></form><form action="/prompt_dismissals/signup" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="5as33ntvNx8Sx93r0qHDFd+h/7nVx0TuHM6LIWMTiCoHH0GheMX7Phyr7IhIbbWqsYUHsG1xteUbQXuSLwxu+A==" />
<button type="submit" class="position-absolute top-0 right-0 btn-link link-gray" data-ga-click="(Logged out) Sign up prompt, clicked Dismiss, text:dismiss">
Dismiss
</button>
</form> <h3 class="pt-2">Join GitHub today</h3>
<p class="col-6 mx-auto">GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.</p>
<a class="btn btn-primary" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;files signup prompt&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;client_id&quot;:&quot;2118901858.1571941684&quot;,&quot;originating_request_id&quot;:&quot;0939:1DB0:5A653:87A69:5DBC9C48&quot;,&quot;originating_url&quot;:&quot;https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg&quot;,&quot;referrer&quot;:&quot;https://github.com/LukasMarx/react-file-upload/tree/master/app/public&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e8546b4aa34ee98d93e03e26a752ca6c720229733da779d09690e2895bff5b8f" data-ga-click="(Logged out) Sign up prompt, clicked Sign up, text:sign-up" href="/join?source=prompt-blob-show&amp;source_repo=LukasMarx%2Freact-file-upload">Sign up</a>
</div>
</div>
</div>
<div class="d-flex flex-items-start flex-shrink-0 pb-3 flex-column flex-md-row">
<span class="d-flex flex-justify-between width-full width-md-auto">
<details class="details-reset details-overlay select-menu branch-select-menu hx_rsm" id="branch-select-menu">
<summary class="btn btn-sm select-menu-button css-truncate"
data-hotkey="w"
title="Switch branches or tags">
<i>Branch:</i>
<span class="css-truncate-target" data-menu-button>master</span>
</summary>
<details-menu class="select-menu-modal hx_rsm-modal position-absolute" style="z-index: 99;" src="/LukasMarx/react-file-upload/ref-list/master/app/public/baseline-cloud_upload-24px.svg?source_action=show&amp;source_controller=blob" preload>
<include-fragment class="select-menu-loading-overlay anim-pulse">
<svg height="32" class="octicon octicon-octoface" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"/></svg>
</include-fragment>
</details-menu>
</details>
<div class="BtnGroup flex-shrink-0 d-md-none">
<a href="/LukasMarx/react-file-upload/find/master"
class="js-pjax-capture-input btn btn-sm BtnGroup-item"
data-pjax
data-hotkey="t">
Find file
</a>
<clipboard-copy value="app/public/baseline-cloud_upload-24px.svg" class="btn btn-sm BtnGroup-item">
Copy path
</clipboard-copy>
</div>
</span>
<h2 id="blob-path" class="breadcrumb flex-auto min-width-0 text-normal flex-md-self-center ml-md-2 mr-md-3 my-2 my-md-0">
<span class="js-repo-root text-bold"><span class="js-path-segment"><a data-pjax="true" href="/LukasMarx/react-file-upload"><span>react-file-upload</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/LukasMarx/react-file-upload/tree/master/app"><span>app</span></a></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/LukasMarx/react-file-upload/tree/master/app/public"><span>public</span></a></span><span class="separator">/</span><strong class="final-path">baseline-cloud_upload-24px.svg</strong>
</h2>
<div class="BtnGroup flex-shrink-0 d-none d-md-inline-block">
<a href="/LukasMarx/react-file-upload/find/master"
class="js-pjax-capture-input btn btn-sm BtnGroup-item"
data-pjax
data-hotkey="t">
Find file
</a>
<clipboard-copy value="app/public/baseline-cloud_upload-24px.svg" class="btn btn-sm BtnGroup-item">
Copy path
</clipboard-copy>
</div>
</div>
<div class="Box Box--condensed d-flex flex-column flex-shrink-0">
<div class="Box-body d-flex flex-justify-between bg-blue-light flex-column flex-md-row flex-items-start flex-md-items-center">
<span class="pr-md-4 f6">
<a rel="author" data-skip-pjax="true" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=8080408" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LukasMarx"><img class="avatar" src="https://avatars2.githubusercontent.com/u/8080408?s=40&amp;v=4" width="20" height="20" alt="@LukasMarx" /></a>
<a class="text-bold link-gray-dark lh-default v-align-middle" rel="author" data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=8080408" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LukasMarx">LukasMarx</a>
<span class="lh-default v-align-middle">
<a data-pjax="true" title="init" class="link-gray" href="/LukasMarx/react-file-upload/commit/4f6903a15c9d27697d88a5f6284683b9ef78074c">init</a>
</span>
</span>
<span class="d-inline-block flex-shrink-0 v-align-bottom f6 mt-2 mt-md-0">
<a class="pr-2 text-mono link-gray" href="/LukasMarx/react-file-upload/commit/4f6903a15c9d27697d88a5f6284683b9ef78074c" data-pjax>4f6903a</a>
<relative-time datetime="2019-02-07T10:25:40Z" class="no-wrap">Feb 7, 2019</relative-time>
</span>
</div>
<div class="Box-body d-flex flex-items-center flex-auto f6 border-bottom-0 flex-wrap" >
<details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark float-left mr-2" id="blob_contributors_box">
<summary class="btn-link">
<span><strong>1</strong> contributor</span>
</summary>
<details-dialog
class="Box Box--overlay d-flex flex-column anim-fade-in fast"
aria-label="Users who have contributed to this file"
src="/LukasMarx/react-file-upload/contributors/master/app/public/baseline-cloud_upload-24px.svg/list" preload>
<div class="Box-header">
<button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
</button>
<h3 class="Box-title">
Users who have contributed to this file
</h3>
</div>
<include-fragment class="octocat-spinner my-3" aria-label="Loading..."></include-fragment>
</details-dialog>
</details>
</div>
</div>
<div class="Box mt-3 position-relative">
<div class="Box-header py-2 d-flex flex-column flex-shrink-0 flex-md-row flex-md-items-center">
<div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
1 lines (1 sloc)
<span class="file-info-divider"></span>
318 Bytes
</div>
<div class="d-flex py-1 py-md-0 flex-auto flex-order-1 flex-md-order-2 flex-sm-grow-0 flex-justify-between">
<div class="BtnGroup">
<a class="btn btn-sm BtnGroup-item tooltipped tooltipped tooltipped-n source "
href="/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg?short_path=cd21366" aria-label="Display the source blob">
<svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
</a>
<a class="btn btn-sm BtnGroup-item tooltipped tooltipped-n rendered selected"
href="/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg" aria-label="Display the rendered blob">
<svg class="octicon octicon-file" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"/></svg>
</a>
</div>
<div class="BtnGroup">
<a id="raw-url" class="btn btn-sm BtnGroup-item" href="/LukasMarx/react-file-upload/raw/master/app/public/baseline-cloud_upload-24px.svg">Raw</a>
<a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/LukasMarx/react-file-upload/blame/master/app/public/baseline-cloud_upload-24px.svg">Blame</a>
<a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/LukasMarx/react-file-upload/commits/master/app/public/baseline-cloud_upload-24px.svg">History</a>
</div>
<div>
<button type="button" class="btn-octicon disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
</button>
<button type="button" class="btn-octicon btn-octicon-danger disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
</button>
</div>
</div>
</div>
<div itemprop="text" class="Box-body p-0 blob-wrapper data type-svg ">
<div class="render-wrapper ">
<div class="render-container is-render-pending js-render-target "
data-identity="7b28a6ed-5239-40b8-89de-232298558fce"
data-host="https://render.githubusercontent.com"
data-type="svg">
<img class="octospinner mx-auto" alt="" src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif" width="64" height="64" />
<div class="render-viewer-error">Sorry, something went wrong. <a href="https://github.com/LukasMarx/react-file-upload/blob/master/app/public/baseline-cloud_upload-24px.svg">Reload?</a></div>
<div class="render-viewer-fatal">Sorry, we cannot display this file.</div>
<div class="render-viewer-invalid">Sorry, this file is invalid so it cannot be displayed.</div>
<iframe class="render-viewer " src="https://render.githubusercontent.com/view/svg?commit=b321778f03acb78a5da4311925f79dfea08eea4d&amp;enc_url=68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f4c756b61734d6172782f72656163742d66696c652d75706c6f61642f623332313737386630336163623738613564613433313139323566373964666561303865656134642f6170702f7075626c69632f626173656c696e652d636c6f75645f75706c6f61642d323470782e737667&amp;nwo=LukasMarx%2Freact-file-upload&amp;path=app%2Fpublic%2Fbaseline-cloud_upload-24px.svg&amp;repository_id=170667907&amp;repository_type=Repository#7b28a6ed-5239-40b8-89de-232298558fce" sandbox="allow-scripts allow-same-origin allow-top-navigation" title="File display">
Viewer requires iframe.
</iframe>
</div>
</div>
</div>
</div>
<details class="details-reset details-overlay details-overlay-dark">
<summary data-hotkey="l" aria-label="Jump to line"></summary>
<details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast linejump" aria-label="Jump to line">
<!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-jump-to-line-form Box-body d-flex" action="" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
<input class="form-control flex-auto mr-3 linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
<button type="submit" class="btn" data-close-dialog>Go</button>
</form> </details-dialog>
</details>
</div>
</div>
</main>
</div>
</div>
<div class="footer container-lg width-full p-responsive" role="contentinfo">
<div class="position-relative d-flex flex-row-reverse flex-lg-row flex-wrap flex-lg-nowrap flex-justify-center flex-lg-justify-between pt-6 pb-2 mt-6 f6 text-gray border-top border-gray-light ">
<ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0">
<li class="mr-3 mr-lg-0">&copy; 2019 <span title="0.18817s from unicorn-7d894d5b96-nprrp">GitHub</span>, Inc.</li>
<li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to terms, text:terms" href="https://github.com/site/terms">Terms</a></li>
<li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to privacy, text:privacy" href="https://github.com/site/privacy">Privacy</a></li>
<li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to security, text:security" href="https://github.com/security">Security</a></li>
<li class="mr-3 mr-lg-0"><a href="https://githubstatus.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
<li><a data-ga-click="Footer, go to help, text:help" href="https://help.github.com">Help</a></li>
</ul>
<a aria-label="Homepage" title="GitHub" class="footer-octicon d-none d-lg-block mx-lg-4" href="https://github.com">
<svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
</a>
<ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0">
<li class="mr-3 mr-lg-0"><a data-ga-click="Footer, go to contact, text:contact" href="https://github.com/contact">Contact GitHub</a></li>
<li class="mr-3 mr-lg-0"><a href="https://github.com/pricing" data-ga-click="Footer, go to Pricing, text:Pricing">Pricing</a></li>
<li class="mr-3 mr-lg-0"><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
<li class="mr-3 mr-lg-0"><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
<li class="mr-3 mr-lg-0"><a href="https://github.blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
<li><a data-ga-click="Footer, go to about, text:about" href="https://github.com/about">About</a></li>
</ul>
</div>
<div class="d-flex flex-justify-center pb-6">
<span class="f6 text-gray-light"></span>
</div>
</div>
<div id="ajax-error-message" class="ajax-error-message flash flash-error">
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
<button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
</button>
You cant perform that action at this time.
</div>
<script crossorigin="anonymous" integrity="sha512-Eg0rZwgV8u0mLVvo54G5pmppwDmFXNT3D1YomZlCZn4AKgzDxmyNpgiB9sRRNwzy3cr7M+xSvfrU+ABBnAIxag==" type="application/javascript" src="https://github.githubassets.com/assets/compat-bootstrap-e11c41e2.js"></script>
<script crossorigin="anonymous" integrity="sha512-EJ9X3kU95Ur4YFVhpmVSHT6zF64XDV+MbOYu10WmDE2YRui38aJjBC/pwA/xpAZ+iRV0wQK73yrus7bdvq55/Q==" type="application/javascript" src="https://github.githubassets.com/assets/frameworks-cd24d104.js"></script>
<script crossorigin="anonymous" async="async" integrity="sha512-poSgUOrumpNwDX1IlydFTX5aTXcCcfTK2xHsXvLdSLPjFove3aMkFqMssKoKqdCiXaKCc3ckL4gth4r0jBGVdQ==" type="application/javascript" src="https://github.githubassets.com/assets/github-bootstrap-513237e9.js"></script>
<div class="js-stale-session-flash flash flash-warn flash-banner" hidden
>
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 000 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 00.01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
<span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
<span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
</div>
<template id="site-details-dialog">
<details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark hx_rsm" open>
<summary role="button" aria-label="Close dialog"></summary>
<details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal">
<button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog>
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
</button>
<div class="octocat-spinner my-6 js-details-dialog-spinner"></div>
</details-dialog>
</details>
</template>
<div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0">
<div class="Popover-message Popover-message--bottom-left Popover-message--large Box box-shadow-large" style="width:360px;">
</div>
</div>
<div aria-live="polite" class="js-global-screen-reader-notice sr-only"></div>
</body>
</html>

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './SelectOption.module.css';
const SelectOption = props => {
@@ -9,12 +8,4 @@ const SelectOption = props => {
);
};
SelectOption.defaultProps = {
};
SelectOption.propTypes = {
};
export default SelectOption;

View File

@@ -1,4 +1,11 @@
/* PLOP_INJECT_IMPORT */
import Progress from './Progress';
import Uploader from './Uploader';
import Dropzone from './Dropzone';
import StepProgressBar from './StepProgressBar';
import UserTools from './UserTools';
import ToolItem from './ToolItem';
import CommandAndUserTools from './CommandAndUserTools';
import ImageViewerInner from './ImageViewerInner';
import ImageHeader from './ImageHeader';
import Image from './Image';
@@ -20,6 +27,13 @@ import PageLoader from './molecules/PageLoader';
export {
/* PLOP_INJECT_EXPORT */
Progress,
Uploader,
Dropzone,
StepProgressBar,
UserTools,
ToolItem,
CommandAndUserTools,
ImageViewerInner,
ImageHeader,
Image,

View File

@@ -29,7 +29,7 @@ const Image = props => {
return (
<Card className={`${classes.card} c-Image`} onClick={() => props.updateBackgroundDispatcher(image.imageUrl)}>
<CardHeader avatar={<ImageHeader image={image} />} title={image.imageTitle} />
<CardHeader avatar={<ImageHeader image={image} />} title={image.imageTitle} style={{textTransform: 'capitalize'}} />
<CardActionArea>
<CardMedia
className={classes.media}

View File

@@ -1,3 +1,5 @@
.c-ImageContainer {
.c-Images {
justify-content: space-around;
}
}

View File

@@ -24,12 +24,12 @@ class ImageContainer extends React.Component {
new Image('dragonfly3', '/images/GUD_2.JPG', 'sampleDesc3'),
new Image('dragonfly4', '/images/GUD_1.JPG', 'sampleDesc4')
]
const imageRenders = images.map((image) => {
return <ImageCard image={image}/>
const imageRenders = images.map((image, index) => {
return <ImageCard image={image} key={index} />
})
return (
<div class="container-fluid">
<div class="row" style={{justifyContent: 'space-between'}}>
<div className="container-fluid c-ImageContainer">
<div className="row c-Images">
{imageRenders}
</div>
</div>

View File

@@ -1,14 +1,13 @@
import React, {useState} from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import { createPropsSelector } from 'reselect-immutable-helpers';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import {Fade, Zoom, Paper} from '@material-ui/core';
import {Zoom, Paper} from '@material-ui/core';
import { updateModalState } from '../../../../pages/Home/actions';
import { getModalState, getBackgroundImage } from '../../../../pages/Home/selectors';
import ImageViewerInner from './ImageViewerInner/ImageViewerInner';
const useStyles = makeStyles(theme => ({
modal: {
@@ -59,7 +58,7 @@ const ImageViewer = props => {
};
ImageViewer.propTypes = {
handleClose: PropTypes.func,
handleCloseDispatcher: PropTypes.func,
modalState: PropTypes.bool,
selectedImage: PropTypes.string
};

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImageContainer from './ImageContainer';
import ImageViewer from './ImageViewer';
@@ -12,8 +11,4 @@ const PrincipalContent = props => {
);
};
PrincipalContent.propTypes = {
};
export default PrincipalContent;

View File

@@ -13,7 +13,7 @@ const SideBar = props => {
});
$('*').on('click', (e) => {
// e.stopPropagation();
console.log($(e.target).closest('#sidebar'))
// console.log($(e.target).closest('#sidebar'))
if($(e.target).closest('#sidebar').length === 0) {
$('#sidebar').css('transform', 'translateX(0px)');
$('#sidebar').css('box-shadow', '');
@@ -23,18 +23,19 @@ const SideBar = props => {
})
const toggleSidebar = () => {
$('#sidebar').toggleClass('active');
$('.hideable').toggleClass('hide');
const position = $('#sidebar').css('transform').split(/[()]/)[1]
const currentX = +position.split(',')[4]
console.log(currentX)
console.log($('#sidebar').css('transform'))
console.log($('#sidebar').css('transform').split(/[()]/))
if (currentX && currentX === 255) {
$('#sidebar').css('transform', 'translateX(85px)');
} else if (currentX && currentX === 85) {
$('#sidebar').css('transform', 'translateX(255px)');
}
$('#sidebar').toggleClass('active');
$('.hideable').toggleClass('hide');
// console.log(currentX)
// console.log($('#sidebar').css('transform'))
// console.log($('#sidebar').css('transform').split(/[()]/))
$('.triangle').addClass('animation');
}
const tabsData = [

View File

@@ -26,7 +26,7 @@ class SocialLogin extends React.Component{
onSuccess(googleUser) {
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
// this.props.history.push('/home')
this.props.history.push('/home')
}
onFailure(error) {

View File

@@ -0,0 +1,10 @@
.c-CommandAndUserTools {
.c-commandTools {
border-right: 1px solid $theme-supplementer
}
.c-accountTools {
right: 2%;
position: absolute;
}
}

View File

@@ -0,0 +1,165 @@
import React from 'react';
import $ from 'jquery'
import PropTypes from 'prop-types';
import ToolItem from './ToolItem/ToolItem';
import UserTools from './UserTools/UserTools';
class CommandAndUserTools extends React.Component {
constructor(props) {
super(props)
this.registerSpeechHandlers = this.registerSpeechHandlers.bind(this)
this.startSpeechRecognition = this.startSpeechRecognition.bind(this)
this.state = {
commandToolItemsData: [
{
id: 'btnFavorites',
icon: 'star_border',
iconHovered: 'star',
clickHandler: this.props.save
},
{
id: 'btnClearCommand',
icon: 'delete_outline',
iconHovered: 'delete',
clickHandler: this.props.reset
},
{
id: 'btnFireCommand',
icon: 'send',
iconHovered: 'send',
clickHandler: this.props.execute
},
{
id: 'btnSTTCommand',
icon: 'mic_none',
iconHovered: 'mic',
clickHandler: this.startSpeechRecognition
}
]
}
}
componentDidMount() {
this.registerSpeechHandlers();
}
startSpeechRecognition() {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if(isChrome) {
this.recognition.start();
} else {
// this.domOpsService.sho
}
}
registerSpeechHandlers() {
let SpeechRecognition
let instructions = $('#command')
try {
SpeechRecognition = window.SpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition || window.webkitSpeechRecognition
// SpeechRecognition = ''
this.recognition = new SpeechRecognition()
}
catch(e) {
console.error(e);
$('.no-browser-support').show();
$('.app').hide();
}
this.recognition.onstart = function() {
instructions.val('Voice recognition activated. Try speaking into the microphone.');
}
this.recognition.onspeechend = function() {
instructions.val('You were quiet for a while so voice recognition turned itself off.');
}
this.recognition.onerror = function(event) {
if(event.error === 'no-speech') {
instructions.val('No speech was detected. Try again.');
};
}
this.recognition.onresult = function(event) {
let noteContent = "";
let current = event.resultIndex;
let transcript = event.results[current][0].transcript;
let mobileRepeatBug = (current === 1 && transcript === event.results[0][0].transcript);
if(!mobileRepeatBug) {
noteContent += transcript;
$('#command').val(noteContent);
}
}
}
// processRecastResponse(recastResponse: any) {
// let bodyRelevant: any;
// let intent: any = "";
// let assuredIntentFactor = 0.6;
// recastResponse.then((body) => {
// bodyRelevant = body.results;
// let intents = bodyRelevant ? bodyRelevant.intents : "";
// if(intents) {
// if(intents.length == 1) {
// intent = intents[0];
// } else if(intents.length > 1) {
// let reducer = (probableIntent, currIntent) => probableIntent.confidence >= currIntent.confidence ? probableIntent : currIntent;
// intent = intents.reduce(reducer, intents[0]);
// } else {
// this.domOpsService.showEmptyCommandMessage("Intent is either not Identified or is not supported, please try again with a different text.");
// return;
// }
// if (intent && intent.confidence > assuredIntentFactor) {
// let intentSlug = intent.slug;
// if (!Object.keys($config.intentSlugToOperations).includes(intentSlug)) {
// this.domOpsService.showEmptyCommandMessage("Intent is either not Identified or is not supported, please try again with a different text.");
// return;
// }
// // $(`#${$config.constants.hiddenIntentFieldId}`).val(intent);
// window.localStorage.setItem($config.constants.hiddenIntentFieldId, intentSlug);
// this.domOpsService.displayIntentBox(intentSlug);
// if (intentSlug == "resethistory") {
// let card = this.cardsService.getResponseCard($config.intentSlugToOperations.resethistory.cardTitle,
// $config.intentSlugToOperations.resethistory.cardMsg, {}, "response");
// card.insertionCounter = 0;
// let resetHistoryResponseAction = new ClearHistory(card);
// this.store.dispatch(resetHistoryResponseAction);
// return;
// }
// this.domOpsService.widgetIdentified.emit({widget: intentSlug, bodyRelevant: bodyRelevant});
// this.domOpsService.populateRecastData(intentSlug, bodyRelevant);
// // store.dispatch($config.intentSlugToOperations.addquery.action);
// } else {
// this.domOpsService.showEmptyCommandMessage("Couldn't conform with the required confidence level of the intent match, please try again.");
// }
// } else {
// this.domOpsService.showEmptyCommandMessage("There seems to be an error in the Recast Response, as intents are not returned.");
// return;
// }
// });
// }
render() {
const {commandToolItemsData} = this.state
const commandToolItems = commandToolItemsData && commandToolItemsData.map((toolData, index) => {
return <ToolItem toolData={toolData} key={index} />
})
return (
<div className="collapse navbar-collapse c-CommandAndUserTools" id="navbarSupportedContent">
<ul className="nav navbar-nav ml-auto c-commandTools">
{commandToolItems}
</ul>
<UserTools />
</div>
);
}
}
CommandAndUserTools.propTypes = {
execute: PropTypes.func,
reset: PropTypes.func,
save: PropTypes.func
};
export default CommandAndUserTools;

View File

@@ -0,0 +1,8 @@
import React from 'react';
import CommandAndUserTools from './CommandAndUserTools';
describe('CommandAndUserTools', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,38 @@
import React, {useState} from 'react';
import PropTypes from 'prop-types';
import $ from 'jquery'
import {Link} from 'react-router-dom';
const ToolItem = ({toolData}) => {
const [icon, setIcon] = useState(toolData.icon)
const toggleIcon = (event, toolData) => {
const iconTag = $(event.target).find('i').addBack('i')
const currentIcon = iconTag && iconTag[0] && iconTag[0].innerHTML
if (currentIcon === toolData.icon) {
setIcon(toolData.iconHovered)
} else {
setIcon(toolData.icon)
}
}
return (
<li id={toolData.id} className="nav-item" onClick={toolData.clickHandler}>
<Link to="#" className="nav-link">
<i
className="material-icons md-light md-36"
onMouseEnter={(event) => toggleIcon(event, toolData)}
onMouseLeave={(event) => toggleIcon(event, toolData)}>
{icon}
</i>
</Link>
</li>
);
};
ToolItem.propTypes = {
toolData: PropTypes.object
};
export default ToolItem;

View File

@@ -0,0 +1,8 @@
import React from 'react';
import ToolItem from './ToolItem';
describe('ToolItem', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import ToolItem from './ToolItem';
export default ToolItem;

View File

@@ -0,0 +1,168 @@
import React from 'react';
import {connect} from 'react-redux'
import {makeStyles} from '@material-ui/core/styles';
import {IconButton, Badge, MenuItem, Menu} from '@material-ui/core';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import {updateUploadModalState} from './../../../../../../pages/Home/actions'
const useStyles = makeStyles(theme => ({
grow: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
sectionDesktop: {
display: 'none',
float: 'right',
[theme.breakpoints.up('md')]: {
display: 'flex',
},
},
sectionMobile: {
display: 'flex',
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
}));
const UserTools = props => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
const isMenuOpen = Boolean(anchorEl);
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
const handleProfileMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMobileMenuClose = () => {
setMobileMoreAnchorEl(null);
};
const handleMenuClose = (event, uploaderModalStateDispatcher) => {
setAnchorEl(null);
handleMobileMenuClose();
if (event.currentTarget.innerText === 'Upload Image/s') {
uploaderModalStateDispatcher(true)
}
};
const handleMobileMenuOpen = event => {
setMobileMoreAnchorEl(event.currentTarget);
};
const mobileMenuId = 'primary-search-account-menu-mobile';
const menuId = 'primary-search-account-menu';
const renderMenu = (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
id={menuId}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem onClick={(event) => handleMenuClose(event, props.uploaderModalStateDispatcher)}>Upload Image/s</MenuItem>
</Menu>
);
const renderMobileMenu = (
<Menu
anchorEl={mobileMoreAnchorEl}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
id={mobileMenuId}
keepMounted
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
open={isMobileMenuOpen}
onClose={handleMobileMenuClose}
>
<MenuItem>
<IconButton aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
</IconButton>
<p>Messages</p>
</MenuItem>
<MenuItem>
<IconButton aria-label="show 11 new notifications" color="inherit">
<Badge badgeContent={11} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<p>Notifications</p>
</MenuItem>
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle />
</IconButton>
<p>Profile</p>
</MenuItem>
</Menu>
);
return (
<div className={classes.grow}>
<div className={classes.sectionDesktop}>
<IconButton aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon style={{width: '1.5em', height: '1.5em', top: '-5px', position: 'relative', right: '-2px'}} />
</Badge>
</IconButton>
<IconButton aria-label="show 17 new notifications" color="inherit">
<Badge badgeContent={17} color="secondary">
<NotificationsIcon style={{width: '1.5em', height: '1.5em', top: '-5px', position: 'relative', right: '-2px'}} />
</Badge>
</IconButton>
<IconButton
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle style={{width: '1.5em', height: '1.5em', top: '-5px', position: 'relative', right: '-2px'}} />
</IconButton>
</div>
<div className={classes.sectionMobile}>
<IconButton
aria-label="show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="inherit"
>
<MoreIcon />
</IconButton>
</div>
{renderMobileMenu}
{renderMenu}
</div>
);
};
const mapDispatchToProps = {
uploaderModalStateDispatcher: (uploadModalOpened) => updateUploadModalState(uploadModalOpened)
}
export default connect(
null,
mapDispatchToProps
)(UserTools)

View File

@@ -0,0 +1,8 @@
import React from 'react';
import UserTools from './UserTools';
describe('UserTools', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import UserTools from './UserTools';
export default UserTools;

View File

@@ -0,0 +1,3 @@
import CommandAndUserTools from './CommandAndUserTools';
export default CommandAndUserTools;

View File

@@ -10,9 +10,14 @@
transition: all 0.3s;
cursor: pointer;
}
.material-icons {
&.md-light{color:rgb(33, 37, 41)}
&.md-36{font-size:36px}
}
.navbar {
padding: 15px 10px;
padding: 5px;
// background: #222;
background: rgba(120, 120, 120, 0.3);
border: none;
@@ -282,7 +287,7 @@
}
#command.form-control {
width: 87%;
width: 45%;
}
#faux {

View File

@@ -1,33 +1,35 @@
import React from 'react';
import PropTypes from 'prop-types';
import * as $ from 'jquery'
import $ from 'jquery'
import CommandAndUserTools from './CommandAndUserTools/CommandAndUserTools';
import {Link} from 'react-router-dom';
class CommandPrompt extends React.Component {
constructor(props) {
super(props)
this.registerSpeechHandlers = this.registerSpeechHandlers.bind(this)
this.registerMouseAndKeyboardHandlers = this.registerMouseAndKeyboardHandlers.bind(this)
this.showContextMenu = this.showContextMenu.bind(this)
this.initiateDomOpsOnEnter = this.initiateDomOpsOnEnter.bind(this)
this.startSpeechRecognition = this.startSpeechRecognition.bind(this)
this.timerId = 0
}
componentDidMount() {
this.registerSpeechHandlers();
this.registerMouseAndKeyboardHandlers();
}
toggleClass(event) {
$(event.target).toggleClass('fas');
}
initiateDomOpsOnEnter(event) {
initiateDomOpsOnEnter(event, func, delay) {
const code = (event.keyCode ? event.keyCode : event.which);
if (code === 13) {
// this.domOpsService.hideNonCards();
this.executeCommand();
func();
clearTimeout(this.timerId)
return
}
clearTimeout(this.timerId)
this.timerId = setTimeout(func, delay)
}
saveToFavorites() {
}
resetCommand() {
@@ -35,139 +37,17 @@ class CommandPrompt extends React.Component {
$('#command').focus();
}
startSpeechRecognition() {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if(isChrome) {
this.recognition.start();
} else {
// this.domOpsService.sho
}
}
registerSpeechHandlers() {
let SpeechRecognition
let instructions = $('#command')
try {
SpeechRecognition = window.SpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition || window.webkitSpeechRecognition
// SpeechRecognition = ''
this.recognition = new SpeechRecognition()
}
catch(e) {
console.error(e);
$('.no-browser-support').show();
$('.app').hide();
}
this.recognition.onstart = function() {
instructions.val('Voice recognition activated. Try speaking into the microphone.');
}
this.recognition.onspeechend = function() {
instructions.val('You were quiet for a while so voice recognition turned itself off.');
}
this.recognition.onerror = function(event) {
if(event.error === 'no-speech') {
instructions.val('No speech was detected. Try again.');
};
}
this.recognition.onresult = function(event) {
let noteContent = "";
let current = event.resultIndex;
let transcript = event.results[current][0].transcript;
let mobileRepeatBug = (current === 1 && transcript === event.results[0][0].transcript);
if(!mobileRepeatBug) {
noteContent += transcript;
$('#command').val(noteContent);
}
}
}
registerMouseAndKeyboardHandlers() {
$('#content nav div.collapse li a.nav-link i.far.fa-star').hover(() => {
$('#content nav div.collapse li a.nav-link i.far.fa-star').toggleClass('fas');
});
$('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').hover(() => {
$('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').toggleClass('fas');
});
$('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').hover(() => {
$('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').toggleClass('fas');
});
$('*').on('click', (event) => {
if(!this.contextMenuFirstDisplay) {
$("#inputSelectionContextMenu").removeClass("show").hide();
this.contextMenuDisplayed = false;
// event.stopPropagation();
} else {
this.contextMenuFirstDisplay = false;
// event.stopPropagation();
}
});
}
executeCommand() {
// this.domOpsService.hideNonCards();
// let commandVal = this.command.nativeElement.value;
// if(!commandVal) {
// this.domOpsService.showEmptyCommandMessage(this.emptyCommandMessage);
// } else {
// let card = this.cardsService.getCommandCard($config.intentSlugToOperations.command.cardTitle, commandVal, {}, "command");
// let commandAction = new Command(card);
// this.store.dispatch(commandAction);
// const text = { text: commandVal };
// let recastResponse = this.recastOpsService.getRecastResponse(commandVal, text);
// this.processRecastResponse(recastResponse);
// }
}
// processRecastResponse(recastResponse: any) {
// let bodyRelevant: any;
// let intent: any = "";
// let assuredIntentFactor = 0.6;
// recastResponse.then((body) => {
// bodyRelevant = body.results;
// let intents = bodyRelevant ? bodyRelevant.intents : "";
// if(intents) {
// if(intents.length == 1) {
// intent = intents[0];
// } else if(intents.length > 1) {
// let reducer = (probableIntent, currIntent) => probableIntent.confidence >= currIntent.confidence ? probableIntent : currIntent;
// intent = intents.reduce(reducer, intents[0]);
// } else {
// this.domOpsService.showEmptyCommandMessage("Intent is either not Identified or is not supported, please try again with a different text.");
// return;
// }
// if (intent && intent.confidence > assuredIntentFactor) {
// let intentSlug = intent.slug;
// if (!Object.keys($config.intentSlugToOperations).includes(intentSlug)) {
// this.domOpsService.showEmptyCommandMessage("Intent is either not Identified or is not supported, please try again with a different text.");
// return;
// }
// // $(`#${$config.constants.hiddenIntentFieldId}`).val(intent);
// window.localStorage.setItem($config.constants.hiddenIntentFieldId, intentSlug);
// this.domOpsService.displayIntentBox(intentSlug);
// if (intentSlug == "resethistory") {
// let card = this.cardsService.getResponseCard($config.intentSlugToOperations.resethistory.cardTitle,
// $config.intentSlugToOperations.resethistory.cardMsg, {}, "response");
// card.insertionCounter = 0;
// let resetHistoryResponseAction = new ClearHistory(card);
// this.store.dispatch(resetHistoryResponseAction);
// return;
// }
// this.domOpsService.widgetIdentified.emit({widget: intentSlug, bodyRelevant: bodyRelevant});
// this.domOpsService.populateRecastData(intentSlug, bodyRelevant);
// // store.dispatch($config.intentSlugToOperations.addquery.action);
// } else {
// this.domOpsService.showEmptyCommandMessage("Couldn't conform with the required confidence level of the intent match, please try again.");
// }
// } else {
// this.domOpsService.showEmptyCommandMessage("There seems to be an error in the Recast Response, as intents are not returned.");
// return;
// }
// });
// }
showContextMenu(event) {
if(this.contextMenuDisplayed === true) {
return;
@@ -186,6 +66,23 @@ class CommandPrompt extends React.Component {
}
}
executeCommand() {
alert('called')
// this.domOpsService.hideNonCards();
let commandVal = $('#command').val();
console.log(commandVal)
if(!commandVal) {
// this.domOpsService.showEmptyCommandMessage(this.emptyCommandMessage);
} else {
// let card = this.cardsService.getCommandCard($config.intentSlugToOperations.command.cardTitle, commandVal, {}, "command");
// let commandAction = new Command(card);
// this.store.dispatch(commandAction);
// const text = { text: commandVal };
// let recastResponse = this.recastOpsService.getRecastResponse(commandVal, text);
// this.processRecastResponse(recastResponse);
}
}
render() {
return (
<div id="header" className="c-CommandPrompt headerprompt" onDragEnd={this.showContextMenu}>
@@ -202,38 +99,15 @@ class CommandPrompt extends React.Component {
<nav className="navbar navbar-expand-lg navbar-light">
<div className="container-fluid">
<input type="text" className="form-control" placeholder="What you need..."
name="command" id="command" onKeyUp={this.initiateDomOpsOnEnter}
name="command" id="command" onKeyUp={(event) => this.initiateDomOpsOnEnter(event, this.executeCommand, 2000)}
// onClick={showContextMenu} #command>
onClick={this.showContextMenu} />
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton" id="inputSelectionContextMenu">
<a className="dropdown-item">Fire</a>
<a className="dropdown-item" onClick={this.resetCommand}>Clear</a>
<a className="dropdown-item">Add to Favorites</a>
</div>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav ml-auto">
<li id="btnFavorites" className="nav-item">
<a className="nav-link">
<i className="far fa-star" onMouseEnter={this.toggleClass} onMouseLeave={this.toggleClass}></i>
</a>
</li>
<li id="btnClearCommand" className="nav-item" onClick={this.resetCommand}>
<a className="nav-link">
<i className="far fa-trash-alt" onMouseEnter={this.toggleClass} onMouseLeave={this.toggleClass}></i>
</a>
</li>
<li id="btnFireCommand" className="nav-item">
<a className="nav-link">
<i className="far fa-paper-plane" onMouseEnter={this.toggleClass} onMouseLeave={this.toggleClass}></i>
</a>
</li>
<li id="btnSTTCommand" className="nav-item" onClick={this.startSpeechRecognition}>
<a className="nav-link">
<i className="far fa-microphone fas"></i>
</a>
</li>
</ul>
<Link to="#" className="dropdown-item" onClick={this.executeCommand}>Fire</Link>
<Link to="#" className="dropdown-item" onClick={this.resetCommand}>Clear</Link>
<Link to="#" className="dropdown-item" onClick={this.saveToFavorites}>Add to Favorites</Link>
</div>
<CommandAndUserTools execute={this.executeCommand} reset={this.resetCommand} save={this.saveToFavorites} />
</div>
</nav>
<input type="hidden" id="intentHidden" value="createissue" />
@@ -242,8 +116,4 @@ class CommandPrompt extends React.Component {
}
}
CommandPrompt.propTypes = {
};
export default CommandPrompt;

View File

@@ -0,0 +1,23 @@
.c-Dropzone {
height: 200px;
width: 200px;
background-color: #fff;
border: 2px dashed rgb(187, 186, 186);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 16px;
.Icon {
opacity: 0.3;
height: 64px;
width: 64px;
}
.FileInput {
display: none;
}
&.Highlight {
background-color: rgb(188, 185, 236);
}
}

View File

@@ -0,0 +1,91 @@
import React from 'react';
import PropTypes from 'prop-types';
class Dropzone extends React.Component {
constructor(props) {
super(props)
this.state = { hightlight: false };
this.fileInputRef = React.createRef();
this.openFileDialog = this.openFileDialog.bind(this);
this.onFilesAdded = this.onFilesAdded.bind(this);
this.onDragOver = this.onDragOver.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onDrop = this.onDrop.bind(this);
}
openFileDialog() {
if (this.props.disabled) return;
this.fileInputRef.current.click();
}
onFilesAdded(evt) {
if (this.props.disabled) return;
const files = evt.target.files;
if (this.props.onFilesAdded) {
const array = this.fileListToArray(files);
this.props.onFilesAdded(array);
}
}
fileListToArray(list) {
const array = [];
for (var i = 0; i < list.length; i++) {
array.push(list.item(i));
}
return array;
}
onDragOver(evt) {
evt.preventDefault();
if (this.props.disabled) return;
this.setState({ hightlight: true });
}
onDragLeave() {
this.setState({ hightlight: false });
}
onDrop(event) {
event.preventDefault();
if (this.props.disabled) return;
const files = event.dataTransfer.files;
if (this.props.onFilesAdded) {
const array = this.fileListToArray(files);
this.props.onFilesAdded(array);
}
this.setState({ hightlight: false });
}
render() {
return (
<div
className={`c-Dropzone ${this.state.hightlight ? "Highlight" : ""}`}
onClick={this.openFileDialog}
onDragOver={this.onDragOver}
onDragLeave={this.onDragLeave}
onDrop={this.onDrop}
style={{ cursor: this.props.disabled ? "default" : "pointer" }}
>
<img
alt="upload"
className="Icon"
src="/images/cloud.svg"
/>
<input
ref={this.fileInputRef}
className="FileInput"
type="file"
multiple
onChange={this.onFilesAdded}
/>
<span>Upload Files</span>
</div>
);
}
}
Dropzone.propTypes = {
onFilesAdded: PropTypes.func
};
export default Dropzone;

View File

@@ -0,0 +1,8 @@
import React from 'react';
import Dropzone from './Dropzone';
describe('Dropzone', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import Dropzone from './Dropzone';
export default Dropzone;

View File

@@ -0,0 +1,13 @@
.c-Progress {
width: 100%;
height: 8px;
background-color: rgb(183, 155, 229);
border-radius: 5px;
.Progress {
background-color: rgba(103, 58, 183, 1);
height: 100%;
margin: 0;
border-radius: 5px;
}
}

View File

@@ -0,0 +1,20 @@
import React, { Component } from 'react'
class Progress extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div className="c-Progress">
<div
className="Progress"
style={{ width: this.props.progress + '%' }}
/>
</div>
)
}
}
export default Progress

View File

@@ -0,0 +1,8 @@
import React from 'react';
import Progress from './Progress';
describe('Progress', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import Progress from './Progress';
export default Progress;

View File

@@ -0,0 +1,3 @@
.c-StepProgressBar {
}

View File

@@ -0,0 +1,190 @@
import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {makeStyles, withStyles} from '@material-ui/core/styles';
import clsx from 'clsx';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Mood from '@material-ui/icons/Mood';
import Image from '@material-ui/icons/Image';
import QueueMusic from '@material-ui/icons/QueueMusic';
import AddCircle from '@material-ui/icons/AddCircle';
import StepConnector from '@material-ui/core/StepConnector';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const ColorlibConnector = withStyles({
alternativeLabel: {
top: 22,
},
active: {
'& $line': {
backgroundImage:
'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
},
},
completed: {
'& $line': {
backgroundImage:
'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
},
},
line: {
height: 3,
border: 0,
backgroundColor: '#eaeaf0',
borderRadius: 1,
},
})(StepConnector);
const useColorlibStepIconStyles = makeStyles({
root: {
backgroundColor: '#ccc',
zIndex: 1,
color: '#fff',
width: 50,
height: 50,
display: 'flex',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
},
active: {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
},
completed: {
backgroundImage:
'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
},
});
function ColorlibStepIcon(props) {
const classes = useColorlibStepIconStyles();
const { active, completed } = props;
const icons = {
1: <Mood />,
2: <Image />,
3: <QueueMusic />,
4: <AddCircle />,
};
return (
<div
className={clsx(classes.root, {
[classes.active]: active,
[classes.completed]: completed,
})}
>
{icons[String(props.icon)]}
</div>
);
}
ColorlibStepIcon.propTypes = {
active: PropTypes.bool,
completed: PropTypes.bool,
icon: PropTypes.node,
};
const useStyles = makeStyles(theme => ({
root: {
width: '90%',
margin: 'auto'
},
button: {
marginRight: theme.spacing(1),
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
}));
function getSteps() {
return ['How\'s your mood?', 'Select images', 'Select music', 'Click next to create Ecstatica'];
}
function getStepContent(step) {
switch (step) {
case 0:
return 'What\'s your mood';
case 1:
return 'Select Image';
case 2:
return 'Select Music';
case 3:
return 'Click next for magic';
default:
return 'Unknown step';
}
}
const StepProgressBar = props => {
const classes = useStyles();
const [activeStep, setActiveStep] = useState(0);
const steps = getSteps();
const handleNext = () => {
setActiveStep(prevActiveStep => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep(prevActiveStep => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
return (
<div className={classes.root}>
<Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>
{steps.map(label => (
<Step key={label}>
<StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
</Step>
))}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you&apos;re finished
</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</div>
) : (
<div>
<Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
<div>
<Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
)
}
StepProgressBar.propTypes = {
};
export default StepProgressBar;

View File

@@ -0,0 +1,8 @@
import React from 'react';
import StepProgressBar from './StepProgressBar';
describe('StepProgressBar', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import StepProgressBar from './StepProgressBar';
export default StepProgressBar;

View File

@@ -0,0 +1,82 @@
.c-Uploader {
}
.MuiPaper-root.MuiPaper-elevation4.Uploader-paper-152.MuiPaper-rounded {
display: flex;
flex-direction: column;
// flex: 1;
align-items: flex-start;
text-align: left;
overflow: hidden;
.Content {
display: flex;
flex-direction: row;
padding-top: 16px;
box-sizing: border-box;
width: 100%;
.Files {
margin-left: 32px;
align-items: flex-start;
justify-items: flex-start;
flex: 1;
overflow-y: auto;
.CheckIcon {
opacity: 0.5;
margin-left: 32px;
}
.ProgressWrapper {
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
}
}
}
.Actions {
display: flex;
flex: 1;
width: 100%;
align-items: flex-end;
flex-direction: column;
margin-top: 32px;
button {
font-family: 'Roboto medium', sans-serif;
font-size: 14px;
display: inline-block;
height: 36px;
min-width: 88px;
padding: 6px 16px;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 0;
border-radius: 2px;
background: rgba(103, 58, 183, 1);
color: #fff;
outline: 0;
}
button:disabled {
background: rgb(189, 189, 189);
cursor: default;
}
}
.Title {
margin-bottom: 32px;
color: #555;
}
}

View File

@@ -0,0 +1,188 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {createPropsSelector} from 'reselect-immutable-helpers';
import {withStyles} from '@material-ui/core/styles';
import {updateUploadModalState} from '../../../../pages/Home/actions';
import {getUploadModalState} from '../../../../pages/Home/selectors';
import Dropzone from './../Dropzone'
import Progress from '../Progress';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import {Zoom, Paper} from '@material-ui/core';
const styles = theme => ({
modal: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
paper: {
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
width: '40%'
}
})
class Uploader extends React.Component {
constructor(props) {
super(props)
this.state = {
files: [],
uploading: false,
uploadProgress: {},
successfullUploaded: false
};
this.onFilesAdded = this.onFilesAdded.bind(this);
this.uploadFiles = this.uploadFiles.bind(this);
this.sendRequest = this.sendRequest.bind(this);
this.renderActions = this.renderActions.bind(this);
this.renderProgress = this.renderProgress.bind(this);
}
onFilesAdded(files) {
this.setState(prevState => ({
files: prevState.files.concat(files)
}));
}
renderProgress(file) {
const uploadProgress = this.state.uploadProgress[file.name];
if (this.state.uploading || this.state.successfullUploaded) {
return (
<div className="ProgressWrapper">
<Progress progress={uploadProgress ? uploadProgress.percentage : 0} />
<img
className="CheckIcon"
alt="done"
src="baseline-check_circle_outline-24px.svg"
style={{
opacity:
uploadProgress && uploadProgress.state === "done" ? 0.5 : 0
}}
/>
</div>
);
}
}
renderActions() {
if (this.state.successfullUploaded) {
return (
<button
onClick={() =>
this.setState({ files: [], successfullUploaded: false })
}
>
Clear
</button>
);
} else {
return (
<button
disabled={this.state.files.length < 0 || this.state.uploading}
onClick={this.uploadFiles}
>
Upload
</button>
);
}
}
async uploadFiles() {
this.setState({ uploadProgress: {}, uploading: true });
const promises = [];
this.state.files.forEach(file => {
promises.push(this.sendRequest(file));
});
try {
await Promise.all(promises);
this.setState({ successfullUploaded: true, uploading: false });
} catch (e) {
// Not Production ready! Do some error handling here instead...
this.setState({ successfullUploaded: true, uploading: false });
}
}
sendRequest(file) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
const formData = new FormData();
formData.append("file", file, file.name);
req.open("POST", "http://localhost:3001/upload");
req.send(formData);
});
}
render() {
const {classes, modalState, handleCloseDispatcher} = this.props
return (
<div className="c-Uploader">
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={modalState || false}
onClose={() => handleCloseDispatcher(false)}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Zoom in={modalState || false}>
<Paper elevation={4} className={classes.paper}>
<span className="Title">Upload Files</span>
<div className="Content">
<div>
<Dropzone
onFilesAdded={this.onFilesAdded}
disabled={this.state.uploading || this.state.successfullUploaded}
/>
</div>
<div className="Files">
{this.state.files.map(file => {
return (
<div key={file.name} className="Row">
<span className="Filename">{file.name}</span>
{this.renderProgress(file)}
</div>
);
})}
</div>
</div>
<div className="Actions">
{this.renderActions()}
</div>
</Paper>
</Zoom>
</Modal>
</div>
);
}
}
Uploader.propTypes = {
classes: PropTypes.object.isRequired,
handleCloseDispatcher: PropTypes.func,
modalState: PropTypes.bool
};
const mapStateToProps = createPropsSelector({
modalState: getUploadModalState
})
const mapDispatchToProps = {
handleCloseDispatcher: updateUploadModalState
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(Uploader))

View File

@@ -0,0 +1,8 @@
import React from 'react';
import Uploader from './Uploader';
describe('Uploader', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import Uploader from './Uploader';
export default Uploader;

View File

@@ -1,3 +0,0 @@
<p>
page-not-found works!
</p>

View File

@@ -1,15 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-page-not-found',
templateUrl: './page-not-found.component.html',
styleUrls: ['./page-not-found.component.scss']
})
export class PageNotFoundComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

View File

@@ -9,6 +9,7 @@ import {getBackgroundImage, getHome} from './selectors'
import Sidebar from '../../components/molecules/SideBar'
import CommandPrompt from '../../components/molecules/common/CommandPrompt'
import PrincipalContent from '../../components/molecules/PrincipalContent/PrincipalContent';
import Uploader from '../../components/molecules/common/Uploader/Uploader';
class Home extends React.Component {
constructor(props) {
@@ -23,10 +24,12 @@ class Home extends React.Component {
render() {
return (
<div className="Home" style={{backgroundImage: `url(${this.props.backgroundImage})`}}>
<div className="Home">
<div className="c-background" style={{backgroundImage: `url(${this.props.backgroundImage})`}} />
<Sidebar />
<CommandPrompt />
<PrincipalContent />
<Uploader />
</div>
)
}

View File

@@ -1,17 +1,27 @@
.Home {
height: 100%;
overflow: hidden;
opacity: 1.0;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
-o-transition: background 1.5s linear;
-ms-transition: background 1.5s linear;
transition: background 1.5s linear;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.c-background {
height: 1000px;
width: 100%;
overflow: hidden;
opacity: 1.0;
transition: background 1.5s linear;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -20;
filter: blur(5px);
position: fixed;
}
.Card {
background-color: white;
padding: 32px;
width: 50%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
box-sizing: border-box;
}
}

View File

@@ -3,6 +3,7 @@ export const UPDATE_FORM_VALUES = 'UPDATE_BILLING_FORM_VALUES'
export const UPDATE_FORM_ERRORS = 'UPDATE_BILLING_FORM_ERRORS'
export const UPDATE_BACKGROUND = 'UPDATE_BACKGROUND'
export const UPDATE_MODAL_STATE = 'UPDATE_MODAL_STATE'
export const UPDATE_UPLOAD_MODAL_STATE = 'UPDATE_UPLOAD_MODAL_STATE'
export const updateHomeDataState = (payload) => ({type: HOME_DATA_STATE_RECEIVED, payload})
@@ -42,4 +43,11 @@ export const updateModalState = (modalState) => {
}
}
export const updateUploadModalState = (uploadModalState) => {
return {
type: UPDATE_UPLOAD_MODAL_STATE,
payload: {uploadModalOpened: uploadModalState}
}
}

View File

@@ -1,6 +1,13 @@
import Immutable from 'immutable'
import {HOME_DATA_STATE_RECEIVED, UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES, UPDATE_BACKGROUND, UPDATE_MODAL_STATE} from './actions'
import {
HOME_DATA_STATE_RECEIVED,
UPDATE_FORM_ERRORS,
UPDATE_FORM_VALUES,
UPDATE_BACKGROUND,
UPDATE_MODAL_STATE,
UPDATE_UPLOAD_MODAL_STATE
} from './actions'
const initialState = Immutable.Map({
formErrors: [],
@@ -14,6 +21,7 @@ const reducer = (state = initialState, action) => {
case UPDATE_FORM_VALUES:
case UPDATE_BACKGROUND:
case UPDATE_MODAL_STATE:
case UPDATE_UPLOAD_MODAL_STATE:
return state.mergeDeep(action.payload)
default:
return state

View File

@@ -12,5 +12,6 @@ export const getHome = createSelector(
export const getBackgroundImage = createGetSelector(getHome, 'backgroundImage')
export const getModalState = createGetSelector(getHome, 'modalOpened')
export const getUploadModalState = createGetSelector(getHome, 'uploadModalOpened')
export const getFormValues = createGetSelector(getHome, 'formValues')
export const getFormErrors = createGetSelector(getHome, 'formErrors')

View File

@@ -0,0 +1,14 @@
import React from 'react';
import StepProgressBar from '../../../components/molecules/common/StepProgressBar/StepProgressBar';
import ImageContainer from '../../../components/molecules/PrincipalContent/ImageContainer';
const Creator = props => {
return (
<div className='c-Creator'>
<StepProgressBar />
<ImageContainer />
</div>
);
};
export default Creator;

View File

@@ -0,0 +1,3 @@
.c-Creator {
}

View File

@@ -0,0 +1,8 @@
import React from 'react';
import Creator from './Creator';
describe('Creator', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import Creator from './Creator';
export default Creator;

View File

@@ -0,0 +1,10 @@
import React from 'react';
const Viewer = props => {
return (
<div className='c-Viewer'>
</div>
);
};
export default Viewer;

View File

@@ -0,0 +1,3 @@
.c-Viewer {
}

View File

@@ -0,0 +1,8 @@
import React from 'react';
import Viewer from './Viewer';
describe('Viewer', () => {
it('renders without error', () => {
});
});

View File

@@ -0,0 +1,3 @@
import Viewer from './Viewer';
export default Viewer;

View File

@@ -1,9 +1,13 @@
/* PLOP_INJECT_IMPORT */
import Viewer from './Viewer';
import Creator from './Creator';
import Login from './Login';
import Home from './Home';
export {
/* PLOP_INJECT_EXPORT */
Viewer,
Creator,
Login,
Home,
}

View File

@@ -15,6 +15,16 @@ export const LoadableLogin = Loadable({
loading: PageLoader
})
export const LoadableEcstaticaCreator = Loadable({
loader: () => import('./pages/ecstatica/Creator'),
loading: PageLoader
})
export const LoadableEcstaticaViewer = Loadable({
loader: () => import('./pages/ecstatica/Viewer'),
loading: PageLoader
})
class Router extends React.Component {
render() {
@@ -25,6 +35,8 @@ class Router extends React.Component {
<Route exact path="/" component={LoadableLogin} />
<Route path="/home" component={LoadableHome} />
<Route path="/login" component={LoadableLogin} />
<Route path="/ecstatica/create" component={LoadableEcstaticaCreator} />
<Route path="/ecstatica/view" component={LoadableEcstaticaViewer} />
</BrowserRouter>
</Provider>
)

View File

@@ -2,6 +2,9 @@
// ===
@import '../components/atoms/InputField/InputField.component';
@import '../components/molecules/common/Form/Form.component';
@import '../components/molecules/common/Dropzone/Dropzone.component';
@import '../components/molecules/common/Uploader/Uploader.component';
@import '../components/molecules/common/Progress/Progress.component';
@import '../components/molecules/common/Jumbotron/Jumbotron.component';
@import '../components/molecules/LoginForm/LoginForm.component';
@import '../components/molecules/PageLoader/PageLoader.component';
@@ -9,7 +12,9 @@
@import '../components/molecules/SideBar/SideBar.component';
@import '../components/molecules/SideBar/SideBarTab/SideBarTab.component';
@import '../components/molecules/common/CommandPrompt/CommandPrompt.component';
@import '../components/molecules/common/CommandPrompt/CommandAndUserTools/CommandAndUserTools.component';
@import '../components/molecules/PrincipalContent/PrincipalContent.component';
@import '../components/molecules/PrincipalContent/ImageContainer/ImageContainer.component';
@import '../components/molecules/PrincipalContent/ImageContainer/Image/Image.component';
@import '../components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.component';
// @import '../preloader/preload';

View File

@@ -6,6 +6,7 @@
@import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
h1,
h2,

View File

@@ -1,8 +1,16 @@
const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();
const cors = require('cors')
const upload = require('./upload/upload')
const app = express();
var corsOptions = {
origin: '*',
optionsSuccessStatus: 200,
}
app.use(cors(corsOptions))
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);
@@ -12,6 +20,8 @@ app.get('/api/greeting', (req, res) => {
res.send(JSON.stringify({ greeting: `Hello ${name}!` }));
});
app.post('/upload', upload)
app.listen(3001, () =>
console.log('Express server is running on localhost:3001')
);

View File

@@ -1514,6 +1514,15 @@
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true
},
"cors": {
"version": "2.8.5",
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
"requires": {
"object-assign": "^4",
"vary": "^1"
}
},
"create-error-class": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
@@ -2050,6 +2059,11 @@
"integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
"dev": true
},
"formidable": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.1.tgz",
"integrity": "sha512-Fs9VRguL0gqGHkXS5GQiMCr1VhZBxz0JnJs4JmMp/2jL18Fmbzvv7vOFRU+U8TBkHEE/CX1qDXzJplVULgsLeg=="
},
"forwarded": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -3655,6 +3669,11 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"object-copy": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -5000,8 +5019,7 @@
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
"dev": true
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
},
"which": {
"version": "1.3.1",

View File

@@ -2,7 +2,10 @@
"name": "picturestory-v2-backend",
"version": "0.1.0",
"private": true,
"dependencies": {},
"dependencies": {
"cors": "^2.8.5",
"formidable": "^1.2.1"
},
"scripts": {
"start": "node-env-run --exec nodemon | pino-colada"
},

21
server/upload/upload.js Normal file
View File

@@ -0,0 +1,21 @@
const IncomingForm = require('formidable').IncomingForm
const fs = require('fs')
var path = require('path');
module.exports = function upload(req, res) {
var form = new IncomingForm()
form.on('file', (field, file) => {
var oldpath = file.path;
// var newpath = __dirname + file.name;
var newpath = path.join(__dirname, '..', 'image_uploads', file.name);
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
})
form.on('end', () => {
res.json()
})
form.parse(req)
}