fix #17

NMSCD · Nov 11, 2023 · 4d96f30 · 4d96f30
1 parent 5e8fbd0
commit 4d96f30
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/components/inputs/file-input.vue b/src/components/inputs/file-input.vue
@@ -1,25 +1,39 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { useDocumentStore } from 'src/stores/document';
+import { ref } from 'vue';
 
 defineProps<{
 	inputId: string;
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null);
 const fileName = ref('');
+const dragActive = ref(false);
 
-function updateLabel() {
-	if (fileInput.value?.files && fileInput.value.files.length > 0) {
-		fileName.value = fileInput.value.files[0].name
-	}
+const documentStore = useDocumentStore();
+
+function updateLabel(file: File) {
+	fileName.value = file.name
 }
 
+function addFile(file: File | undefined = undefined) {
+	const uploadedFile = file ?? fileInput.value?.files?.[0];
+	if (!uploadedFile) return;
+	updateLabel(uploadedFile);
+	documentStore.readFile(uploadedFile);
+}
+
+function dropFile(e: DragEvent) {
+  dragActive.value = false;
+  const uploadedFile = e.dataTransfer?.files?.[0];
+  if (uploadedFile) addFile(uploadedFile);
+}
 </script>
 
 <template>
 	<div class="file has-name is-boxed">
-		<label class="file-label">
-			<input ref="fileInput" class="file-input" type="file" :id="inputId" @change="updateLabel">
+		<label :class="{'drag-active': dragActive}" class="file-label" :for="inputId" @dragenter="dragActive = true" @dragleave="dragActive = false" @drop.prevent="dropFile" @dragover.prevent>
+			<input ref="fileInput" class="file-input" type="file" :id="inputId" @change="addFile()" />
 			<span class="file-cta">
 				<span class="file-icon">
 					<i class="material-icons file-icon-element">upload</i>
@@ -36,6 +50,17 @@ function updateLabel() {
 </template>
 
 <style scoped lang="scss">
+.file-label {
+	* {
+		pointer-events: none;
+	}
+
+	&.drag-active .file-cta,
+	&:hover .file-cta {
+		background-color: #eeeeee;
+}
+}
+
 .file-icon {
 	margin-right: 0;
 

diff --git a/src/components/inputs/file-upload.vue b/src/components/inputs/file-upload.vue
@@ -2,9 +2,6 @@
 import TextLabel from 'src/components/text-label.vue';
 import Tooltip from 'src/components/tooltip.vue';
 import FileInput from './file-input.vue';
-import { useDocumentStore } from 'src/stores/document';
-
-const documentStore = useDocumentStore();
 </script>
 
 <template>
@@ -13,7 +10,7 @@ const documentStore = useDocumentStore();
 			<text-label inputId="fileUpload">Upload REWARDTABLE.EXML</text-label>
 			<tooltip>Can be found in METADATA/REALITY/TABLES.</tooltip>
 		</div>
-		<file-input type="file" input-id="fileUpload" @change="documentStore.readFile($event.target)" />
+		<file-input type="file" input-id="fileUpload" />
 	</div>
 </template>
 

diff --git a/src/stores/document.ts b/src/stores/document.ts
@@ -2,28 +2,23 @@ import { processEXML } from 'src/logic/logic';
 import { defineStore } from 'pinia'
 
 interface DocumentState {
-	fileXmlDoc: XMLDocument | undefined;
+	fileXmlDoc: XMLDocument | null;
 }
 
 export const useDocumentStore = defineStore('document', {
 	state: (): DocumentState => {
 		return {
-			fileXmlDoc: undefined,
+			fileXmlDoc: null,
 		}
 	},
 
 	actions: {
-		readFile(element: HTMLInputElement) {
-			if (!element?.files) return;
-
-			const file = element.files[0];
-			if (!file) return;
-
+		readFile(file: File) {
 			const reader = new FileReader();
 			reader.readAsText(file);
 			reader.onload = (e) => {
 				const contents = e.target?.result;
-				this.fileXmlDoc = typeof contents === 'string' ? processEXML(contents) : undefined;
+				this.fileXmlDoc = typeof contents === 'string' ? processEXML(contents) : null;
 			}
 		},
 	}