UploadImageComponent.js
2.09 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
import { PlusOutlined } from "@ant-design/icons";
import axios from "axios";
import React from "react";
const UploadImageComponent = () => {
const handleImageChange = async info => {
console.log("info", info);
// setFileList(info.fileList);
let formData = new FormData();
formData.append("files", info.file.originFileObj);
console.log("foles", formData);
try {
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload`, formData, {
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${session.jwt}`
}
});
console.log("response image", response);
// if (response.status == 200) {
// toast.success("Uploaded successfully");
// }
setimagesArrayComponent([...imagesArrayComponent, response.data[0].id]);
// setimagesArrayComponent(
// response.data.map(item => {
// return { imageUrl: `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${item.url}` };
// })
// );
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNzE2MzY5MzQyLCJleHAiOjE3MTg5NjEzNDJ9.dHTpIvuUi4r4Eh7n-74WKDXUlSaqvhjppGJ-1G4GvHk
// if (response.status === 200) {
// message.success("upload successfully.");
// console.log("Uploaded file URL:", response.data[0].url); // The URL of the uploaded file
// } else {
// message.error("upload failed.");
// }
} catch (error) {
message.error("upload failed.");
} finally {
setUploading(false);
}
};
return (
<div>
<div className="upload-file">
{/* <button> */}
<input
className="upload-file-input"
type="file"
id={`termsConditionsFile`}
name={`termsConditionsFile`}
onInput={e => {
console.log(e);
}}
/>
{/* <PlusOutlined /> */}
{/* </button> */}
{/* <label className="custom-file-label" htmlFor={`termsConditionsFile`}>
Upload
</label> */}
</div>
</div>
);
};
export default UploadImageComponent;