Merge pull request #16 from bcc-code/fix/bmm-upload-fixes

Fix all kinds of bugs in BMM upload

backend/cmd/server/main.go

@@ -69,6 +69,10 @@ func NewTemporalClient(host, namespace string) (client.Client, error) {
 func main() {
 	_ = godotenv.Load()
 
+	if os.Getenv("DEBUG_AUTH_EMAIL") != "" {
+		fmt.Printf("DEBUG_AUTH_EMAIL: %s\n", os.Getenv("DEBUG_AUTH_EMAIL"))
+	}
+
 	bmmToken, err := NewBMMToken(
 		os.Getenv("BMM_AUTH0_BASE_URL"),
 		os.Getenv("BMM_CLIENT_ID"),

frontend/components/FileUploader.vue

@@ -4,56 +4,60 @@ import type { FileAndLanguage } from "~/utils/bmm";
 
 const props = defineProps<{
     endpoint: string;
-    metadata?: { [key: string]: readonly string[] };
+    files: FileAndLanguage[];
+    metadata: { [key: string]: readonly string[] };
 }>();
 
 const emit = defineEmits<{
     uploaded: [];
 }>();
 
-const selectedFile = defineModel<FileAndLanguage | null>({ required: true });
+const selectedFiles = defineModel<FileAndLanguage[]>({ required: true });
 const uploadPercentage = ref(0);
 const uploading = ref(false);
 
-watch(selectedFile, () => {
+watch(selectedFiles, () => {
     uploadPercentage.value = 0;
     uploading.value = false;
 });
 
 const abort = ref<() => void>();
 
 const uploadFile = () => {
-    if (!selectedFile.value?.file) return;
-    uploading.value = true;
+    for (const selectedFile of selectedFiles.value || []) {
 
-    const formData = new FormData();
-    formData.append("file", selectedFile.value.file);
-    formData.append("file_language", selectedFile.value.language);
-    if (props.metadata) {
-        for (const [key, values] of Object.entries(props.metadata)) {
-            for (const value of values) {
-                formData.append(key, value);
+        if (!selectedFile.file) return;
+        uploading.value = true;
+
+        const formData = new FormData();
+        formData.append("file", selectedFile.file);
+        formData.append("file_language", selectedFile.language);
+        if (props.metadata) {
+            for (const [key, values] of Object.entries(props.metadata)) {
+                for (const value of values) {
+                    formData.append(key, 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
-            emit("uploaded");
-        }
-    };
-    xhr.send(formData);
-    abort.value = () => {
-        xhr.abort();
-        uploading.value = false;
-    };
+        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
+                emit("uploaded");
+            }
+        };
+        xhr.send(formData);
+        abort.value = () => {
+            xhr.abort();
+            uploading.value = false;
+        };
+    }
 };
 </script>
 
@@ -62,7 +66,7 @@ const uploadFile = () => {
         <BccButton
             @click="uploadFile"
             v-if="!uploading"
-            :disabled="!selectedFile"
+            :disabled="selectedFiles.length < 1"
         >
             Upload
         </BccButton>

frontend/components/LanguageSelector.vue

@@ -35,7 +35,7 @@ const languageDisplay = (l: string) => {
 </script>
 
 <template>
-    <BccSelect v-model="model" :label="$t('language')">
+    <BccSelect required v-model="model" :label="$t('language')">
         <option disabled value="">{{ $t("selectAnOption") }}</option>
         <option v-for="l in bmmLanguages" :value="l">
             {{ languageDisplay(l) }}

frontend/components/SelectFile.vue

@@ -15,20 +15,39 @@ const dragLeave = () => {
 const handleDrop = (event: DragEvent) => {
     isDragOver.value = false;
     const files = event.dataTransfer?.files;
-    const file = files?.[0];
-    if (file) selectedFiles.value.push({ file, language: "nb" });
+
+    if (!files) return;
+
+    for (const file of files) {
+        if (!file.type.startsWith("audio/")) {
+            continue;
+        }
+
+        selectedFiles.value.push({ file, language: props.defaultLanguage });
+
+        if (!props.acceptMultiple) {
+            break;
+        }
+    }
 };
 
 const fileInput = ref<HTMLInputElement>(null!);
 
-const selectFile = (
-    event: Event & { target: EventTarget & HTMLInputElement },
-) => {
-    selectedFiles.value.push({
-        file: event.target?.files?.[0],
-        language: "nb",
-    });
+const selectFile = ( event: Event ) => {
+    const target = event.target as HTMLInputElement;
+    for (const file of target.files??[]) {
+        selectedFiles.value.push({
+            file: file as File,
+            language: props.defaultLanguage,
+        });
+    }
 };
+
+const props = defineProps<{
+    defaultLanguage: string;
+    acceptMultiple: boolean;
+}>();
+
 </script>
 
 <template>
@@ -46,6 +65,8 @@ const selectFile = (
             ref="fileInput"
             type="file"
             class="hidden"
+            accept="audio/*"
+            :multiple="props.acceptMultiple ?? null"
             @change="selectFile"
         />
     </div>

frontend/components/bmm/BmmSingleMetadata.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { BccButton, BccInput, BccSelect } from "@bcc-code/design-library-vue";
+import { BccAlert, BccButton, BccInput, BccSelect } from "@bcc-code/design-library-vue";
 import { BmmEnvironment, BMMPermission } from "~/src/gen/api/v1/api_pb";
 
 defineProps<{
@@ -15,12 +15,21 @@ const language = computedProperty(form, "language");
 const title = computedProperty(form, "title");
 const selectedEnvironment = computedProperty(form, "environment");
 
-defineEmits<{
+const emit = defineEmits<{
     set: [];
 }>();
+
+function checkForm() {
+    if (!trackId.value) {
+        alert("Please select a track");
+        return
+    }
+
+    emit('set')
+}
 </script>
 <template>
-    <form class="flex flex-col gap-4 p-4" @submit.prevent="$emit('set')">
+    <form class="flex flex-col gap-4 p-4" @submit.prevent="checkForm">
         <h3 class="text-lg font-bold">BMM Upload</h3>
 
         <BccSelect
@@ -45,12 +54,15 @@ defineEmits<{
             :album="albumId"
             :env="environment"
         />
-        <BccInput v-model="title" :label="$t('title')" required />
-        <LanguageSelector
-            v-model="language"
-            :languages="permissions.languages"
-            :env="environment"
-        />
-        <BccButton type="submit">{{ $t("next") }}</BccButton>
+        <div class="flex flex-col gap-2 border-2 border-slate-950 p-4">
+            <LanguageSelector
+                v-model="language"
+                :languages="permissions.languages"
+                :env="environment"
+            />
+            <BccInput v-model="title" :label="$t('title')" required />
+            <bcc-alert context="info" :icon="true">The title will be applied for the selected language only</bcc-alert>
+        </div>
+        <BccButton type="submit" >{{ $t("next") }}</BccButton>
     </form>
 </template>

frontend/pages/upload/bmm.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { BmmEnvironment } from "~/src/gen/api/v1/api_pb";
-import { BccSelect } from "@bcc-code/design-library-vue";
+import { BccInput, BccSelect } from "@bcc-code/design-library-vue";
 import type { FileAndLanguage } from "~/utils/bmm";
 
 const form = ref<BMMSingleForm>({
@@ -28,7 +28,6 @@ const metadata = computed(() => {
         language: [form.value.language],
         trackId: [form.value.trackId?.toString() ?? ""],
         environment: [form.value.environment ?? "prod"],
-        firstFile: [selectedFiles.value[0]?.file?.name ?? ""], // just for debugging
     } as { [key: string]: readonly string[] };
 });
 
@@ -51,57 +50,70 @@ watch(
 );
 
 const uploaded = ref(false);
+
+const reset = () => {
+    metadataIsSet.value = false;
+    uploaded.value = false;
+    selectedFiles.value = [];
+    form.value = {
+        title: "",
+        environment: "prod",
+    }
+}
 </script>
 
 <template>
     <div
         class="mx-auto flex min-h-screen max-w-screen-md flex-col gap-4 rounded-lg bg-stone-300 p-4 text-black"
-        v-if="me && me.bmm"
     >
-        <template v-if="me.bmm && (me.bmm.podcasts.length > 0 || me.bmm.admin)">
+        <template v-if="me && me.bmm && (me.bmm.podcasts.length > 0 || me.bmm.admin)">
             <template v-if="!uploaded">
                 <BmmSingleMetadata
                     v-model="form"
                     @set="metadataIsSet = true"
                     :permissions="me.bmm"
                     :environment="selectedEnvironment"
+                    v-if="!metadataIsSet"
                 />
-                <div
+                <div v-if="metadataIsSet"
                     class="flex flex-col gap-4 p-4 transition"
-                    :class="[
-                        {
-                            'pointer-events-none opacity-50': false,
-                        },
-                    ]"
                 >
-                    <h3 class="text-lg font-bold">Upload File</h3>
-
+                    <h1 class="text-xl font-bold">Upload files for "{{metadata.title[0]}}"</h1>
                     <div v-for="file in selectedFiles" :key="file.file.name">
-                        <BccSelect v-model="file.language">
+                        <BccSelect :class="[{
+                            'hidden': !me.bmm.admin,
+                        }]" :disabled="!me.bmm.admin" v-model="file.language" >
                             <option v-for="l in availableLanguages" :value="l">
                                 {{ l }}
                             </option>
                         </BccSelect>
-                        {{ file.file.name }}
+                        {{ file.file.name }} <button @click="selectedFiles.splice(selectedFiles.indexOf(file), 1)">
+                        <Icon :style="{color: 'red'}"name="heroicons:trash" />
+                    </button>
                     </div>
-                    <SelectFile v-model="selectedFiles" />
+
+                    <SelectFile
+                        v-if="selectedFiles.length < 1 || me.bmm.admin"
+                        v-model="selectedFiles"
+                        :default-language="metadata.language[0]"
+                        :accept-multiple="me.bmm.admin"
+                    />
+
                     <FileUploader
-                        v-for="(_, i) in selectedFiles"
-                        v-model="selectedFiles[i]"
+                        v-model="selectedFiles"
                         :endpoint="config.public.grpcUrl + '/upload'"
                         :metadata="metadata"
                         @uploaded="uploaded = true"
                     />
-                    <div>
-                        {{ selectedEnvironment }}
-                        {{ metadata }}
-                    </div>
+                    <button class="rounded bg-slate-400 p-2" @click="metadataIsSet = false">Back</button>
                 </div>
             </template>
+
             <template v-else>
                 <div class="rounded-lg bg-green-500 p-4">
                     {{ $t("uploaded") }}
                 </div>
+                <button class="rounded bg-slate-400 p-2" @click="reset">Upload more</button>
             </template>
         </template>
         <template v-else> You don't have enough permissions </template>