diff --git a/render/templates/forms/Article.tmpl b/render/templates/forms/Article.tmpl
index b86ffeb..f856932 100644
--- a/render/templates/forms/Article.tmpl
+++ b/render/templates/forms/Article.tmpl
@@ -4,66 +4,11 @@
+
\ No newline at end of file
diff --git a/web/static/editor.js b/web/static/editor.js
new file mode 100644
index 0000000..fd51c82
--- /dev/null
+++ b/web/static/editor.js
@@ -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;
+
+}
\ No newline at end of file
diff --git a/web/static/style.css b/web/static/style.css
index 0c76479..649a954 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -21,4 +21,11 @@
.danger {
background-color: var(--del-color) !important;
+}
+
+.drop-file {
+ background: #a2dbff;
+ border-style: dashed;
+ border-width: 4px;
+ border-color: #5391ff;
}
\ No newline at end of file