finish drop file and moved into function for reusablility

This commit is contained in:
Niko Abeler 2024-02-23 10:10:07 +01:00
parent 4941b5d027
commit 6d115dd74e
3 changed files with 95 additions and 57 deletions

View File

@ -4,66 +4,11 @@
<label for="content">Content</label>
<textarea
id="contentField"
ondrop="dropHandler(event);"
ondragover="dragOverHandler(event);"
name="content"
rows="16"
>{{.Content}}</textarea>
<script src="/static/editor.js"></script>
<script>
const contentField = document.getElementById("contentField")
function processFile(file) {
console.log(`name = ${file.name}`);
console.log(`size = ${file.size}`);
console.log(`type = ${file.type}`);
console.log(file)
const formData = new FormData()
formData.append("file", file)
fetch(
"/admin/api/binaries",
{
method: "POST",
body: formData
}
).then((resp) => {
return resp.json()
}).then(data => {
if (file.type.split("/")[0] == "image") {
contentField.value += `\n![](${data.location})`
} else {
contentField.value += `\n[${file.name}](${data.location})`
}
})
}
function dropHandler(ev) {
console.log("File(s) dropped");
ev.preventDefault();
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
[...ev.dataTransfer.items].forEach((item, i) => {
// If dropped items aren't files, reject them
if (item.kind === "file") {
const file = item.getAsFile();
processFile(file)
}
});
} else {
// Use DataTransfer interface to access the file(s)
[...ev.dataTransfer.files].forEach((file, i) => {
processFile(file)
});
}
}
function dragOverHandler(ev) {
console.log("File(s) in drop zone");
ev.preventDefault();
}
addFileDrop("contentField")
</script>

86
web/static/editor.js Normal file
View File

@ -0,0 +1,86 @@
/**
* Add "drop to upload" to a text area
* @param {string} id id of a textarea
*/
function addFileDrop(id) {
// deactivate file drop on body
// this prevents accidentally opening the file instead uploading
document.body.ondrop = (ev) => {
ev.preventDefault();
return false
}
document.body.ondragover = (ev) => {
ev.preventDefault();
return false
}
// get field
const textArea = document.getElementById(id)
/**
* Uploads a single file and add markdown to textarea
* @param {File} file file object to upload
*/
function processFile(file) {
console.log(`name = ${file.name}`);
console.log(`size = ${file.size}`);
console.log(`type = ${file.type}`);
console.log(file)
const formData = new FormData()
formData.append("file", file)
fetch(
"/admin/api/binaries",
{
method: "POST",
body: formData
}
).then((resp) => {
return resp.json()
}).then(data => {
if (file.type.split("/")[0] == "image") {
textArea.value += `\n![](${data.location})`
} else {
textArea.value += `\n[${file.name}](${data.location})`
}
})
}
function dropHandler(ev) {
textArea.classList.remove("drop-file")
ev.preventDefault();
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
[...ev.dataTransfer.items].forEach((item, i) => {
// If dropped items aren't files, reject them
if (item.kind === "file") {
const file = item.getAsFile();
processFile(file)
}
});
} else {
// Use DataTransfer interface to access the file(s)
[...ev.dataTransfer.files].forEach((file, i) => {
processFile(file)
});
}
}
function dragOverHandler(ev) {
textArea.classList.add("drop-file")
ev.preventDefault();
}
function dragLeaveHandler(ev) {
textArea.classList.remove("drop-file")
ev.preventDefault();
}
textArea.ondrop = dropHandler;
textArea.ondragover = dragOverHandler;
textArea.ondragleave = dragLeaveHandler;
}

View File

@ -22,3 +22,10 @@
.danger {
background-color: var(--del-color) !important;
}
.drop-file {
background: #a2dbff;
border-style: dashed;
border-width: 4px;
border-color: #5391ff;
}