fixes

src/components/Input/ImageUpload.js

@@ -1,31 +1,43 @@
 import React, { useState } from "react";
+import axios from "axios";
 
 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();
+    let data = new FormData();
+    data.append("menuiImage", new Blob([event.target.files[0]]));
 
+    axios({
+      url: "http://localhost:4000/img",
+      method: "POST",
+      data: data,
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "multipart/form-data",
+      },
+    })
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+
+    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>
+      <div
+        className="image-preview"
+        style={{ backgroundImage: `url(${imagePreviewURL})` }}
+      ></div>
     );
   }
 
@@ -39,7 +51,7 @@ export default function ImageUpload() {
         className="input-image"
         onChange={handleInputChange}
       ></input>
-      <label for="file">Wybierz plik...</label>
+      <label htmlFor="file">Wybierz plik...</label>
     </div>
   );
 }