#16 - Made changes according to feedback

src/components/base/confirmModal.vue

@@ -30,14 +30,14 @@
 					' ml-auto mr-2 inline-flex items-center rounded-lg px-5 py-2.5 text-center text-sm font-medium text-white focus:outline-none focus:ring-4'
 				"
 			>
-				{{ t('yesImSure') }}
+				{{ t('confirmModal.yesImSure') }}
 			</button>
 			<button
 				type="button"
 				@click.prevent="modal?.close()"
 				class="mr-auto rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-600"
 			>
-				{{ t('noCancel') }}
+				{{ t('confirmModal.noCancel') }}
 			</button>
 		</div>
 	</BaseModal>

src/components/item/Browser.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="relative h-full w-full px-4 pt-6" v-on:contextmenu.capture="openContextMenu">
 		<!-- Files & Folders -->
-		<NoFiles v-if="hasItemsLoaded && !Object.values(items).length" />
+		<NoFiles v-if="hasItemsLoaded && !Object.values(items).length" :modelValue="modelValue" />
 		<template v-else-if="items">
 			<div class="flex flex-wrap gap-3">
 				<!-- prettier-ignore-attribute -->

src/components/item/file/NoFiles.vue

@@ -27,9 +27,44 @@
 					SVG, PNG, JPG or GIF (MAX. 800x400px)
 				</p>
 			</div>
-			<input id="dropzone-file" type="file" class="hidden" />
+			<input id="dropzone-file" ref="fileInput" type="file" class="hidden" @change="uploadFiles" />
 		</label>
 	</div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { FileClass } from '@lib/items/files';
+import type { FolderType } from '@lib/items/folders';
+import { ref, type PropType } from 'vue';
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<FolderType>,
+		required: false,
+	},
+});
+
+const fileInput = ref<HTMLInputElement>();
+async function uploadFiles(e: Event) {
+	const fileInput = e.currentTarget as HTMLInputElement;
+
+	if (!fileInput.files?.length) {
+		return;
+	}
+
+	Array.from(fileInput.files).forEach(async (file) => {
+		try {
+			await FileClass.create(file, props.modelValue ?? null);
+
+			// TODO: replace waiting 1 second with websocket
+			setTimeout(async () => {
+				window.location.reload();
+
+				// TODO: Toast
+			}, 1000);
+		} catch (error) {
+			// TODO: Toast
+		}
+	});
+}
+</script>

src/lang/da.ts

@@ -99,6 +99,8 @@ export default {
 			toggleThemeMode: 'Lys / mørk tilstand',
 		},
 	},
-	yesImSure: 'Ja, jeg er sikker',
-	noCancel: 'Nej, annuller',
+	confirmModal: {
+		yesImSure: 'Ja, jeg er sikker',
+		noCancel: 'Nej, annuller',
+	},
 };

src/lang/en.ts

@@ -99,6 +99,8 @@ export default {
 			toggleThemeMode: 'Light / dark mode',
 		},
 	},
-	yesImSure: 'Yes, I am sure',
-	noCancel: 'No, cancel',
+	confirmModal: {
+		yesImSure: 'Yes, I am sure',
+		noCancel: 'No, cancel',
+	},
 };

src/lib/items/files.ts

@@ -45,9 +45,7 @@ export class FileClass extends ItemClass {
 			throw new Error(await response.text());
 		}
 
-		this.name = input.name;
-
-		return this;
+		return new FileClass(await response.json());
 	}
 
 	async delete() {