FileUpload.js
2.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React, { useState } from "react";
import Dropzone from "react-dropzone";
import { Icon } from "antd";
import Axios from "axios";
import "./FileUpload.css";
function FileUpload(props) {
const [Images, setImages] = useState([]);
const onDrop = files => {
let formData = new FormData();
const config = {
header: { "content-type": "multipart/form-data" },
};
formData.append("file", files[0]);
Axios.post("/api/product/uploadImage", formData, config).then(response => {
if (response.data.success) {
setImages([...Images, response.data.image]);
props.refreshFunction([...Images, response.data.image]);
} else {
alert("Failed to save the Image in Server");
}
});
};
const onDelete = image => {
const currentIndex = Images.indexOf(image);
let newImages = [...Images];
newImages.splice(currentIndex, 1);
setImages(newImages);
props.refreshFunction(newImages);
};
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Dropzone onDrop={onDrop} multiple={false} maxSize={800000000}>
{({ getRootProps, getInputProps }) => (
<div
style={{
width: "300px",
height: "240px",
border: "1px solid lightgray",
borderRadius: '15px',
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
{...getRootProps()}
>
{console.log("getRootProps", { ...getRootProps() })}
{console.log("getInputProps", { ...getInputProps() })}
<input {...getInputProps()} />
<Icon type="plus" style={{ fontSize: "3rem" }} />
</div>
)}
</Dropzone>
<div style={{ display: "flex", width: "350px", height: "240px", overflowX: "scroll" }}>
{Images.map((image, index) => (
<div onClick={() => onDelete(image)}>
<img id="test" src={`http://localhost:5000/${image}`} />
<div id="alert">클릭하면 삭제돼요!</div>
</div>
))}
</div>
</div>
);
}
export default FileUpload;