add animation while uploading a dropped file
This commit is contained in:
parent
ff10f6c5eb
commit
4bdb920c71
|
@ -30,6 +30,7 @@ function addFileDrop(id) {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append("file", file)
|
formData.append("file", file)
|
||||||
|
|
||||||
|
textArea.classList.add("drop-file-process")
|
||||||
fetch(
|
fetch(
|
||||||
"/admin/api/binaries",
|
"/admin/api/binaries",
|
||||||
{
|
{
|
||||||
|
@ -44,6 +45,11 @@ function addFileDrop(id) {
|
||||||
} else {
|
} else {
|
||||||
textArea.value += `\n[${file.name}](${data.location})`
|
textArea.value += `\n[${file.name}](${data.location})`
|
||||||
}
|
}
|
||||||
|
textArea.classList.remove("drop-file-process")
|
||||||
|
}).catch(err => {
|
||||||
|
console.error(err);
|
||||||
|
}).finally(() => {
|
||||||
|
textArea.classList.remove("drop-file-process")
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,4 +28,25 @@
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
border-width: 4px;
|
border-width: 4px;
|
||||||
border-color: #5391ff;
|
border-color: #5391ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes border-pulsate {
|
||||||
|
0% {
|
||||||
|
border-color: #5391ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
border-color: rgba(0, 255, 255, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
border-color: #5391ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-file-process {
|
||||||
|
border-style: dashed;
|
||||||
|
border-width: 4px;
|
||||||
|
border-color: #5391ff;
|
||||||
|
animation: border-pulsate 2s infinite;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue