chill-bundles/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue

<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>