title: upload datas with a file
body: <p>I want to upload my data with an image. I've searching for similar case but I've found help only for data or only for upload but never the two together.</p>
  <p>The form is between line 3 - 36 and I call <strong>enregistreAjout</strong> method</p>
  <p>Datas like title, category are added to strapi but not the picture.</p>
  <p>Im using strapi 3 and vuejs 2</p>
  <p>What am i doing wrong ?</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;!-- ############# AJOUTER / MODIFIER ############# --&gt;
  
      &lt;!-- Si boutonAjouMod est true on affiche le bouton Ajouter --&gt;
      &lt;div class=&quot;btn btn-outline-primary&quot; v-if=&quot;boutonAjouMod&quot; v-on:click=&quot;toggleAfficheAjouter&quot;&gt;{{boutonAjouter}}&lt;/div&gt;&lt;!-- je clique on lance la méthode toggleafficheAjouMod --&gt;
  
      &lt;!-- Si afficheAjouMod est true on affiche le formulaire d'ajout --&gt;
      &lt;form action=&quot;&quot; class=&quot;mt-4&quot; v-if=&quot;afficheAjouMod&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;title&quot;&gt;Titre&lt;/label&gt;
            &lt;input v-model=&quot;titre&quot; type=&quot;text&quot; name=&quot;title&quot; class=&quot;form-control&quot; required /&gt;
        &lt;/div&gt;      
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;category&quot;&gt;Catégorie&lt;/label&gt;
            &lt;select v-model=&quot;categorie&quot; class=&quot;form-control&quot; required&gt;
            &lt;option selected&gt;----&lt;/option&gt;
            &lt;option value=&quot;job&quot;&gt;maison&lt;/option&gt;
            &lt;option value=&quot;rent&quot;&gt;appartement&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;content&quot;&gt;Commentaire&lt;/label&gt;
            &lt;textarea v-model=&quot;commentaire&quot; cols=&quot;30&quot; rows=&quot;10&quot; class=&quot;form-control&quot; required&gt;&lt;/textarea&gt;
        &lt;/div&gt;    
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;picture&quot;&gt;Image&lt;/label&gt;
            &lt;!-- v-model ne fonctionne pas il faut utiliser v-on:change --&gt;          
            &lt;input type=&quot;file&quot; id=&quot;file&quot; name=&quot;picture&quot; ref=&quot;file&quot; class=&quot;form-control&quot; v-on:change=&quot;handleFileUpload()&quot;/&gt;
            &lt;br&gt;&lt;img src=&quot;../../assets/default.jpg&quot; alt=&quot;&quot;&gt;&lt;br&gt;
        &lt;/div&gt;           
        &lt;input type=&quot;hidden&quot;&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-xs btn-primary&quot; v-on:click=&quot;enregistreAjout&quot;&gt;Enregistrer&lt;/button&gt; 
        &lt;!--&lt;div class=&quot;btn btn-xs btn-primary&quot; v-on:click=&quot;enregistreAjout&quot;&gt;Enregistrer&lt;/div&gt;--&gt;
        &lt;div class=&quot;btn btn-xs&quot; v-on:click=&quot;toggleAfficheAjouter&quot;&gt;Annuler&lt;/div&gt;
      &lt;/form&gt;
  
      &lt;!-- ############# VOIR ############# --&gt;
  
      &lt;!-- Si afficheVue est true on affiche la vue --&gt;
      &lt;div v-if=&quot;afficheVue&quot;&gt;
        &lt;h3&gt;{{titre}}&lt;/h3&gt;
        &lt;br&gt;
        &lt;label for=&quot;category&quot;&gt;Type : {{categorie}}&lt;/label&gt;
        &lt;br&gt;
        &lt;label for=&quot;content&quot;&gt;{{commentaire}}&lt;/label&gt;
        &lt;br&gt;
        &lt;label for=&quot;picture&quot;&gt;&lt;img v-bind:src=&quot;completeImgUrl(image)&quot; v-bind:alt=&quot;titre&quot;/&gt;&lt;/label&gt;
        &lt;br&gt;
        &lt;div class=&quot;btn btn-xs btn-primary mt-2&quot; v-on:click=&quot;toogleAfficheView&quot;&gt;Retour&lt;/div&gt; 
      &lt;/div&gt;   
  
      &lt;!-- ############# TABLEAU ############# --&gt;
  
      &lt;!-- Si afficheTableau est true on affiche le tableau --&gt;
      &lt;div  v-if=&quot;afficheTableau&quot;&gt;
        &lt;h1 class=&quot;text-center&quot;&gt;Annonces&lt;/h1&gt;
        &lt;!--barre de recherche--&gt;
        &lt;input type=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Rechercher par titre&quot; /&gt;
  
        &lt;!-- Affichage du tableau --&gt;
        &lt;table class=&quot;table table-bordered&quot;&gt;
          &lt;thead class=&quot;thead-light&quot;&gt;
            &lt;tr&gt;
              &lt;th scope=&quot;col&quot;&gt;Titre&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Catégorie&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Commentaire&lt;/th&gt;
              &lt;th scope=&quot;col&quot;&gt;Image&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;!-- Debut affichage tableau dynamique --&gt;
            &lt;tr v-bind:key=&quot;index&quot; v-for=&quot;(annonce,index) in toutesLesAnnonces&quot; &gt; &lt;!-- Index obligatoire pour boucle for --&gt;
              &lt;td&gt;{{annonce.title}}&lt;/td&gt;
              &lt;td&gt;{{annonce.category}}&lt;/td&gt;
              &lt;td&gt;{{annonce.content}}&lt;/td&gt;                            
              &lt;td&gt;
                &lt;img v-bind:src=&quot;completeImgUrl(annonce.picture.formats.thumbnail.url)&quot; v-bind:alt=&quot;annonce.title&quot;/&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;div class=&quot;btn btn-sm btn-outline-success mt-5 ms-3 me-2&quot; v-bind:value=annonce.id&gt;Modifier&lt;/div&gt;
                &lt;div class=&quot;btn btn-sm btn-outline-primary mt-5 me-2&quot; v-on:click=&quot;toogleAfficheView(annonce.id)&quot; v-bind:value=annonce.id&gt;Voir&lt;/div&gt;
                &lt;div class=&quot;btn btn-sm btn-outline-danger mt-5&quot; v-bind:value=annonce.id&gt;Supprimer&lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;!-- Fin affichage tableau dynamique --&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Scripts</p>
  <pre><code>&lt;script&gt;
      //valeurs globales
      import constantes from'../global/constantes' 
  
      //appel d'une fonction globale
      import {getWithExpiry} from '../global/Fonctions.js' 
  
      //gestion des API
      import axios from 'axios'
  
      export default {
          name: 'AccueilDisplay',
          data() { 
              return {
                  //token jwt
                  token: '',
  
                  //variables Cacher/Voir les balises
                  boutonAjouMod: true,
                  afficheAjouMod: false,
                  afficheVue: false,
                  afficheTableau: true,
                  boutonAjouter: 'Ajouter une annonce',
                  toutesLesAnnonces: [],
  
                  //upload image
                  file: null,
                  //isImage: false,
                  //previewImage = '',
  
                  //Voir / Ajouter
                  titre: '',
                  categorie: '',
                  commentaire: '',
                  image: ''
              }
          },
          methods: {
            toggleAfficheAjouter: function(){ //affiche / cache Ajouter
              this.afficheAjouMod=!this.afficheAjouMod //est égale au contraire de la valeur précente
              this.afficheTableau=!this.afficheTableau
            },          
            completeImgUrl: function(ImgLink){ //sert à ajouter l'url complete pour l'image
              return constantes.serveurapi + ImgLink
            },
            handleFileUpload: function(){ // recuperation de l'image
              this.file = this.$refs.file.files[0]
              //console.log(this.file)
              /*
              if (
                this.file.name.includes(&quot;.png&quot;) ||
                this.file.name.includes(&quot;.jpg&quot;)
              ) {
                this.isImage = true;
                this.previewImage = URL.createObjectURL(this.file);
              } else {
                this.isImage = false;
              }
              */
            },
            /*enregistreAjout: function(){
              //console.log(this.token)
            },*/
            async enregistreAjout() {
              try {
                  await axios.post(`${constantes.serveurapi}/${constantes.collectionAnnonces}`, {
                      title: this.titre,
                      category: this.categorie,
                      content: this.commentaire
                    }, {  
                      headers : {
                        'content-type': 'application/json',
                        'Authorization': 'Bearer ' + this.token
                      }                     
                    })                      
                    .then((envoiData) =&gt; {
                    console.log(&quot;envoiData&quot;,envoiData)  
                    console.log(&quot;files&quot;,this.file)  
                    const formData = new FormData();
                    formData.append(&quot;files&quot;,this.file)
    
                    formData.append(&quot;ref&quot;,&quot;annonce&quot;)
                    formData.append(&quot;refId&quot;,envoiData.id)// quel est l'id
                    formData.append(&quot;field&quot;,&quot;file&quot;)//quel est le champ
                    console.log(&quot;formData&quot;,formData)
                   
                    axios.post(`${constantes.serveurapi}/upload`, {
                      body: formData
                      },{
                        headers : {
                          'content-type': 'application/json',
                          'Authorization': 'Bearer ' + this.token
                        }                    
                      })  
                    })   
              } catch(e) {
                  this.error = true
              } 
          },       
            toogleAfficheView: function(id){ // affiche / cache Vue
              this.afficheTableau=!this.afficheTableau
              this.afficheVue=!this.afficheVue
              if (!this.afficheTableau) {   // si on desactive le tableau alors on affiche la vue  
                this.boutonAjouMod = !this.boutonAjouMod   // on vire le boutron ajouter      
                const chercheObjet = this.toutesLesAnnonces.find(element =&gt; element.id === id) //on recherche l'objet par son id
                this.titre = chercheObjet['title']
                this.categorie = chercheObjet['category']
                this.commentaire = chercheObjet['content']
                this.image = chercheObjet['picture']['formats']['thumbnail']['url']              
              } else {
                this.boutonAjouMod = !this.boutonAjouMod //sinon on affiche le tableau et on remet le bouton ajouter
                this.titre = '' //on remet à vide
                this.categorie = ''
                this.commentaire = ''
                this.image = ''              
              }
            }
          },
          created() { // partie affichage du tableau lors création de l'affichage
            const getuser = getWithExpiry(&quot;user&quot;)
            this.token = JSON.parse(getuser).jwt
            axios.get(`${constantes.serveurapi}/${constantes.collectionAnnonces}` , { 
                headers : {
                    'content-type': 'application/json',
                    'Authorization': 'Bearer ' + this.token
                }
            })
            .then(reponse =&gt; {
              //console.log(reponse.data)
              for (const annonce of reponse.data) {
                this.toutesLesAnnonces.push(annonce)
              }
            })
            .catch(err=&gt;{
               console.log(err)
            })
          }
      }
  
  &lt;/script&gt;
  </code></pre>
  <p>So far I've tried this :</p>
  <pre><code>  async enregistreAjout() {
      try {
          await axios.post(`${constantes.serveurapi}/${constantes.collectionAnnonces}`, {
              title: this.titre,
              category: this.categorie,
              content: this.commentaire
            }, {  
              headers : {
                'content-type': 'application/json',
                'Authorization': 'Bearer ' + this.token
              }                     
            })
            .then((response) =&gt; {
              console.log(&quot;response&quot;,response) 
              console.log(&quot;files&quot;,this.file)  
              const formData = new FormData();
              formData.append(&quot;files&quot;,this.file)  
              formData.append(&quot;ref&quot;,&quot;annonce&quot;)
              formData.append(&quot;refId&quot;,response.data.id)// quel est l'id
              formData.append(&quot;field&quot;,&quot;picture&quot;)//quel est le champ
              console.log(&quot;formData&quot;,formData)                 
              return axios.post(`${constantes.serveurapi}/upload`, {
                body: formData,
                },{
                  headers : {
                    'Authorization': 'Bearer ' + this.token
                  }                    
                })  
              }) 
        } catch(error) {
            console.log(error)
        }
    }
  </code></pre>
  <p>And I get an error 400 bad request. It's really hard to resolve this.</p>