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

<template>
  <section
    class="h-full | flex flex-col justify-center items-center | mx-auto | max-w"
    style="--max-w: 42rem; --row-gap: var(--space-32)"
  >
    <div class="flex">
      <div
        @click="emit('update:step', 'Images')"
        class="card card--cta | flex-1 | h-full"
        style="--padding: var(--space-32); --row-gap: var(--space-32)"
      >
        <svg
          aria-hidden="true"
          width="100"
          height="100"
          viewBox="0 0 100 100"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <!-- SVG content -->
        </svg>
        <h2 class="font-serif text-lg">Créer via la plateforme</h2>
        <p class="text-sm text-grey-700">
          Ajouter différents éléments tels que des images et du texte sur la
          plateforme afin de créer votre brief.
        </p>
      </div>

      <input
        type="file"
        @change="addPdf($event)"
        accept="application/pdf"
        ref="pdfInput"
      />
    </div>

    <div
      class="card | bg-grey-200 | items-center | text-center | w-full"
      style="--padding: var(--space-32); --row-gap: var(--space-16)"
    >
      <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.
      </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>