80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import CircularProgress from "@material-ui/core/CircularProgress";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import axios from "axios";
|
|
import { backend } from "../../config";
|
|
import { notification } from "../../actions/index";
|
|
|
|
export default function ImageUpload(props) {
|
|
const dispatch = useDispatch();
|
|
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: backend + "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) => {
|
|
if (error.response) {
|
|
if (error.response.status === 413) {
|
|
dispatch(notification("Błąd wysyłania. Sprawdź rozmiar pliku (max 2MB.)", "error"))
|
|
} else if (error.response.status === 401) {
|
|
dispatch(notification("Błąd wysyłania. Brak dostępu.", "error"))
|
|
} else {
|
|
dispatch(notification("Błąd wysyłania. Serwer odrzucił plik.", "error"))
|
|
}
|
|
setLoading(false);
|
|
} else if (error.request) {
|
|
dispatch(notification("Błąd wysyłania. Brak odpowiedzi od serwera.", "error"))
|
|
setLoading(false);
|
|
} else {
|
|
dispatch(notification("Błąd wysyłania.", "error"))
|
|
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>
|
|
);
|
|
}
|