send blob ok

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

@@ -8,7 +8,7 @@
       style="--row-gap: var(--space-8)"
     >
       <AccordionPanel
-        v-for="(image, index) in page.images"
+        v-for="(image, index) in images"
         :key="index + 1"
         :value="index"
         class="w-full | bg-white | rounded-xl | p-12 pt-8"
@@ -30,7 +30,6 @@
               rows="3"
               class="border border-grey-200 | rounded-xl | p-16 | w-full"
               v-model="image.description"
-              @input="saveDescription(image)"
             ></textarea>
           </div>
           <fieldset class="image-details__filters | flex-1">
@@ -45,7 +44,6 @@
                   :id="`${tag}-image-edit`"
                   :name="`${tag}-image-edit`"
                   :value="`${tag}`"
-                  @change="saveTags(image)"
                   v-model="image.tags"
                 />
                 <label
@@ -96,7 +94,7 @@
         </svg>
       </template>
     </Accordion>
-    <button class="btn | w-full | mt-auto">
+    <button class="btn | w-full | mt-auto" @click="addImagesToBrief()">
       Ajouter les images sélectionnées
     </button>
   </div>
@@ -108,58 +106,88 @@ import AccordionHeader from "primevue/accordionheader";
 import AccordionContent from "primevue/accordioncontent";
 import { usePageStore } from "../../../../stores/page";
 import { toPascalCase } from "../../../../helpers";
-import debounce from "lodash/debounce";
 import { storeToRefs } from "pinia";
 
+const { images } = defineProps({
+  images: Object,
+});
+
 const { page } = storeToRefs(usePageStore());
 
-function saveTags(image) {
-  const headers = {
-    method: "POST",
-    body: JSON.stringify({
-      pageUri: page.value.uri,
-      fileName: image.name,
-      properties: [
-        {
-          name: "tags",
-          value: image.tags,
-        },
-      ],
-    }),
-  };
-  fetch("/save-file.json", headers)
-    .then((res) => res.json())
-    .then((json) => {
-      console.log(json);
-    })
-    .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
-    });
-}
+// function saveTags(image) {
+//   const headers = {
+//     method: "POST",
+//     body: JSON.stringify({
+//       pageUri: page.value.uri,
+//       fileName: image.name,
+//       properties: [
+//         {
+//           name: "tags",
+//           value: image.tags,
+//         },
+//       ],
+//     }),
+//   };
+//   fetch("/save-file.json", headers)
+//     .then((res) => res.json())
+//     .then((json) => {
+//       console.log(json);
+//     })
+//     .catch((error) => {
+//       console.error("Erreur lors de la sauvegarde :", error);
+//     });
+// }
 
-const saveDescription = debounce((image) => {
-  const headers = {
-    method: "POST",
-    body: JSON.stringify({
-      pageUri: page.value.uri,
-      fileName: image.name,
-      properties: [
-        {
-          name: "description",
-          value: image.description,
-        },
-      ],
-    }),
-  };
-  fetch("/save-file.json", headers)
-    .then((res) => res.json())
-    .then((json) => {
-      console.log(json);
+// const saveDescription = debounce((image) => {
+//   const headers = {
+//     method: "POST",
+//     body: JSON.stringify({
+//       pageUri: page.value.uri,
+//       fileName: image.name,
+//       properties: [
+//         {
+//           name: "description",
+//           value: image.description,
+//         },
+//       ],
+//     }),
+//   };
+//   fetch("/save-file.json", headers)
+//     .then((res) => res.json())
+//     .then((json) => {
+//       console.log(json);
+//     })
+//     .catch((error) => {
+//       console.error("Erreur lors de la sauvegarde :", error);
+//     });
+// }, 1000);
+
+function addImagesToBrief() {
+  const formData = new FormData();
+
+  const blobPromises = images.map((item) => {
+    if (item.url.startsWith("blob:")) {
+      return fetch(item.url)
+        .then((response) => response.blob())
+        .then((blob) => {
+          formData.append("images[]", blob, item.name);
+        });
+    } else {
+      formData.append("imageUris[]", item.url);
+      return Promise.resolve();
+    }
+  });
+
+  Promise.all(blobPromises).then(() => {
+    fetch("/upload-images.json?pageUri=" + page.value.uri, {
+      method: "POST",
+      body: formData,
     })
-    .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
-    });
-}, 1000);
+      .then((res) => res.json())
+      .then((json) => console.log(json))
+      .catch((error) => console.error("Error:", error));
+  });
+}
 </script>
 
 <style>