implement files upload

components/JoinUs/Form.vue

@@ -45,11 +45,12 @@
             :rules="[validateEmail]"
             label="Email*"
             required
+
           />
 
           <v-file-input
             id="jobApplicationResume"
-            v-model="jobApplication.resume"
+            v-model="resumeUpload"
             label="Dépôt de CV*"
             accept=".pdf, .jpeg, .png"
             required
@@ -57,7 +58,7 @@
 
           <v-file-input
             id="jobApplicationMotivationLetter"
-            v-model="jobApplication.motivationLetter"
+            v-model="motivationLetterUpload"
             label="Dépôt de lettre de motivation"
             accept=".pdf, .jpeg, .png"
           />
@@ -93,6 +94,7 @@
 import ContactRequest from "~/models/Maestro/ContactRequest";
 import { useEntityManager } from "~/composables/data/useEntityManager";
 import JobApplication from "~/models/Maestro/JobApplication";
+import FileUtils from "~/services/utils/FileUtils";
 
 const { em } = useEntityManager()
 
@@ -105,6 +107,10 @@ const emit = defineEmits(['submit'])
 //@ts-ignore
 const jobApplication: ContactRequest = reactive(em.newInstance(JobApplication))
 
+const resumeUpload = ref(null)
+
+const motivationLetterUpload = ref(null)
+
 // --- Validation ---
 const maxMessageLength = 2000
 
@@ -126,7 +132,7 @@ const validateNonEmptyMessage = (message: string | null) =>
   (!!message && message.length > 0) ||
   "Le message ne peut pas être vide";
 
-const validateMessageLength = (message: string | null) =>
+const validateMessageLength = async (message: string | null) =>
   (!!message && message.length <= maxMessageLength) ||
   "Le message ne doit pas dépasser " + maxMessageLength + " caractères";
 
@@ -141,6 +147,20 @@ const submit = async () => {
     return
   }
 
+  jobApplication.resume = (resumeUpload.value !== null && resumeUpload.value[0] !== null) ?
+    {
+      //@ts-ignore
+      'name': resumeUpload.value[0].name,
+      'content': await FileUtils.blobToBase64(resumeUpload.value[0])
+    } : null
+
+  jobApplication.motivationLetter = (motivationLetterUpload.value !== null && motivationLetterUpload.value[0] !== null) ?
+    {
+      //@ts-ignore
+      'name': motivationLetterUpload.value[0].name,
+      'content': await FileUtils.blobToBase64(motivationLetterUpload.value[0])
+    } : null
+
   await em.persist(JobApplication, jobApplication)
 
   jobApplicationSent.value = true;

components/JoinUs/Missions.vue

@@ -80,7 +80,7 @@
     <v-dialog
       v-model="dialog"
       max-width="600px"
-      persistent
+      :persistent="!jobApplicationSent"
       no-click-animation
       :retain-focus="false"
     >
@@ -154,8 +154,6 @@ const jobApplicationSent: Ref<boolean> = ref(false)
 const onFormSubmit = () => {
   jobApplicationSent.value = true
 }
-
-
 </script>
 
 <style scoped lang="scss">

services/utils/FileUtils.ts

@@ -0,0 +1,29 @@
+/**
+ * Manipulation des images
+ */
+class FileUtils {
+
+  /**
+   * Returns a blob with the given data and the image filetype
+   *
+   * @param data
+   * @param filetype
+   */
+  public static newBlob(data: string, filetype: string = 'image/jpeg'): Blob {
+    return new Blob([data as BlobPart], {type: filetype});
+  }
+
+  /**
+   * Transforme un Blob en Base64
+   * @param {Blob} blob
+   */
+  public static async blobToBase64(blob: Blob): Promise<string> {
+    return new Promise((resolve, _) => {
+      const reader = new FileReader();
+      // @ts-ignore
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  }
+}
+export default FileUtils