client brief - fil(s) upload working

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);