-
Notifications
You must be signed in to change notification settings - Fork 0
/
addPost.js
127 lines (111 loc) · 3.25 KB
/
addPost.js
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const contentDom = document.querySelector("#content");
const submitBtn = document.querySelector("#btn");
const fileInput = document.querySelector("#file");
const imagesDom = document.querySelector("#images");
const url = "https://protected-refuge-81301.herokuapp.com/posts";
let images = [];
submitBtn.addEventListener("click", (e) => {
if (!contentDom.value)
return createToastMessage(false, "請輸入您的貼文內容!!");
upLoadPost();
});
fileInput.addEventListener("change", (e) => {
fileToFormData();
});
async function upLoadPost() {
submitBtn.children[0].classList.add("hidden");
submitBtn.children[1].classList.remove("hidden");
const { value } = contentDom;
try {
const res = await axios.post(url, {
// user: "626e3eb476e0041982fc8e78",
user: "626e3f3176e0041982fc8e7a",
// user: "626e3f1076e0041982fc8e79",
image: images,
content: value,
});
contentDom.value = "";
images = [];
imgRender();
res.data.success
? createToastMessage(res.data.success, "新增貼文成功!")
: createToastMessage(res.data.success, "新增貼文失敗!");
} catch (error) {
console.log(error);
}
submitBtn.children[0].classList.remove("hidden");
submitBtn.children[1].classList.add("hidden");
}
function fileToFormData() {
fileInput.setAttribute("disabled", "true");
const formData = new FormData();
const file = fileInput.files[0];
formData.append("image", file);
uploadImgur(formData);
}
async function uploadImgur(formData) {
try {
const res = await axios({
method: "POST",
url: "https://api.imgur.com/3/image",
data: formData,
headers: {
Authorization: "Client-ID 9deffd8e1209efa",
},
mimeType: "multipart/form-data",
});
images.push(res.data.data.link);
imgRender();
fileInput.removeAttribute("disabled");
createToastMessage(res.data.success, "新增照片成功!!");
} catch (error) {
console.log(error);
createToastMessage(false, error);
}
}
function imgRender() {
const str = images
.map(
(item) => `<div class="relative group cursor-pointer ">
<button
type="button"
data-id="${item}"
class="close group-hover:flex border rounded-full w-6 h-6 hidden justify-center items-center border-black hover:bg-red-400 hover:text-yellow-50 absolute -top-2 -right-2 bg-white"
>
<span class="material-icons pointer-events-none"> close </span>
</button>
<img
referrerpolicy="no-referrer"
class="object-contain w-full"
src="${item}"
alt=""
/>
</div>`
)
.join("");
imagesDom.innerHTML = str;
const closeBtns = document.querySelectorAll(".close");
closeBtns.forEach((btn) => {
btn.addEventListener("click", (e) => {
deletImg(e.target.dataset.id);
});
});
}
function deletImg(id) {
const index = images.findIndex((item) => item === id);
images.splice(index, 1);
imgRender();
createToastMessage(true, "刪除照片成功!!");
}
function createToastMessage(success, text) {
Toastify({
text: text,
className: "info",
close: true,
style: {
background: success
? "linear-gradient(to right, #00b09b, #96c93d)"
: "linear-gradient(to right, #C63300, #880000)",
},
}).showToast();
}