send blob ok

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/1635712792_3ec586eada3d59adcd3e9bfb064380b495ef2306.jpg.txt

@@ -1,17 +0,0 @@
-Description: nouvelle description
-
-----
-
-Tags: matériaux & textures
-
-----
-
-Date: 2024-10-09 05:10
-
-----
-
-Uuid: vs4tgLg5q6QFeb43
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/1646360903_perfume-144546_1280.jpg.txt

@@ -1,17 +0,0 @@
-Date: 2024-10-09 05:10
-
-----
-
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Uuid: Nlkd6hX666PBBYlk
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2873716079_perfume-2721147_1280.jpg.txt

@@ -1,17 +0,0 @@
-Date: 2024-10-09 05:10
-
-----
-
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Uuid: UkFMsBPXVGpQMmXV
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/3086164329_black-1984277_1280.jpg.txt

@@ -1,17 +0,0 @@
-Date: 2024-10-09 05:10
-
-----
-
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Uuid: DknJcJ7YnG29JXUN
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/4156556841_perfume-1042715_1280.jpg.txt

@@ -1,17 +0,0 @@
-Date: 2024-10-09 05:10
-
-----
-
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Uuid: zGisP0BopebPl2ex
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/657342780_perfume-4718455_1280.jpg.txt

@@ -1,17 +0,0 @@
-Date: 2024-10-09 05:10
-
-----
-
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Uuid: 2Nt5Vv2SrGcE1iro
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/925109600_perfume-2643349_1280.jpg.txt

@@ -1,17 +0,0 @@
-Date: 2024-10-09 05:10
-
-----
-
-Description: 
-
-----
-
-Tags: 
-
-----
-
-Uuid: ih7KMM6KjNoQ2umR
-
-----
-
-Template: image

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt

@@ -10,19 +10,11 @@ Clientbriefpdf:
 
 ----
 
-Description: test
+Description: description
 
 ----
 
-Clientbriefimages:
+Clientbriefimages: 
-
-- file://DknJcJ7YnG29JXUN
-- file://Nlkd6hX666PBBYlk
-- file://zGisP0BopebPl2ex
-- file://ih7KMM6KjNoQ2umR
-- file://UkFMsBPXVGpQMmXV
-- file://2Nt5Vv2SrGcE1iro
-- file://vs4tgLg5q6QFeb43
 
 ----
 

public/site/config/routes/upload-images.php

@@ -4,14 +4,30 @@ return [
   'pattern' => 'upload-images.json',
   'method' => 'POST',
   'action' => function () {
-    if ($uploads = kirby()->request()->files()) {
+
-      $pageUri = kirby()->request()->query()->get('pageUri');
+    throw new Exception(json_encode($_FILES), 1);
-      $page = page($pageUri);      
+    
+    $kirby = kirby();
+    $request = $kirby->request();
+
+    $files = $request->files();
+    $data = $request->data();
+
+    throw new Exception(json_encode([
+        'files' => $files,
+        'data' => $data,
+    ]));
+    
+    $pageUri = $request->query()->get('pageUri');
+    $page = page($pageUri);    
+    
+    if ($uploads = $request->files()) {
 
       $allFiles = $page->clientBriefImages()->toFiles()->pluck('uuid', ',');      
       
       $alerts  = [];
-
+      throw new Exception(json_encode($uploads), 1);
+      
       foreach ($uploads->get('images') as $upload) {
         // check for duplicate
         $files      = $page->files();

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

@@ -24,9 +24,16 @@
         style="--sidebar-width: 26rem; gap: var(--gap)"
       >
         <div class="bg-grey-50 | rounded-2xl | p-8 | overflow-y">
-          <component :is="activeTab.component" :params="activeTab.params" />
+          <template v-for="tab in tabs" :key="tab.name">
+            <component
+              @add-images="addImages"
+              :is="tab.component"
+              :params="tab.params ? tab.params : {}"
+              :class="{ hidden: activeTab.name !== tab.name }"
+            />
+          </template>
         </div>
-        <ImagesEditPanel />
+        <ImagesEditPanel :images="images" />
       </div>
     </div>
   </Dialog>
@@ -39,21 +46,14 @@
     style="--row-gap: var(--space-32); --max-w: 40rem"
   >
     <p class="text-grey-700 | px-16">
-      Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi que toutes les informations qui lui sont attribuées.
+      Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi
+      que toutes les informations qui lui sont attribuées.
     </p>
     <template #footer>
-      <button
+      <button class="btn btn--secondary | flex-1" @click="deleteIsOpen = false">
-        class="btn btn--secondary | flex-1"
-        @click="deleteIsOpen = false"
-      >
         Annuler
       </button>
-      <button
+      <button class="btn | flex-1" @click="">Supprimer</button>
-        class="btn | flex-1"
-        @click=""
-      >
-        Supprimer
-      </button>
     </template>
   </Dialog>
 </template>
@@ -63,7 +63,6 @@ import Dialog from "primevue/dialog";
 import ImagesResources from "./ImagesResources.vue";
 import ImagesEditPanel from "./ImagesEditPanel.vue";
 import MyImages from "./MyImages.vue";
-import { usePageStore } from "../../../../stores/page";
 import { ref, watch } from "vue";
 
 const { isAddImagesModalOpen } = defineProps({
@@ -76,12 +75,15 @@ watch(isOpen, (newValue) => {
   emit("close");
 });
 
+const images = ref([]);
+
 const deleteIsOpen = false;
 
 const tabs = [
   {
     name: "Mes images",
     component: MyImages,
+    params: false,
   },
   {
     name: "Matériauthèque",
@@ -100,10 +102,17 @@ const tabs = [
   {
     name: "Inspirations",
     component: ImagesResources,
+    params: false,
   },
 ];
 
 const activeTab = ref(tabs[0]);
+
+function addImages(newImages) {
+  console.log(newImages);
+  images.value = images.value.concat(newImages);
+  console.log(images.value);
+}
 </script>
 
 <style>

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) {
+// function saveTags(image) {
-  const headers = {
+//   const headers = {
-    method: "POST",
+//     method: "POST",
-    body: JSON.stringify({
+//     body: JSON.stringify({
-      pageUri: page.value.uri,
+//       pageUri: page.value.uri,
-      fileName: image.name,
+//       fileName: image.name,
-      properties: [
+//       properties: [
-        {
+//         {
-          name: "tags",
+//           name: "tags",
-          value: image.tags,
+//           value: image.tags,
-        },
+//         },
-      ],
+//       ],
-    }),
+//     }),
-  };
+//   };
-  fetch("/save-file.json", headers)
+//   fetch("/save-file.json", headers)
-    .then((res) => res.json())
+//     .then((res) => res.json())
-    .then((json) => {
+//     .then((json) => {
-      console.log(json);
+//       console.log(json);
-    })
+//     })
-    .catch((error) => {
+//     .catch((error) => {
-      console.error("Erreur lors de la sauvegarde :", error);
+//       console.error("Erreur lors de la sauvegarde :", error);
-    });
+//     });
-}
+// }
 
-const saveDescription = debounce((image) => {
+// const saveDescription = debounce((image) => {
-  const headers = {
+//   const headers = {
-    method: "POST",
+//     method: "POST",
-    body: JSON.stringify({
+//     body: JSON.stringify({
-      pageUri: page.value.uri,
+//       pageUri: page.value.uri,
-      fileName: image.name,
+//       fileName: image.name,
-      properties: [
+//       properties: [
-        {
+//         {
-          name: "description",
+//           name: "description",
-          value: image.description,
+//           value: image.description,
-        },
+//         },
-      ],
+//       ],
-    }),
+//     }),
-  };
+//   };
-  fetch("/save-file.json", headers)
+//   fetch("/save-file.json", headers)
-    .then((res) => res.json())
+//     .then((res) => res.json())
-    .then((json) => {
+//     .then((json) => {
-      console.log(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) => {
+      .then((res) => res.json())
-      console.error("Erreur lors de la sauvegarde :", error);
+      .then((json) => console.log(json))
-    });
+      .catch((error) => console.error("Error:", error));
-}, 1000);
+  });
+}
 </script>
 
 <style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="auto-grid" style="--min: 15rem; --gap: 0.5rem">
-    <figure v-for="image in images" class="image">
+    <figure v-for="image in images" class="image" @click="addImage(image)">
       <img :src="image.url" alt="" />
     </figure>
   </div>
@@ -13,6 +13,7 @@ import { useApiStore } from "../../../../stores/api";
 const { params } = defineProps({
   params: Object,
 });
+const emit = defineEmits(["add-images"]);
 
 const api = useApiStore();
 const images = ref([]);
@@ -20,4 +21,8 @@ const images = ref([]);
 api
   .fetchPageData(params.targetPage)
   .then((json) => (images.value = json.images));
+
+function addImage(image) {
+  emit("add-images", [image]);
+}
 </script>

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"
+      @change="addImages($event)"
-      @upload="onAdvancedUpload($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) {
+const emit = defineEmits(["add-images"]);
-  if (event.xhr.status === 200) {
+const uploadBtn = ref(null);
-    toast.add({
+
-      severity: "success",
+const images = ref([]);
-      summary: "Upload réussi",
+
-      detail: event.xhr.response.success,
+function addImages(event) {
-      life: 3000,
+  const newImages = uploadBtn.value.files.map((file) => {
-    });
+    return {
-    const response = JSON.parse(event.xhr.response);
+      url: URL.createObjectURL(file),
-    console.log(response);
+      description: "",
-    page.value.images = response.images;
+      tags: [],
-  } else {
+      name: file.name,
-    toast.add({
+    };
-      severity: "error",
+  });
-      summary: "Échec de l'upload",
+  images.value = images.value.concat(newImages);
-      detail: event.xhr.response.error,
+  emit("add-images", newImages);
-      life: 3000,
-    });
-    console.error(JSON.parse(event.xhr.response));
-  }
 }
+
+// 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>