create fileupload dropzone using react-dropzone

scm-ui-components/packages/ui-components/src/FileUploadDropzone.js

@@ -0,0 +1,89 @@
+// @flow
+import React from "react";
+import Dropzone from "react-dropzone";
+import { translate } from "react-i18next";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+
+const styles = {
+  dropzone: {
+    width: "100%",
+    height: "20rem",
+    border: "solid 1px #eeeeee",
+    borderRadius: "2px"
+  },
+  innerBorder: {
+    margin: "2rem",
+    height: "16rem",
+    alignSelf: "center",
+    border: "dashed 3px #f5f5f5",
+    display: "flex",
+    justifyContent: "center"
+  },
+  description : {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  icon : {
+    margin: "1rem 0rem"
+  }
+};
+
+type Props = {
+  // context props
+  t: string => string,
+  classes: any
+}
+
+type State = {
+  acceptedFiles: any
+}
+
+class FileUploadDropzone extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      acceptedFiles: null
+    };
+  }
+
+   onDrop = (acceptedFiles ) => {
+    this.setState({ acceptedFiles });
+  };
+
+  render() {
+    const { t, classes } = this.props;
+    const { acceptedFiles } = this.state;
+
+    return (
+      <>
+        <Dropzone onDrop={this.onDrop}>
+          {({getRootProps, getInputProps}) => (
+            <section>
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                <div className={classes.dropzone}>
+                  <div className={classes.innerBorder}>
+                    <div className={classNames(classes.description, "has-text-grey-light")}>
+                      {t("fileUpload.clickHere")}
+                      <i className={classNames("fas fa-plus-circle fa-2x has-text-grey-lighter", classes.icon)}/>
+                      {t("fileUpload.dragAndDrop")}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          )}
+        </Dropzone>
+        <div>
+          <p>{acceptedFiles && acceptedFiles[0].name}</p>
+        </div>
+      </>
+    );
+  }
+}
+
+export default injectSheet(styles)(translate("repos")(FileUploadDropzone));

scm-ui-components/packages/ui-components/src/index.js

@@ -36,6 +36,7 @@ export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as OverviewPageActions } from "./OverviewPageActions.js";
 export { default as CardColumnGroup } from "./CardColumnGroup";
 export { default as CardColumn } from "./CardColumn";
+export { default as FileUploadDropzone } from "./FileUploadDropzone";
 
 export { apiClient } from "./apiclient.js";
 export * from "./errors";

scm-ui/package.json

@@ -26,6 +26,7 @@
     "react": "^16.8.6",
     "react-diff-view": "^1.8.1",
     "react-dom": "^16.8.6",
+    "react-dropzone": "^10.1.8",
     "react-i18next": "^7.9.0",
     "react-jss": "^8.6.0",
     "react-redux": "^5.0.7",

scm-ui/public/locales/de/repos.json

@@ -174,5 +174,9 @@
   "diff": {
     "sideBySide": "Zweispaltig",
     "combined": "Kombiniert"
+  },
+  "fileUpload": {
+    "clickHere": "Klicken Sie hier um Ihre Datei hochzuladen.",
+    "dragAndDrop": "Sie können Ihre Datei auch direkt in die Dropzone ziehen."
   }
 }

scm-ui/public/locales/en/repos.json

@@ -181,5 +181,9 @@
     },
     "sideBySide": "side-by-side",
     "combined": "combined"
+  },
+  "fileUpload": {
+    "clickHere": "Click here to select your file",
+    "dragAndDrop": "Drag 'n' drop some files here"
   }
 }

scm-ui/yarn.lock

@@ -1156,6 +1156,13 @@ atob@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
+attr-accept@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.3.tgz#48230c79f93790ef2775fcec4f0db0f5db41ca52"
+  integrity sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==
+  dependencies:
+    core-js "^2.5.0"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -3396,6 +3403,13 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-selector@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0"
+  integrity sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==
+  dependencies:
+    tslib "^1.9.0"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -6870,6 +6884,15 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 property-information@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-4.2.0.tgz#f0e66e07cbd6fed31d96844d958d153ad3eb486e"
@@ -7048,6 +7071,15 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-dropzone@^10.1.8:
+  version "10.1.8"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.1.8.tgz#348895a3ee9efe7c0f6a2f19642f04704c170757"
+  integrity sha512-Lm6+TxIDf/my4i3VdYmufRcrJ4SUbSTJP3HB49V2+HNjZwLI4NKVkaNRHwwSm9CEuzMP+6SW7pT1txc1uBPfDg==
+  dependencies:
+    attr-accept "^1.1.3"
+    file-selector "^0.1.11"
+    prop-types "^15.7.2"
+
 react-i18next@^7.9.0:
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-7.13.0.tgz#a6f64fd749215ec70400f90da6cbde2a9c5b1588"
@@ -7066,6 +7098,11 @@ react-is@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3"
 
+react-is@^16.8.1:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
+  integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
+
 react-jss@^8.6.0:
   version "8.6.1"
   resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252"