Jonasz Bigda
d2842a1db3
//notifications //delete restaurant //change picture //redesigned data store
63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
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">
|
|
{loading ? <CircularProgress /> : "Proszę wybrać obraz. (max. 2MB)"}
|
|
</div>
|
|
);
|
|
if (img) {
|
|
imagePreview = (
|
|
<div
|
|
className="image-preview"
|
|
style={{ backgroundImage: `url(${img})` }}
|
|
></div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="image-upload-container">
|
|
{imagePreview}
|
|
<input
|
|
name="menuiImage"
|
|
id="file"
|
|
type="file"
|
|
className="input-image"
|
|
onChange={handleInputChange}
|
|
></input>
|
|
<label htmlFor="file">Wybierz plik...</label>
|
|
</div>
|
|
);
|
|
}
|