refactor file drop widget

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+
+import {StoredObject, StoredObjectCreated} from "../../types";
+import {encryptFile, uploadFile} from "../_components/helper";
+import {computed, ref, Ref} from "vue";
+
+interface DropFileConfig {
+    existingDoc?: StoredObjectCreated|StoredObject,
+}
+
+const props = defineProps<DropFileConfig>();
+
+const emit = defineEmits<{
+    (e: 'addDocument', stored_object: StoredObjectCreated): void,
+}>();
+
+const is_dragging: Ref<boolean> = ref(false);
+const uploading: Ref<boolean> = ref(false);
+
+const has_existing_doc = computed<boolean>(() => {
+    return props.existingDoc !== undefined && props.existingDoc !== null;
+});
+
+const onDragOver = (e: Event) => {
+    e.preventDefault();
+
+    is_dragging.value = true;
+}
+
+const onDragLeave = (e: Event) => {
+    e.preventDefault();
+
+    is_dragging.value = false;
+}
+
+const onDrop = (e: DragEvent) => {
+    console.log('on drop', e);
+    e.preventDefault();
+
+    const files = e.dataTransfer?.files;
+
+    if (null === files || undefined === files) {
+        console.error("no files transferred", e.dataTransfer);
+        return;
+    }
+    if (files.length === 0) {
+        console.error("no files given");
+        return;
+    }
+
+    handleFile(files[0])
+}
+
+const onZoneClick = (e: Event) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const input = document.createElement("input");
+    input.type = "file";
+    input.addEventListener("change", onFileChange);
+
+    input.click();
+}
+
+const onFileChange = async (event: Event): Promise<void> => {
+    const input = event.target as HTMLInputElement;
+    console.log('event triggered', input);
+
+    if (input.files && input.files[0]) {
+        console.log('file added', input.files[0]);
+        const file = input.files[0];
+        await handleFile(file);
+
+        return Promise.resolve();
+    }
+
+    throw 'No file given';
+}
+
+const handleFile = async (file: File): Promise<void> => {
+    uploading.value = true;
+    const type = file.type;
+    const buffer = await file.arrayBuffer();
+    const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
+    const filename = await uploadFile(encrypted);
+
+    console.log(iv, jsonWebKey);
+
+    const storedObject: StoredObjectCreated = {
+        filename: filename,
+        iv,
+        keyInfos: jsonWebKey,
+        type: type,
+        status: "stored_object_created",
+    }
+
+    emit('addDocument', storedObject);
+    uploading.value = false;
+}
+
+</script>
+
+<template>
+    <div class="drop-file">
+        <div v-if="!uploading" :class="{ area: true, dragging: is_dragging}" @click="onZoneClick" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
+            <p v-if="has_existing_doc">
+                <i class="fa fa-file-pdf-o" v-if="props.existingDoc?.type === 'application/pdf'"></i>
+                <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.oasis.opendocument.text'"></i>
+                <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
+                <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/msword'"></i>
+                <i class="fa fa-file-excel-o" v-else-if="props.existingDoc?.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"></i>
+                <i class="fa fa-file-excel-o" v-else-if="props.existingDoc?.type === 'application/vnd.ms-excel'"></i>
+                <i class="fa fa-file-image-o" v-else-if="props.existingDoc?.type === 'image/jpeg'"></i>
+                <i class="fa fa-file-image-o" v-else-if="props.existingDoc?.type === 'image/png'"></i>
+                <i class="fa fa-file-archive-o" v-else-if="props.existingDoc?.type === 'application/x-zip-compressed'"></i>
+                <i class="fa fa-file-code-o" v-else ></i>
+            </p>
+            <!-- todo i18n -->
+            <p v-if="has_existing_doc">Déposez un document ou cliquez ici pour remplacer le document existant</p>
+            <p v-else>Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier</p>
+        </div>
+        <div v-else class="waiting">
+            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.drop-file {
+    width: 100%;
+
+    & > .area, & > .waiting {
+        width: 100%;
+        height: 8rem;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    & > .area {
+        border: 4px dashed #ccc;
+
+        &.dragging {
+            border: 4px dashed blue;
+        }
+    }
+}
+
+div.chill-collection ul.list-entry li.entry:nth-child(2n) {
+
+}
+</style>