client brief > my images : upload images working

public/content/home/home.txt

@@ -18,4 +18,8 @@ Testimage: - file://4xs4UNZhQf3jLvsG
 
 ----
 
-Uuid: 6yh1yt2Sk45Y2sOl
+Uuid: 6yh1yt2Sk45Y2sOl
+
+----
+
+Clientbriefimages: - file://ihuGLrw5vll0R4j2

public/content/home/image.png.txt

@@ -1 +1,5 @@
-Template: blocks/image
+Template: blocks/image
+
+----
+
+Uuid: vHs87W6sM0r43thr

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

@@ -0,0 +1,17 @@
+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,3 +1,7 @@
+Date: 2024-10-09 05:10
+
+----
+
 Description: 
 
 ----
@@ -6,7 +10,7 @@ Tags:
 
 ----
 
-Uuid: Ke2XIraa5jlvtOdb
+Uuid: Nlkd6hX666PBBYlk
 
 ----
 

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

@@ -1,3 +1,7 @@
+Date: 2024-10-09 05:10
+
+----
+
 Description: 
 
 ----
@@ -6,7 +10,7 @@ Tags:
 
 ----
 
-Uuid: nqa5cCGHGoWQXulB
+Uuid: UkFMsBPXVGpQMmXV
 
 ----
 

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

@@ -1,3 +1,7 @@
+Date: 2024-10-09 05:10
+
+----
+
 Description: 
 
 ----
@@ -6,7 +10,7 @@ Tags:
 
 ----
 
-Uuid: FWKdZwxSimGOaO2x
+Uuid: DknJcJ7YnG29JXUN
 
 ----
 

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -16,12 +16,13 @@ Description: test
 
 Clientbriefimages:
 
-- file://b4Ywx4ProE0Smc0Q
-- file://aCuD18YBmLHg6YaS
-- file://Ke2XIraa5jlvtOdb
-- file://QBax5c69DcENi2rt
-- file://nqa5cCGHGoWQXulB
-- file://FWKdZwxSimGOaO2x
+- file://DknJcJ7YnG29JXUN
+- file://Nlkd6hX666PBBYlk
+- file://zGisP0BopebPl2ex
+- file://ih7KMM6KjNoQ2umR
+- file://UkFMsBPXVGpQMmXV
+- file://2Nt5Vv2SrGcE1iro
+- file://vs4tgLg5q6QFeb43
 
 ----
 

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

@@ -1,13 +0,0 @@
-Description: 
-
-----
-
-Tags: forme & design, coloris & nuances
-
-----
-
-Uuid: QBax5c69DcENi2rt
-
-----
-
-Template: image

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

@@ -1,13 +0,0 @@
-Description: test de description mais
-
-----
-
-Tags: parachèvements
-
-----
-
-Uuid: b4Ywx4ProE0Smc0Q
-
-----
-
-Template: image

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

@@ -4,19 +4,19 @@ return [
   'pattern' => 'upload-images.json',
   'method' => 'POST',
   'action' => function () {
-    if ($uploads = kirby()->request()->files()) {  
+    if ($uploads = kirby()->request()->files()) {
       $pageUri = kirby()->request()->query()->get('pageUri');
-      $page = page($pageUri);
+      $page = page($pageUri);      
+
+      $allFiles = $page->clientBriefImages()->toFiles()->pluck('uuid', ',');      
       
       $alerts  = [];
-      $success = '';
-      $newFiles = [];
-      $allFiles = [];
 
       foreach ($uploads->get('images') as $upload) {
         // check for duplicate
         $files      = $page->files();
         $duplicates = $files->filter(function ($file) use ($upload) {
+          // get original safename without prefix
           $pos              = strpos($file->filename(), '_');
           $originalSafename = substr($file->filename(), $pos + 1);
 
@@ -26,9 +26,14 @@ return [
         });
 
         if ($duplicates->count() > 0) {
-          $alerts[$upload['name']] = "The file already exists";
+          $duplicate = $duplicates->first();
+          
+          if (in_array($duplicate->uuid(), $allFiles)) {
+            $allFiles[] = $duplicate->uuid();
+            $alerts[$upload['name']] = "The file already exists, added to the field.";
+          }
         }
-        
+
         try {
           $name = crc32($upload['name'].microtime()). '_' . $upload['name'];
           $newFile = $page->createFile([
@@ -49,19 +54,24 @@ return [
           $alerts[$upload['name']] = $e->getMessage();
         }
       }
-      
-      $images = array_map(function ($file) {
-        return [
-          'url' => $file->url(),
-          'uuid' => $file->uuid()
-        ];
-      }, $newFiles);
-      
+
       $newPage = $page->update([
         'clientBriefImages' => $allFiles
       ]);
 
-      return compact('images', 'alerts', 'success');
+      $images = [];
+
+      foreach ($newPage->clientBriefImages()->toFiles() as $image) {
+        $images[] = [
+          'url' => $image->url(),
+          'uuid' => (string) $image->uuid(),
+          'tags' => $image->tags()->split(),
+          'name' => $image->filename(),
+          'description' => $image->description()->value(),
+        ];
+      }
+      
+      return compact('images', 'alerts');
     }
 
     return [

src/components/project/client-brief/Images.vue

@@ -12,7 +12,7 @@
       >
         Ajouter une ou plusieurs images
       </button>
-      <template v-for="image in images" :key="image.uri">
+      <template v-for="image in page.images" :key="image.uri">
         <figure
           v-if="
             selectedTags.length === 0 ||
@@ -35,7 +35,6 @@
     <AddImagesModal
       v-if="isAddImagesModalOpen"
       :isAddImagesModalOpen="isAddImagesModalOpen"
-      :images="images"
       @close="isAddImagesModalOpen = false"
     />
     <ImageDetailsModal
@@ -53,51 +52,23 @@ import { usePageStore } from "../../../stores/page";
 import { ref } from "vue";
 import ImageDetailsModal from "./ImageDetailsModal.vue";
 import AddImagesModal from "./add-images-modal/AddImagesModal.vue";
+import { storeToRefs } from "pinia";
 
-const { page } = usePageStore();
+const { page } = storeToRefs(usePageStore());
 
 const selectedTags = ref([]);
 const imageDetails = ref(null);
-const images = ref(page.images);
 const isAddImagesModalOpen = ref(false);
 
-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);
-    images.value = 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));
-  }
-}
-
-function beforeSend(event) {
-  const formData = event.formData;
-  formData.append(
-    "pageUri",
-    "projects/miss-dior-blooming-bouquet/client-brief"
-  );
-}
-
 function changeSelectedTags(newTags) {
   selectedTags.value = newTags;
 }
 
 function removeImage(target) {
   console.log("remove", target);
-  images.value = images.value.filter((image) => image.uuid !== target.uuid);
+  page.value.images = page.value.images.filter(
+    (image) => image.uuid !== target.uuid
+  );
 }
 </script>
 

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

@@ -26,7 +26,7 @@
         <div class="bg-grey-50 | rounded-2xl | p-8 | overflow-y">
           <component :is="activeTab.component" :params="activeTab.params" />
         </div>
-        <ImagesEditPanel :images="images" />
+        <ImagesEditPanel />
       </div>
     </div>
   </Dialog>
@@ -66,9 +66,8 @@ import MyImages from "./MyImages.vue";
 import { usePageStore } from "../../../../stores/page";
 import { ref, watch } from "vue";
 
-const { isAddImagesModalOpen, images } = defineProps({
+const { isAddImagesModalOpen } = defineProps({
   isAddImagesModalOpen: Boolean,
-  images: Array,
 });
 const emit = defineEmits(["update:isAddImagesModalOpen"]);
 
@@ -83,9 +82,6 @@ const tabs = [
   {
     name: "Mes images",
     component: MyImages,
-    params: {
-      images,
-    },
   },
   {
     name: "Matériauthèque",

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 images"
+        v-for="(image, index) in page.images"
         :key="index + 1"
         :value="index"
         class="w-full | bg-white | rounded-xl | p-12 pt-8"
@@ -109,18 +109,15 @@ 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: Array,
-});
-
-const { page } = usePageStore();
+const { page } = storeToRefs(usePageStore());
 
 function saveTags(image) {
   const headers = {
     method: "POST",
     body: JSON.stringify({
-      pageUri: page.uri,
+      pageUri: page.value.uri,
       fileName: image.name,
       properties: [
         {
@@ -144,7 +141,7 @@ const saveDescription = debounce((image) => {
   const headers = {
     method: "POST",
     body: JSON.stringify({
-      pageUri: page.uri,
+      pageUri: page.value.uri,
       fileName: image.name,
       properties: [
         {

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

@@ -41,7 +41,7 @@
         <div v-if="files.length > 0">Fichiers importés</div>
       </template>
     </FileUpload>
-    <figure v-for="image in params.images" class="image">
+    <figure v-for="image in page.images" class="image">
       <img :src="image.url" alt="" />
     </figure>
     <Toast />
@@ -53,11 +53,30 @@ import { usePageStore } from "../../../../stores/page";
 import Toast from "primevue/toast";
 import { useToast } from "primevue/usetoast";
 import FileUpload from "primevue/fileupload";
+import { storeToRefs } from "pinia";
 
-const { params } = defineProps({
-  params: Object,
-});
-
-const { page } = usePageStore();
+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));
+  }
+}
 </script>