Git-Mirrors/mat2-web
1
0
Fork 0
mirror of https://0xacab.org/jvoisin/mat2-web.git synced 2025-05-14 12:12:33 -04:00
Code Issues Projects Releases Packages Wiki Activity

Implement drag'n'drop support

Browse source
This commit is contained in:
jvoisin 2019-02-23 13:07:41 +01:00
parent f436da0539
commit 32f2411400
3 changed files with 57 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

52
static/script.js Normal file
View file

@ -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()
})
}
});
})();

4
static/style.css
View file

@ -57,3 +57,7 @@ details[open] > summary:before {
.fakelink:hover { .fakelink:hover {
text-decoration: underline; text-decoration: underline;
} }
.hover {
background-color: #f1f1f1;
}

1
templates/base.html
View file

@ -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='skeleton.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ url_for('static', filename='style.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') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
<script defer src="{{url_for('static', filename='script.js') }}"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">