<template>
<div style="text-align: center">

  Je suis la page pour charger un contenu<br>

  <input type="file" name="fichier" @change="onUploadFiles">

  <div class="markdown">
    <br>
    <button class="ajouterContenu" v-on:click="ajouterContenu">créer</button><br><br>
    <button class="retourArriere" v-on:click="retourArriere">revenir en arrière</button>

  </div>

</div>
</template>

<script>
import Service from "./service/Service";

export default {
  name: "ImporterFichier",
  props: {
    // l'auteur connecté
    auteur: {}
  },
  data() {
    return {
      formData: null
    }
  },
  methods: {
    /**
     * @vuese
     * permet 'd'enrengistrer' le fichier uploadé via le formulaire
     */

     onUploadFiles:  function (event) {
       this.formData = new FormData()
       this.formData.append('file', event.target.files.item(0));
    },
    /**
     * @vuese
     * Fonction pour revenir au panier
     */
    retourArriere: function () {
      // evenement pour retourner vers le volet Contenu_Base
      this.$emit("retourArriere")
    },
    /**
     * @vuese
     * Fonction permettant l'ajout du fichier en tant que contenu
     */
    ajouterContenu: function () {
      let that = this
      Service.uploaderContenuPerso(this.formData, this.auteur).then(
          function (reponse) {
            let nouveauContenu = reponse.data
            nouveauContenu.provenance = "perso"
            that.$emit("contenuAjoute", {contenu: nouveauContenu})
            that.contenuSaisi = ''
            that.retourArriere()
          }
      )
    }
  }
}
</script>

<style scoped>

button {
  align-items: center;
  width: auto;
  text-align: center;
  line-height: 1em;
}

</style>