Profile picture uploading #41

client/package.json

@@ -19,6 +19,7 @@
     "formik": "^2.2.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^7.19.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.0",
     "socket.io-client": "^4.0.1",

client/src/helpers/APICalls/uploadImage.ts

@@ -0,0 +1,19 @@
+import { AuthApiData } from '../../interface/AuthApiData';
+
+const uploadImage = async (Image: File): Promise<AuthApiData> => {
+  const data = new FormData();
+  data.append('uploads', Image);
+
+  const fetchOptions = {
+    method: 'POST',
+    body: data,
+  };
+
+  return await fetch(`/imageUpload`, fetchOptions)
+    .then((res) => res.json())
+    .catch((err) => {
+      console.error('UPLOADIMAGE-ERROR: ', err);
+    });
+};
+
+export default uploadImage;

client/src/mocks/mockUseAuthProvider.tsx

@@ -14,6 +14,6 @@ const MockUseAuthProvider: FunctionComponent = ({ children }) => {
       {children}
     </AuthContext.Provider>
   );
-};
+}; 
 
 export default MockUseAuthProvider;

client/src/pages/ProfilePicture/ProfilePicture.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
 import useStyles from './useStyles';
 import AuthMenu from '../../components/AuthMenu/AuthMenu';
 import Grid from '@material-ui/core/Grid';
@@ -8,9 +10,39 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import Box from '@material-ui/core/Box';
 import DeleteIcon from '@material-ui/icons/Delete';
+import TextField from '@material-ui/core/TextField';
+import InputLabel from '@material-ui/core/InputLabel';
+import uploadImage from '../../helpers/APICalls/uploadImage';
 
 export default function ProfilePicture(): JSX.Element {
   const classes = useStyles();
+  const [fileInput, setFileInput] = useState<File>();
+  const [previewImage, setPreviewImage] = useState('');
+  const componentRef = React.useRef<HTMLFormElement>(null);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!fileInput) return;
+    uploadImage(fileInput);
+  };
+
+  const handleChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const image: File = (target.files as FileList)[0];
+    profileImage(image);
+    await setFileInput(image);
+    componentRef.current?.requestSubmit();
+  };
+
+  const profileImage = (image: File) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(image);
+    reader.onloadend = () => {
+      const result = reader.result as string;
+      setPreviewImage(result);
+    };
+  };
+
   return (
     <Box className={classes.outsideContainer}>
       <AuthMenu />
@@ -34,8 +66,8 @@ export default function ProfilePicture(): JSX.Element {
                 Profile Picture
               </Typography>
             </Grid>
-            <Grid item container className={classes.profileImageContainer}>
-              <img src="" className={classes.profileImage}></img>
+            <Grid item container className={classes.previewImageContainer}>
+              {previewImage && <img src={previewImage} className={classes.previewImage}></img>}
             </Grid>
             <Grid item container className={classes.tipContainer}>
               <Typography variant="h6" className={classes.tip}>
@@ -44,9 +76,28 @@ export default function ProfilePicture(): JSX.Element {
               </Typography>
             </Grid>
             <Grid item container className={classes.uploadButtonContainer}>
-              <Button variant="text" className={classes.uploadButton}>
-                Upload a file from your device
-              </Button>
+              <form
+                method="POST"
+                action="/imageUpload"
+                id="upload-Image-Form"
+                ref={componentRef}
+                onSubmit={handleSubmit}
+                encType="multipart/form-data"
+              >
+                <TextField
+                  className={classes.uploadInput}
+                  id="fileInput"
+                  name="uploads"
+                  type="file"
+                  onChange={handleChange}
+                />
+                <InputLabel htmlFor="fileInput" className={classes.label}>
+                  <Button variant="contained" component="span" className={classes.uploadButton}>
+                    Upload a file from your device
+                  </Button>
+                </InputLabel>
+                <Button type="submit" className={classes.submitButton}></Button>
+              </form>
             </Grid>
             <Grid item container className={classes.deleteButtonContainer}>
               <IconButton className={classes.deleteButton}>

client/src/pages/ProfilePicture/useStyles.ts

@@ -20,7 +20,6 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: -1,
     overflow: 'hidden',
   },
   innerContentContainer: {
@@ -37,7 +36,7 @@ const useStyles = makeStyles(() => ({
     color: 'black',
     margin: '2rem',
   },
-  profileImageContainer: {
+  previewImageContainer: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -46,11 +45,11 @@ const useStyles = makeStyles(() => ({
     paddingBottom: '2rem',
     border: 'none',
   },
-  profileImage: {
+  previewImage: {
     position: 'relative',
     display: 'flex',
-    height: '10rem',
-    width: '10rem',
+    height: '15rem',
+    width: '15rem',
     border: '0.15rem solid',
     borderRadius: '50%',
   },
@@ -75,20 +74,27 @@ const useStyles = makeStyles(() => ({
   },
   uploadButton: {
     border: '0.15rem solid',
+    borderRadius: '0.3rem',
     borderColor: 'red',
     color: 'red',
     fontWeight: 700,
     fontSize: '1rem',
     fontFamily: 'sans-serif',
     height: '4rem',
-    width: '30%',
-    display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: 'transparent',
     '&:hover': {
       backgroundColor: 'transparent',
     },
   },
+  label: {},
+  submitButton: {
+    display: 'none',
+  },
+  uploadInput: {
+    display: 'none',
+  },
   deleteButtonContainer: {
     display: 'flex',
     alignItems: 'center',