setUrl(imgUrl)} />
diff --git a/src/components/Input/ImageUploadWide.js b/src/components/Input/ImageUploadWide.js
new file mode 100644
index 0000000..45b4071
--- /dev/null
+++ b/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 = (
+
+ {loading ? : "Proszę wybrać obraz. (max. 2MB)"}
+
+ );
+ if (img) {
+ imagePreview = (
+
+ );
+ }
+
+ return (
+
+ {imagePreview}
+
+
+
+ );
+}
diff --git a/src/styles/EditRestaurant.scss b/src/styles/EditRestaurant.scss
index ba962fb..784dd40 100644
--- a/src/styles/EditRestaurant.scss
+++ b/src/styles/EditRestaurant.scss
@@ -25,9 +25,13 @@
display: flex;
flex-flow: column;
justify-content: space-between;
+ align-items: center;
width: 100%;
max-height: 600px;
overflow: auto;
+ h3 {
+ font-weight: 400;
+ }
}
.editRestaurant-doubleColumn {
diff --git a/src/styles/NewRestaurant.scss b/src/styles/NewRestaurant.scss
index 78dd73c..8d82305 100644
--- a/src/styles/NewRestaurant.scss
+++ b/src/styles/NewRestaurant.scss
@@ -57,3 +57,48 @@
.newRestaurant-bottom {
display: inline-block;
}
+
+// WIDE
+
+.image-upload-container-wide {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+.image-preview-wide {
+ width: 100%;
+ height: 300px;
+ border-radius: 6px;
+ box-shadow: (5px 5px 15px rgba(0, 0, 0, 0.151));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+ background-size: cover;
+ background-position: center;
+}
+
+.input-image-wide {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ cursor: pointer;
+ overflow: hidden;
+ position: absolute;
+}
+
+.input-image-wide + label {
+ margin: 16px;
+ font-size: 0.9rem;
+ font-weight: 500;
+ padding: 14px;
+ border-radius: 6px;
+ color: #262626;
+ background-color: #d68000;
+ cursor: pointer;
+}
+
+.input-image-wide + label:hover {
+ background-color: #fd9800;
+}