Fix tutorial not showing

frontend/src/views/InstructionsPage.vue

@@ -1,13 +1,99 @@
 <script lang="ts" setup>
-import UploadButton from '@/components/UploadButton.vue'
 import GoodExamplePhoto from '@/assets/good-photo-example.jpg'
 import BadExamplePhoto from '@/assets/bad-photo-example.jpg'
 
-const uploadMessage = ref('')
+import { ref } from 'vue'
+import axios from 'axios'
+import { useRouter } from 'vue-router'
+
+import { useResultStore } from '@/stores/result'
+import { getNextRouteAfterResult } from '@/utils/firearms-utils/get-next-route-after-result'
+
+var loading = ref(false)
 const fileInput = ref<HTMLInputElement | null>(null)
 
-function readInstruction () {
-  fileInput.value?.click()
+const resultStore = useResultStore()
+const router = useRouter()
+
+const handledImageTypes = 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif'
+
+async function uploadImage (base64: string, fileName: string, securingTutorial: boolean) {
+  const file = await srcToFile(base64, fileName, 'image/jpeg')
+
+  const fd = new FormData()
+  fd.append('image', file, file.name)
+  fd.append('date', '' + (Date.now() / 1000)) // date.now gives in milliseconds, convert to seconds
+
+  try {
+    const { data } = await axios.post('/upload', fd)
+    resultStore.setResult({
+      typology: data.label,
+      confidence: data.confidence,
+      confidenceLevel: data.confidence_level,
+      resultText: "Type d'arme : " + data.label + ' ' + data.confidence + '%',
+      img: base64,
+      imgUrl: data.path,
+    })
+    const nextRoute = getNextRouteAfterResult({
+      securingTutorial: securingTutorial,
+      confidenceLevel: resultStore.confidenceLevel,
+      typology: resultStore.typology,
+    })
+    router.push(nextRoute)
+  } catch (error) {
+    console.log(error)
+    router.push({ name: 'ErrorPage' })
+  }
+}
+
+function resizeImage (uploadedFile: File) {
+  const MAX_SIZE = 600
+  const reader = new FileReader()
+  const image = new Image()
+  const canvas = document.createElement('canvas')
+
+  reader.readAsDataURL(uploadedFile)
+  reader.onload = (event: ProgressEvent<FileReader>) => {
+    image.src = event.target?.result as string
+  }
+  return new Promise<string>((resolve, reject) => {
+    image.onload = (e) => {
+      let width = image.width
+      let height = image.height
+      if (width > height) {
+        if (width > MAX_SIZE) {
+          height *= MAX_SIZE / width
+          width = MAX_SIZE
+        }
+      } else {
+        if (height > MAX_SIZE) {
+          width *= MAX_SIZE / height
+          height = MAX_SIZE
+        }
+      }
+      canvas.width = width
+      canvas.height = height
+      const ctx = canvas.getContext('2d')
+      ctx?.drawImage(e.target as CanvasImageSource, 0, 0, width, height)
+      resolve(ctx?.canvas.toDataURL('image/jpeg') as string)
+    }
+    image.onerror = (err) => reject(err)
+  })
+}
+
+async function srcToFile (src: string, fileName: string, mimeType: string) {
+  const res = await fetch(src)
+  const buf = await res.arrayBuffer()
+  return new File([buf], fileName, { type: mimeType })
+}
+
+function onFileSelected (event: InputEvent & { target: InputEvent['target'] & { files: File[] } }) {
+  loading.value = true
+  const uploadedFile = event.target?.files[0]
+  
+  resizeImage(uploadedFile).then((resizedBase64Image) => (
+    uploadImage(resizedBase64Image, uploadedFile.name, resultStore.securingTutorial)
+  ))
 }
 </script>
 
@@ -45,23 +131,27 @@ function readInstruction () {
   <div class="big-blank" />
   <div class="footer">
     <div
-      v-if="!uploadMessage"
+      v-if="!loading"
       class="btn-read-instruction text-center"
     >
       <div
         class="fr-col-11 fr-col-lg-6 mx-auto"
       >
-        <UploadButton
+        <input
           ref="fileInput"
-          @file-selected="uploadMessage = 'Analyse en cours'"
-        />
+          data-testid="select-file"
+          type="file"
+          style="width: 0; height: 1px"
+          :accept="handledImageTypes"
+          @change="onFileSelected($event)"
+        >
         <DsfrButton
-          class="flex justify-center"
+          class="fr-btn flex justify-center"
           data-testid="take-a-picture"
           label="Prendre la photo"
           icon="ri-camera-fill"
           :icon-right="true"
-          @click="readInstruction()"
+          @click="$refs.fileInput.click()"
         />
       </div>
     </div>
@@ -70,7 +160,7 @@ function readInstruction () {
       class="text-center bold"
     >
       <p class="loading font-bold">
-        {{ uploadMessage }}
+        Analyse en cours
       </p>
     </div>
   </div>