3 files changed, 57 insertions, 0 deletions
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..1f88d95
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,52 @@
+"use strict";
+(function () {
+        const dropZone = document.body;
+        if (!dropZone) {
+                return;
+        }
+        const hoverClassName = "hover";
+        // Handle drag* events to handle style
+        // Add the css you want when the class "hover" is present
+        dropZone.addEventListener("dragenter", function (e) {
+                e.preventDefault();
+                dropZone.classList.add(hoverClassName);
+        });
+        dropZone.addEventListener("dragover", function (e) {
+                e.preventDefault();
+                dropZone.classList.add(hoverClassName);
+        });
+        dropZone.addEventListener("dragleave", function (e) {
+                e.preventDefault();
+                dropZone.classList.remove(hoverClassName);
+        });
+        // This is the most important event, the event that gives access to files
+        dropZone.addEventListener("drop", function (e) {
+                e.preventDefault();
+                dropZone.classList.remove(hoverClassName);
+                const files = Array.from(e.dataTransfer.files);
+                if (files.length > 0) {
+                        const data = new FormData();
+                        for (const file of files) {
+                                data.append('file', file);
+                        }
+                        fetch('/', {
+                                method: 'POST',
+                                body: data,
+                        })
+                                .then(response => response.text())
+                                .then(body => {  // Yes, this is ugly
+                                        document.open()
+                                        document.write(body)
+                                        document.close()
+                                })
+                }
+        });
+})();
diff --git a/static/style.css b/static/style.css
index 0d78cbd..3f1a5da 100644
--- a/static/style.css
+++ b/static/style.css
@@ -57,3 +57,7 @@ details[open] > summary:before {
 .fakelink:hover {
        text-decoration: underline;
 }
+.hover {
+        background-color: #f1f1f1;
+}
diff --git a/templates/base.html b/templates/base.html
index 3f6e97b..572e0dc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,6 +7,7 @@
                <link rel="stylesheet" href="{{ url_for('static', filename='skeleton.css') }}" type="text/css" />
                <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css" />
                <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
+                <script defer src="{{url_for('static', filename='script.js') }}"></script>
        </head>
        <body>
                <div class="container">

diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..1f88d95 --- /dev/null +++ b/static/script.js
@@ -0,0 +1,52 @@
		1	"use strict";
		2
		3	(function () {
		4	const dropZone = document.body;
		5	if (!dropZone) {
		6	return;
		7	}
		8
		9	const hoverClassName = "hover";
		10
		11	// Handle drag* events to handle style
		12	// Add the css you want when the class "hover" is present
		13	dropZone.addEventListener("dragenter", function (e) {
		14	e.preventDefault();
		15	dropZone.classList.add(hoverClassName);
		16	});
		17
		18	dropZone.addEventListener("dragover", function (e) {
		19	e.preventDefault();
		20	dropZone.classList.add(hoverClassName);
		21	});
		22
		23	dropZone.addEventListener("dragleave", function (e) {
		24	e.preventDefault();
		25	dropZone.classList.remove(hoverClassName);
		26	});
		27
		28	// This is the most important event, the event that gives access to files
		29	dropZone.addEventListener("drop", function (e) {
		30	e.preventDefault();
		31	dropZone.classList.remove(hoverClassName);
		32
		33	const files = Array.from(e.dataTransfer.files);
		34	if (files.length > 0) {
		35	const data = new FormData();
		36	for (const file of files) {
		37	data.append('file', file);
		38	}
		39
		40	fetch('/', {
		41	method: 'POST',
		42	body: data,
		43	})
		44	.then(response => response.text())
		45	.then(body => { // Yes, this is ugly
		46	document.open()
		47	document.write(body)
		48	document.close()
		49	})
		50	}
		51	});
		52	})();


diff --git a/static/style.css b/static/style.css index 0d78cbd..3f1a5da 100644 --- a/static/style.css +++ b/static/style.css
@@ -57,3 +57,7 @@ details[open] > summary:before {
57	.fakelink:hover {	57	.fakelink:hover {
58	text-decoration: underline;	58	text-decoration: underline;
59	}	59	}
		60
		61	.hover {
		62	background-color: #f1f1f1;
		63	}


diff --git a/templates/base.html b/templates/base.html index 3f6e97b..572e0dc 100644 --- a/templates/base.html +++ b/templates/base.html
@@ -7,6 +7,7 @@
7	<link rel="stylesheet" href="{{ url_for('static', filename='skeleton.css') }}" type="text/css" />	7	<link rel="stylesheet" href="{{ url_for('static', filename='skeleton.css') }}" type="text/css" />
8	<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css" />	8	<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css" />
9	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">	9	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
		10	<script defer src="{{url_for('static', filename='script.js') }}"></script>
10	</head>	11	</head>
11	<body>	12	<body>
12	<div class="container">	13	<div class="container">