client brief pdf - upload : add file to field without uploading it if it already exist

public/content/home/home.txt

@@ -22,4 +22,4 @@ Uuid: 6yh1yt2Sk45Y2sOl
 
 ----
 
-Clientbriefimages: - file://ihuGLrw5vll0R4j2
+Clientbriefpdf: home/927346290_au-commencement-du-college-chloe-avait-donc-fait-la-connaissance-dun-garcon.-il-etait-plus-vieux.pdf

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/2527557525_au-commencement-du-college-chloe-avait-donc-fait-la-connaissance-dun-garcon.-il-etait-plus-vieux.pdf.txt

@@ -0,0 +1,9 @@
+Date: 2024-10-14 01:15
+
+----
+
+Uuid: xFobejliB3pkAqLr
+
+----
+
+Template: document

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

@@ -10,7 +10,7 @@ Clientbriefpdf:
 
 ----
 
-Description: description
+Description: 
 
 ----
 

public/site/config/config.php

@@ -25,6 +25,7 @@ return [
     require(__DIR__ . '/routes/save-page.php'),
     require(__DIR__ . '/routes/save-file.php'),
     require(__DIR__ . '/routes/remove-file.php'),
+    require(__DIR__ . '/routes/upload-pdf.php'),
   ],
   'hooks' => [
     'page.create:after' => require_once(__DIR__ . '/hooks/create-steps.php'),

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

@@ -0,0 +1,57 @@
+<?php
+
+return [
+  'pattern' => 'upload-pdf.json',
+  'method' => 'POST',
+  'action' => function () {    
+    $kirby = kirby();
+    $request = $kirby->request();
+
+    $files = $request->files();
+    $data = $request->data();
+
+    $upload = $files->get('file') ?? null;
+
+    $pageUri = $request->query()->get('pageUri');
+    $page = page($pageUri);
+
+    if (!$page) {
+      return [
+        'error' => 'Invalid page.',
+      ];
+    }
+
+    try {
+      $name = crc32($upload['name'] . microtime()) . '_' . $upload['name'];
+      
+      $existingFileId = $page->clientBriefPdf()->id() ?? null;
+
+      if ($existingFileId) {
+        $existingFile = $kirby->file($existingFileId);
+        if ($existingFile) {
+          $existingFile->delete();
+        }
+      }
+
+      $newFile = $page->createFile([
+        'source'   => $upload['tmp_name'],
+        'filename' => $name,
+        'template' => 'document',
+        'content'  => [
+            'date' => date('Y-m-d h:i')
+        ]
+      ]);
+
+      $newPage = $page->update([
+        "clientBriefPdf" => $newFile->id()
+      ]);
+
+      return $newPage->toArray();
+
+    } catch (Exception $e) {
+      return [
+        'error' => $e->getMessage(),
+      ];
+    }
+  }
+];

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

@@ -17,34 +17,7 @@
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
+          <!-- SVG content -->
-            d="M92.8571 46.4292H64.2857C62.3133 46.4292 60.7143 48.0282 60.7143 50.0006V92.8577C60.7143 94.8302 62.3133 96.4292 64.2857 96.4292H92.8571C94.8296 96.4292 96.4286 94.8302 96.4286 92.8577V50.0006C96.4286 48.0282 94.8296 46.4292 92.8571 46.4292Z"
-            stroke="currentColor"
-            stroke-width="5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M92.8571 3.57202H64.2857C62.3133 3.57202 60.7143 5.171 60.7143 7.14345V21.5006C60.7143 23.473 62.3133 25.072 64.2857 25.072H92.8571C94.8296 25.072 96.4286 23.473 96.4286 21.5006V7.14345C96.4286 5.171 94.8296 3.57202 92.8571 3.57202Z"
-            stroke="currentColor"
-            stroke-width="5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M35.7143 3.57202H7.14284C5.17039 3.57202 3.57141 5.171 3.57141 7.14345V50.0006C3.57141 51.973 5.17039 53.572 7.14284 53.572H35.7143C37.6867 53.572 39.2857 51.973 39.2857 50.0006V7.14345C39.2857 5.171 37.6867 3.57202 35.7143 3.57202Z"
-            stroke="currentColor"
-            stroke-width="5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M35.7143 74.9291H7.14284C5.17039 74.9291 3.57141 76.5281 3.57141 78.5005V92.8577C3.57141 94.8301 5.17039 96.4291 7.14284 96.4291H35.7143C37.6867 96.4291 39.2857 94.8301 39.2857 92.8577V78.5005C39.2857 76.5281 37.6867 74.9291 35.7143 74.9291Z"
-            stroke="currentColor"
-            stroke-width="5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
         </svg>
         <h2 class="font-serif text-lg">Créer via la plateforme</h2>
         <p class="text-sm text-grey-700">
@@ -52,34 +25,15 @@
           plateforme afin de créer votre brief.
         </p>
       </div>
-      <div
+
-        @click="emit('update:step', 'PdfViewer')"
+      <input
-        class="card card--cta | flex-1 | h-full"
+        type="file"
-        style="--padding: var(--space-32); --row-gap: var(--space-32)"
+        @change="addPdf($event)"
-      >
+        accept="application/pdf"
-        <svg
+        ref="pdfInput"
-          aria-hidden="true"
+      />
-          width="100"
-          height="100"
-          viewBox="0 0 100 100"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.57153 75.0001V82.143C3.57153 85.9318 5.07663 89.5654 7.75572 92.2445C10.4348 94.9236 14.0684 96.4287 17.8572 96.4287H82.143C85.9318 96.4287 89.5654 94.9236 92.2445 92.2445C94.9236 89.5654 96.4287 85.9318 96.4287 82.143V75.0001M28.5715 28.5715L50.0001 3.57153M50.0001 3.57153L71.4287 28.5715M50.0001 3.57153V67.8573"
-            stroke="currentColor"
-            stroke-width="5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-        <h2 class="font-serif text-lg">Ajouter un pdf</h2>
-        <p class="text-sm text-grey-700">
-          Vous avez déjà constitué votre brief en amont et souhaitez directement
-          l’importer.
-        </p>
-      </div>
     </div>
+
     <div
       class="card | bg-grey-200 | items-center | text-center | w-full"
       style="--padding: var(--space-32); --row-gap: var(--space-16)"
@@ -87,14 +41,58 @@
       <h2 class="font-serif text-lg">Qu’est ce que le brief ?</h2>
       <p class="text-sm text-grey-700">
         Le brief est un outil créatif qui permet de définir les perspectives
-        esthétiques de votre projet. Il s’agit d’une planche d’inspiration qui
+        esthétiques de votre projet.
-        aide à affirmer l’ambiance et les influences que vous souhaitez apporter
-        à votre projet.
       </p>
     </div>
   </section>
 </template>
 
 <script setup>
+import { ref } from "vue";
+import { usePageStore } from "../../../stores/page";
+import { storeToRefs } from "pinia";
+
 const emit = defineEmits("update:step");
+
+const { page } = storeToRefs(usePageStore());
+const pdfInput = ref(null);
+
+async function addPdf(event) {
+  const file = event.target.files[0];
+
+  if (file) {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const response = await fetch(
+        "/upload-pdf.json?pageUri=" + page.value.uri,
+        {
+          method: "POST",
+          body: formData,
+        }
+      );
+
+      const result = await response.json();
+
+      if (response.ok) {
+        console.log("File uploaded successfully.");
+        page.value = result;
+        emit("update:step", "PdfViewer");
+      } else {
+        console.error("Error uploading file:", result.error);
+      }
+    } catch (error) {
+      console.error("Request failed:", error);
+    }
+  } else {
+    console.error("No file selected.");
+  }
+}
 </script>
+
+<style scoped>
+input[type="file"] {
+  display: block;
+}
+</style>

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

@@ -76,26 +76,4 @@ function addImages(event) {
   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>

src/views/ClientBrief.vue

@@ -16,6 +16,7 @@ import ModeSelection from "../components/project/client-brief/ModeSelection.vue"
 import Images from "../components/project/client-brief/Images.vue";
 import PdfViewer from "../components/project/client-brief/PdfViewer.vue";
 import { usePageStore } from "../stores/page";
+import { storeToRefs } from "pinia";
 
 const stepsComponents = {
   Intro,
@@ -24,7 +25,7 @@ const stepsComponents = {
   PdfViewer,
 };
 
-const { page } = usePageStore();
+const { page } = storeToRefs(usePageStore());
 
 const currentStep = ref(setInitialStep());
 
@@ -33,11 +34,13 @@ function changeStep(stepName) {
 }
 
 function setInitialStep() {
-  const hasPDF = page.content.clientbriefpdf.length !== 0;
+  const hasPDF = page.value.content.clientbriefpdf.length !== 0;
-  const hasImages = page.content.clientbriefimages.length !== 0;
+  const hasImages =
+    page.value.content.clientbriefimages.length !== 0 ||
+    page.value.content.description.length !== 0;
   const isEmpty = !hasPDF && !hasImages;
   if (isEmpty) return "Intro";
-  if (hasPDF) return "PDF";
+  if (hasPDF) return "PdfViewer";
   if (hasImages) return "Images";
 }
 </script>