designtopack/src/components/project/ClientBrief/AddImages.vue

<template>
  <section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
    <header
      class="project-details | flex items-baseline | bg-white | rounded-2xl | p-16 | w-full"
    >
      <div class="project-details__description | flex-1">
        <h2 class="text-sm text-grey-700 | mb-8">Description du projet</h2>
        <textarea
          name="description"
          id="description"
          placeholder="Ajoutez une description générale de votre projet…"
          rows="3"
          class="border border-grey-200 | rounded-xl | p-16 | w-full"
        ></textarea>
      </div>
      <div class="project-details__filters | flex-1">
        <h2 class="text-sm text-grey-700 | mb-8">Filtrer par tags</h2>
        <div class="flex" style="gap: var(--space-8)">
          <button class="btn btn--sm btn--grey" id="all">Voir tout</button>
          <button class="btn btn--sm btn--primary">Bouchon</button>
          <button class="btn btn--sm btn--primary">Bouton Poussoir</button>
          <button class="btn btn--sm btn--primary">Coloris & Nuances</button>
          <button class="btn btn--sm btn--primary">DA Globale</button>
          <button class="btn btn--sm btn--primary">Forme & Design</button>
          <button class="btn btn--sm btn--primary">Matériaux & Textures</button>
          <button class="btn btn--sm btn--primary">Parachèvements</button>
        </div>
      </div>
    </header>
    <!-- <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"
      >
        Ajouter une ou plusieurs images
      </button>
    </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="images[]"
          :url="'/upload.json?pageUri=' + page.uri"
          @upload="onAdvancedUpload($event)"
          :multiple="true"
          accept="image/*"
          :maxFileSize="1000000"
          invalidFileSizeMessage="Fichier trop lourd"
        >
          <template #empty>
            <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 v-for="image in images" class="image">
      <span class="tag | btn btn--sm">Tag</span>
      <img :src="image" alt="" />
    </figure>
  </section>
</template>

<script setup>
import Toast from "primevue/toast";
import FileUpload from "primevue/fileupload";
import { useToast } from "primevue/usetoast";
import { usePageStore } from "../../../stores/page";
import { ref } from "vue";

const { page } = usePageStore();
const toast = useToast();

const beforeSend = (event) => {
  const formData = event.formData;
  formData.append(
    "pageUri",
    "projects/miss-dior-blooming-bouquet/client-brief"
  );
};

const images = ref([]);

const 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));
  }
};
</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>