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>
+  );
+}

src/index.js

@@ -15,8 +15,7 @@ const store = createStore(
   rootReducer,
   compose(
     applyMiddleware(thunk),
-    (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
-      (window as any).__REDUX_DEVTOOLS_EXTENSION__()
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   )
 );
 

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/styles/NewRestaurant.scss

@@ -8,3 +8,50 @@
   grid-column-start: 1;
   grid-column-end: 3;
 }
+
+.image-upload-container {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-preview {
+  width: 200px;
+  height: 200px;
+  border-radius: 15px;
+  box-shadow: (5px 5px 15px rgba(0, 0, 0, 0.151));
+  border: solid 1px rgb(126, 126, 126);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+}
+
+.preview {
+  border-radius: 15px;
+}
+
+.input-image {
+  width: 0.1ox;
+  height: 0.1px;
+  opacity: 0;
+  cursor: pointer;
+  overflow: hidden;
+  position: absolute;
+}
+
+.input-image + label {
+  margin-left: 24px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  padding: 14px;
+  border-radius: 8px;
+  color: #262626;
+  background-color: #d68000;
+  cursor: pointer;
+}
+
+.input-image + label:hover {
+  background-color: #fd9800;
+}