no TS / Image upload form

src/components/Dialogs/NewRestaurant.js

@@ -16,6 +16,7 @@ import StepLabel from "@material-ui/core/StepLabel";
 import Paper from "@material-ui/core/Paper";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import InputAdornment from "@material-ui/core/InputAdornment";
+import ImageUpload from "../Input/ImageUpload";
 import validator from "validator";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
@@ -313,6 +314,11 @@ export default function NewRestaurant() {
               </div>
             </Paper>
           )}
+          {activeStep === 1 && (
+            <Paper>
+              <ImageUpload />
+            </Paper>
+          )}
           {activeStep !== 0 && (
             <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
           )}

src/components/Input/ImageUpload.js

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+export default function ImageUpload() {
+  const [file, setFile] = useState(null);
+  const [imagePreviewURL, setPreviewURL] = useState("");
+
+  const handleInputChange = (event) => {
+    setFile(event.target.files[0]);
+    let reader = new FileReader();
+
+    reader.onloadend = () => {
+      setPreviewURL(reader.result);
+    };
+
+    reader.readAsDataURL(event.target.files[0]);
+  };
+
+  let imagePreview = <div className="image-preview">Proszę wybrać obraz.</div>;
+  if (imagePreviewURL) {
+    imagePreview = (
+      <div className="image-preview">
+        <img
+          className="preview"
+          src={imagePreviewURL}
+          width="200"
+          alt="Obraz"
+        ></img>
+      </div>
+    );
+  }
+
+  return (
+    <div className="image-upload-container">
+      {imagePreview}
+      <input
+        name="menuiImage"
+        id="file"
+        type="file"
+        className="input-image"
+        onChange={handleInputChange}
+      ></input>
+      <label for="file">Wybierz plik...</label>
+    </div>
+  );
+}