Change localization

src/components/Input/ImageUploadWide.js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { useSelector } from "react-redux";
+import axios from "axios";
+
+export default function ImageUpload(props) {
+  const { img } = props;
+  const [loading, setLoading] = useState(false);
+  const token = useSelector((state) => state.data.userData.jwt);
+
+  const handleInputChange = (event) => {
+    let data = new FormData();
+    data.append("menuiImage", event.target.files[0]);
+    setLoading(true);
+    axios({
+      url: "http://localhost:4000/img",
+      method: "POST",
+      data: data,
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "multipart/form-data",
+        "x-auth-token": token,
+      },
+    })
+      .then((response) => {
+        props.onUpload(response.data.imgURL);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.log("Wystąpił błąd podczas wgrywania pliku.");
+        setLoading(false);
+      });
+  };
+
+  let imagePreview = (
+    <div className="image-preview-wide">
+      {loading ? <CircularProgress /> : "Proszę wybrać obraz. (max. 2MB)"}
+    </div>
+  );
+  if (img) {
+    imagePreview = (
+      <div
+        className="image-preview-wide"
+        style={{ backgroundImage: `url(${img})` }}
+      ></div>
+    );
+  }
+
+  return (
+    <div className="image-upload-container-wide">
+      {imagePreview}
+      <input
+        name="menuiImage"
+        id="file"
+        type="file"
+        className="input-image-wide"
+        onChange={handleInputChange}
+      ></input>
+      <label htmlFor="file">Wybierz plik...</label>
+    </div>
+  );
+}