send blob ok

src/components/project/client-brief/add-images-modal/MyImages.vue

@@ -3,8 +3,7 @@
     <FileUpload
       mode="basic"
       name="images[]"
-      :url="'/upload-images.json?pageUri=' + page.uri"
-      @upload="onAdvancedUpload($event)"
+      @change="addImages($event)"
       :auto="true"
       :multiple="true"
       accept="image/*"
@@ -12,6 +11,7 @@
       invalidFileSizeMessage="Fichier trop lourd"
       chooseLabel="Ajouter une ou plusieurs images"
       class="flex flex-col justify-center | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-xl"
+      ref="uploadBtn"
     >
       <template #chooseicon>
         <svg
@@ -41,7 +41,7 @@
         <div v-if="files.length > 0">Fichiers importés</div>
       </template>
     </FileUpload>
-    <figure v-for="image in page.images" class="image">
+    <figure v-for="image in images" class="image">
       <img :src="image.url" alt="" />
     </figure>
     <Toast />
@@ -54,29 +54,48 @@ import Toast from "primevue/toast";
 import { useToast } from "primevue/usetoast";
 import FileUpload from "primevue/fileupload";
 import { storeToRefs } from "pinia";
+import { ref } from "vue";
 
 const { page } = storeToRefs(usePageStore());
 const toast = useToast();
 
-function onAdvancedUpload(event) {
-  if (event.xhr.status === 200) {
-    toast.add({
-      severity: "success",
-      summary: "Upload réussi",
-      detail: event.xhr.response.success,
-      life: 3000,
-    });
-    const response = JSON.parse(event.xhr.response);
-    console.log(response);
-    page.value.images = response.images;
-  } else {
-    toast.add({
-      severity: "error",
-      summary: "Échec de l'upload",
-      detail: event.xhr.response.error,
-      life: 3000,
-    });
-    console.error(JSON.parse(event.xhr.response));
-  }
+const emit = defineEmits(["add-images"]);
+const uploadBtn = ref(null);
+
+const images = ref([]);
+
+function addImages(event) {
+  const newImages = uploadBtn.value.files.map((file) => {
+    return {
+      url: URL.createObjectURL(file),
+      description: "",
+      tags: [],
+      name: file.name,
+    };
+  });
+  images.value = images.value.concat(newImages);
+  emit("add-images", newImages);
 }
+
+// function onAdvancedUpload(event) {
+//   if (event.xhr.status === 200) {
+//     toast.add({
+//       severity: "success",
+//       summary: "Upload réussi",
+//       detail: event.xhr.response.success,
+//       life: 3000,
+//     });
+//     const response = JSON.parse(event.xhr.response);
+//     console.log(response);
+//     emit("add-images", response.images);
+//   } else {
+//     toast.add({
+//       severity: "error",
+//       summary: "Échec de l'upload",
+//       detail: event.xhr.response.error,
+//       life: 3000,
+//     });
+//     console.error(JSON.parse(event.xhr.response));
+//   }
+// }
 </script>