client brief - fil(s) upload working

public/site/config/config.php

@@ -21,6 +21,7 @@ return [
   'routes' => [
     require(__DIR__ . '/routes/logout.php'),
     require(__DIR__ . '/routes/toggle-favorite.php'),
+    require(__DIR__ . '/routes/upload.php')
   ],
   'hooks' => [
     'page.create:after' => require_once(__DIR__ . '/hooks/create-steps.php'),

public/site/config/routes/upload.php

@@ -0,0 +1,53 @@
+<?php
+
+return [
+  'pattern' => 'upload.json',
+  'method' => 'POST',
+  'action' => function () {
+    if ($uploads = kirby()->request()->files()) {  
+      $pageUri = kirby()->request()->query()->get('pageUri');
+      $page = page($pageUri);
+      
+      $alerts  = [];
+      $success = '';
+      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);
+
+          return $originalSafename === F::safeName($upload['name']) &&
+                  $file->mime() === $upload['type'] &&
+                  $file->size() === $upload['size'];
+        });
+
+        if ($duplicates->count() > 0) {
+          $alerts[$upload['name']] = "The file already exists";
+          continue;
+        }
+        
+        try {
+          $name = crc32($upload['name'].microtime()). '_' . $upload['name'];
+          $file = $page->createFile([
+            'source'   => $upload['tmp_name'],
+            'filename' => $name,
+            'template' => 'default',
+            'content' => [
+                'date' => date('Y-m-d h:m')
+            ]
+          ]);
+          $success = 'Your file upload was successful';
+        } catch (Exception $e) {
+          $alerts[$upload['name']] = $e->getMessage();
+        }
+      }
+      return compact('alerts', 'success');
+    }
+
+    return [
+      'error' => 'Aucun fichier reçu.',
+    ];
+  }
+];

src/components/project/ClientBrief/AddImages.vue

@@ -37,24 +37,38 @@
     </div> -->
     <div class="h-full | masonry">
       <button
+        data-icon="upload"
         class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
       >
         <FileUpload
-          name="demo[]"
-          url="/api/upload"
+          name="images[]"
+          :url="'/upload.json?pageUri=' + page.uri"
           @upload="onAdvancedUpload($event)"
           :multiple="true"
           accept="image/*"
           :maxFileSize="1000000"
+          invalidFileSizeMessage="Fichier trop lourd"
         >
           <template #empty>
-            <span>Drag and drop files to here to upload.</span>
+            <span class="empty-message"
+              >Glissez-déposez vos fichiers ici pour les ajouter.</span
+            >
+          </template>
+          <template
+            #content="{
+              files,
+              uploadedFiles,
+              removeUploadedFileCallback,
+              removeFileCallback,
+            }"
+          >
+            <div v-if="files.length > 0">Fichiers importés</div>
           </template>
         </FileUpload>
       </button>
       <Toast />
     </div>
-    <figure class="image">
+    <!-- <figure class="image">
       <span class="tag | btn btn--sm">Tag</span>
       <img
         src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
@@ -95,7 +109,7 @@
         src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
         alt=""
       />
-    </figure>
+    </figure> -->
   </section>
 </template>
 
@@ -103,15 +117,52 @@
 import Toast from "primevue/toast";
 import FileUpload from "primevue/fileupload";
 import { useToast } from "primevue/usetoast";
+import { usePageStore } from "../../../stores/page";
 
+const { page } = usePageStore();
 const toast = useToast();
 
-const onAdvancedUpload = () => {
-  toast.add({
-    severity: "info",
-    summary: "Success",
-    detail: "File Uploaded",
-    life: 3000,
-  });
+const beforeSend = (event) => {
+  const formData = event.formData;
+  formData.append(
+    "pageUri",
+    "projects/miss-dior-blooming-bouquet/client-brief"
+  );
+};
+
+const onAdvancedUpload = (event) => {
+  if (event.xhr.status === 200) {
+    toast.add({
+      severity: "success",
+      summary: "Upload réussi",
+      detail: event.xhr.response.success,
+      life: 3000,
+    });
+    console.log(JSON.parse(event.xhr.response));
+  } 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>
+<style>
+button[data-icon="upload"] {
+  padding: 6.875rem 4.875rem;
+}
+input[type="file"] {
+  display: none;
+}
+/* button[aria-label="Choose"],
+button[aria-label="Upload"] {
+  display: none;
+} */
+
+.empty-message {
+  margin-top: 1rem;
+}
+</style>

src/views/ClientBrief.vue

@@ -17,7 +17,7 @@ const stepsComponents = {
   AddImages,
 };
 
-const currentStep = ref("Intro");
+const currentStep = ref("AddImages");
 
 function changeStep(stepName) {
   currentStep.value = stepName;

src/views/Project.vue

@@ -185,10 +185,6 @@ function setStepStatus(stepName) {
   right: calc(-0.75rem);
 }
 
-button[data-icon="upload"] {
-  padding: 6.875rem 4.875rem;
-}
-
 /* Masonry */
 .masonry > * {
   margin-bottom: var(--space-16);