feat: file uploader

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+uploads

components/FileUploader.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { BccButton } from "@bcc-code/design-library-vue";
+
+const props = defineProps<{
+    endpoint: string;
+}>();
+
+const selectedFile = defineModel<File | null>({ required: true });
+const uploadPercentage = ref(0);
+
+watch(selectedFile, () => {
+    uploadPercentage.value = 0;
+});
+
+const uploadFile = () => {
+    if (!selectedFile.value) return;
+
+    const formData = new FormData();
+    formData.append("file", selectedFile.value);
+
+    const xhr = new XMLHttpRequest();
+    xhr.open("post", props.endpoint, true);
+    xhr.upload.onprogress = function (ev) {
+        // Upload progress here
+        uploadPercentage.value = Math.floor((ev.loaded / ev.total) * 1000) / 10;
+    };
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            // Uploaded
+            console.log("Uploaded");
+        }
+    };
+    xhr.send(formData);
+};
+</script>
+
+<template>
+    <div class="flex w-full flex-col gap-4">
+        <BccButton @click="uploadFile" :disabled="!selectedFile">
+            Upload
+        </BccButton>
+        <div class="flex justify-between">
+            <div class="grow">
+                <div
+                    class="flex h-8 bg-green-600"
+                    :class="
+                        uploadPercentage !== 100 ? 'rounded-lg' : 'rounded-l-lg'
+                    "
+                    :style="{ width: `${uploadPercentage}%` }"
+                ></div>
+            </div>
+            <span
+                class="m-auto bg-slate-600 px-2 py-1 font-bold text-white"
+                :class="
+                    uploadPercentage !== 100 ? 'rounded-lg' : 'rounded-r-lg'
+                "
+            >
+                {{
+                    uploadPercentage !== 100
+                        ? uploadPercentage.toFixed(1)
+                        : 100
+                }}%
+            </span>
+        </div>
+    </div>
+</template>

components/SelectFile.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { BccButton } from "@bcc-code/design-library-vue";
+
+const selectedFile = defineModel<File | null>({ required: true });
+
+const isDragOver = ref(false);
+const dragEnter = () => {
+    isDragOver.value = true;
+};
+
+const dragLeave = () => {
+    isDragOver.value = false;
+};
+
+const handleDrop = (event: DragEvent) => {
+    isDragOver.value = false;
+    const files = event.dataTransfer?.files;
+    selectedFile.value = files?.[0] ?? null;
+};
+
+const fileInput = ref<HTMLInputElement>(null!);
+
+const selectFile = (event: any) => {
+    selectedFile.value = event.target?.files[0];
+};
+</script>
+
+<template>
+    <div
+        class="bg-gray mx-auto flex h-48 w-full cursor-pointer rounded-lg border-2 bg-slate-800 text-center text-white transition hover:bg-slate-700"
+        @click="fileInput?.click()"
+        :class="[isDragOver ? 'border-green-500' : 'border-slate-700']"
+        @dragenter.prevent="dragEnter"
+        @dragover.prevent
+        @dragleave.prevent="dragLeave"
+        @drop.prevent="handleDrop"
+    >
+        <div v-if="selectedFile" class="m-auto text-center text-lg">
+            <p>{{ selectedFile.name }}</p>
+            <BccButton @click.stop="selectedFile = null" variant="secondary">
+                Clear
+            </BccButton>
+        </div>
+        <template v-else>
+            <p class="m-auto text-lg">{{ $t("dragAndDropFileHere") }}</p>
+        </template>
+        <input
+            ref="fileInput"
+            type="file"
+            class="hidden"
+            @change="selectFile"
+        />
+    </div>
+</template>

i18n.config.ts

@@ -0,0 +1,16 @@
+export default defineI18nConfig(async () => {
+    const locales = ["en", "no"];
+
+    const messages: any = {};
+
+    for (const l of locales) {
+        messages[l] = await import(`~/locales/${l}.json`);
+    }
+
+    return {
+        availableLocales: locales,
+        fallbackLocale: "en",
+        messages,
+        missingWarn: false,
+    };
+});

locales/en.json

@@ -0,0 +1,5 @@
+{
+    "dragAndDropFileHere": "Drag and drop file here or click to browse",
+    "originalTitle": "Original title",
+    "language": "Language"
+}

locales/no.json

@@ -0,0 +1 @@
+{}

nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    modules: ["nuxt-icon"],
+    modules: ["nuxt-icon", "@nuxtjs/i18n"],
     typescript: {
         shim: false,
     },
@@ -41,6 +41,7 @@ export default defineNuxtConfig({
                 authToken: "",
                 baseUrl: "",
             },
+            tempDrivePath: "",
         },
         public: {
             auth: {

package.json

@@ -11,6 +11,7 @@
     },
     "devDependencies": {
         "@auth0/auth0-vue": "^2.3.3",
+        "@nuxtjs/i18n": "^8.1.1",
         "@types/formidable": "^3.4.5",
         "autoprefixer": "^10.4.17",
         "formidable": "^3.5.1",

pages/upload/bmm.vue

@@ -0,0 +1,40 @@
+<template>
+    <div
+        class="mx-auto flex h-screen max-w-screen-md flex-col gap-4 rounded-lg bg-stone-300 p-8 text-black"
+    >
+        <form class="flex flex-col gap-4 p-4" @submit.prevent>
+            <h3 class="text-lg font-bold">BMM Upload</h3>
+            <BccInput :label="$t('originalTitle')" required />
+            <BccSelect :label="$t('language')" required>
+                <option disabled value="">Select an option...</option>
+                <option v-for="l in languages" :value="l.key">
+                    {{ l.value }}
+                </option>
+            </BccSelect>
+            <BccButton type="submit">Submit</BccButton>
+        </form>
+        <SelectFile v-model="selectedFile" />
+        <FileUploader v-model="selectedFile" endpoint="/api/files/upload/bmm" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { BccButton, BccInput, BccSelect } from "@bcc-code/design-library-vue";
+
+const selectedFile = ref<File | null>(null);
+
+const languages = [
+    {
+        key: "en",
+        value: "English",
+    },
+    {
+        key: "es",
+        value: "Spanish",
+    },
+    {
+        key: "fr",
+        value: "French",
+    },
+];
+</script>