From a39ee908df45dc3d225aa1ceb5cb666bf123e463 Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Thu, 14 Sep 2023 20:29:54 +0200
Subject: [PATCH] =?UTF-8?q?F=C3=A5=20til=20=C3=A5=20droppe=20og=20vise=20f?=
=?UTF-8?q?ilnavn=20for=20=C3=A9n=20fil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 7 +++++--
javascript/dropFiles.js | 28 ++++++++++++++--------------
style.css | 13 +++++++++++++
3 files changed, 32 insertions(+), 16 deletions(-)
diff --git a/index.html b/index.html
index 6cb825f..7a217f0 100644
--- a/index.html
+++ b/index.html
@@ -45,8 +45,11 @@
</svg>
</div>
- <div style="margin-left: 10px; font-size: 18px;">
- <p>Hei<br>på<br>deg!<br><br>Hu<br>og<br>Hei :)</p>
+ <div style="margin-left: 10px; font-size: 18px; height: 60vh;">
+ <p id="layers"></p>
+ </div>
+ <div class="dropBox" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
+ <p>Drop files here 8)</p>
</div>
</div>
diff --git a/javascript/dropFiles.js b/javascript/dropFiles.js
index 85a1461..0e8258c 100644
--- a/javascript/dropFiles.js
+++ b/javascript/dropFiles.js
@@ -1,29 +1,29 @@
function dropHandler(event) {
- console.log("File(s) dropped");
-
- // Unngå at filene åpnes som default:
event.preventDefault();
+ event.stopPropagation();
if (event.dataTransfer.items) {
- // Bruker DataTransferItemList grensesnittet for å aksessere filen(e):
+ // Use DataTransferItemList interface to access the file(s)
[...event.dataTransfer.items].forEach((item, i) => {
- // Hvis droppet element ikke er en fil, avvis den:
- if (item.kind === "file") {
- const file = item.getAsFile();
- console.log('... file[${i}].name =${file.name}');
- }
+ // If dropped items aren't files, reject them
+ if (item.kind === "file") {
+ const file = item.getAsFile();
+ let layer = file.name;
+ document.getElementById("layers").innerHTML = layer;
+ console.log(`… file[${i}].name = ${file.name}`);
+ }
});
} else {
- // Bruk DataTransfer grensesnittet for å aksessere filen(e):
+ // Use DataTransfer interface to access the file(s)
[...event.dataTransfer.files].forEach((file, i) => {
- console.log('... file[${i}].name = ${file.name}');
+ let layer = file.name;
+ document.getElementById("layers").innerHTML = layer;
+ console.log(`… file[${i}].name = ${file.name}`);
});
}
}
function dragOverHandler(event) {
- console.log("File(s) in drop zone");
-
- // Unngå at filene åpnes som default:
event.preventDefault();
+ event.stopPropagation();
}
\ No newline at end of file
diff --git a/style.css b/style.css
index 97d753a..b1d3433 100644
--- a/style.css
+++ b/style.css
@@ -41,6 +41,19 @@
flex-direction: row;
}
+.dropBox {
+ font-family: monospace;
+ font-size: larger;
+ width: 20vw;
+ text-align: center;
+ border-color: white;
+ border-style: dotted;
+ border-width: 5px;
+ border-radius: 10px;
+ margin-left: 2vw;
+ margin-right: 2vw;
+}
+
.button {
font-family: monospace;
font-weight: bolder;
--
GitLab