Merge pull request #38 from thomasoca/add-image-upload

Add image upload

frontend/src/App.tsx

@@ -23,12 +23,15 @@ import {
   KeyboardArrowRight,
   GetApp,
 } from "@material-ui/icons";
+import ImageUploadControl, {
+  ImageUploadControlTester,
+} from "./ImageUploadControl";
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 const renderers = [
   ...materialRenderers,
   //register custom renderers
-  //{ tester: ratingControlTester, renderer: RatingControl },
+  { tester: ImageUploadControlTester, renderer: ImageUploadControl },
 ];
 const useStyles = makeStyles((theme) => ({
   root: {

frontend/src/ImageUpload.tsx

@@ -0,0 +1,82 @@
+import React, { FC } from "react";
+import { Grid, Button } from "@material-ui/core";
+import CloudUploadIcon from "@material-ui/icons/CloudUpload";
+import DeleteIcon from "@material-ui/icons/Delete";
+
+interface ImageUploadProps {
+  path: string;
+  updateValue: (newValue: string) => void;
+  value?: string;
+}
+
+const getBase64 = (file: File) => {
+  return new Promise<string>((resolve) => {
+    let baseURL: string = "";
+    // Make new FileReader
+    let reader = new FileReader();
+
+    // Convert the file to base64 text
+    reader.readAsDataURL(file);
+
+    // on reader load somthing...
+    reader.onload = () => {
+      // Make a fileInfo Object
+      baseURL = reader.result as string;
+      resolve(baseURL);
+    };
+  });
+};
+
+const ImageUpload: FC<ImageUploadProps> = ({ path, updateValue, value }) => {
+  const handleClear = () => {
+    updateValue("");
+  };
+  return (
+    <div style={{ marginBottom: "20px" }}>
+      <Grid container spacing={2} alignItems="center">
+        <Grid item>
+          <input
+            accept="image/*"
+            style={{ display: "none" }}
+            id={`icon_${path}`}
+            onChange={(e) => {
+              let file = e?.target.files?.item(0)!;
+              getBase64(file)
+                .then((result) => {
+                  updateValue(result);
+                })
+                .catch((err) => {
+                  console.log(err);
+                });
+            }}
+            type="file"
+            multiple={false} // Change to single image upload
+          />
+          <label htmlFor={`icon_${path}`}>
+            <Button
+              variant="contained"
+              color="primary"
+              component="span"
+              startIcon={<CloudUploadIcon />}
+            >
+              Upload Photo
+            </Button>
+          </label>
+        </Grid>
+        &nbsp;
+        <Grid item>
+          <Button
+            onClick={handleClear}
+            className="materialBtn"
+            startIcon={<DeleteIcon />}
+          >
+            Clear
+          </Button>
+        </Grid>
+        &nbsp;
+      </Grid>
+    </div>
+  );
+};
+
+export default ImageUpload;

frontend/src/ImageUploadControl.tsx

@@ -0,0 +1,51 @@
+import { withJsonFormsControlProps } from "@jsonforms/react";
+import ImageUpload from "./ImageUpload"; // Assuming you have an ImageUpload component
+import { rankWith, scopeEndsWith, ControlProps } from "@jsonforms/core";
+
+interface ImageUploadControlTesterProps {
+  uischema: any;
+  schema: any;
+}
+
+interface NewHandleChangeProps {
+  handleChange(path: string, newValue: any): void;
+  path: string;
+  newValue: any;
+}
+
+interface ImageUploadControlProps {
+  data: any;
+  path: string;
+  label: string;
+  handleChange(path: string, value: any): void;
+}
+
+export const ImageUploadControlTester = rankWith(
+  3, // increase rank as needed
+  scopeEndsWith("picture")
+);
+
+const newHandleChange = ({
+  handleChange,
+  path,
+  newValue,
+}: NewHandleChangeProps) => {
+  handleChange(path, newValue);
+};
+
+const ImageUploadControl = ({
+  data,
+  handleChange,
+  path,
+  label,
+}: ControlProps) => (
+  <ImageUpload
+    updateValue={(newValue: string) =>
+      newHandleChange({ handleChange, path, newValue })
+    }
+    value={data}
+    path={path}
+  />
+);
+
+export default withJsonFormsControlProps(ImageUploadControl);

frontend/src/schema.json

@@ -40,6 +40,10 @@
         "twitter": {
           "type": "string",
           "description": "@jane"
+        },
+        "picture": {
+          "type": "string",
+          "title": "Upload Profile Picture"
         }
       }
     },

frontend/src/uischema.json

@@ -64,6 +64,16 @@
               "scope": "#/properties/personal_info/properties/github"
             }
           ]
+        },
+        {
+          "type": "HorizontalLayout",
+          "elements": [
+            {
+              "type": "Control",
+              "label": "Profile Picture",
+              "scope": "#/properties/personal_info/properties/picture"
+            }
+          ]
         }
       ]
     },

frontend/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -14,7 +18,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
-  "include": ["src"]
+  "include": [
+    "src"
+  ]
 }