Upload thumbnail required

src/views/contents/QuickyContentEditor.vue

@@ -22,61 +22,61 @@ const removeUrl = (index) => {
 };
 
 async function publishPost() {
-  const formData = new FormData();
+  // Validation : le thumbnail est obligatoire
-  formData.append('id', v7());
+  if (!Thumbnail.value) {
-  formData.append('creatorId', creatorProfileStore.creator.id);
+    alert("Veuillez ajouter un thumbnail avant de publier."); // Utilisez une alerte ou une notification Vuetify
-  formData.append('title', title.value);
+    return;
-  formData.append('description', message.value);
-  if (Thumbnail.value) {
-    formData.append('thumbnail', Thumbnail.value); 
   }
 
+  const formData = new FormData();
+
+  formData.append('id', v7()); // UUID pour l'ID du contenu
+  formData.append('creatorId', creatorProfileStore.creator.id); // Récupère l'ID du créateur
+  formData.append('title', title.value);
+  formData.append('description', message.value);
+
+  // Ajout du thumbnail
+  formData.append('Thumbnail', Thumbnail.value);
+
+  // Ajout des fichiers
   files.value.forEach(file => {
-    formData.append('files', file);
+    formData.append('files', file); // Ajoute les fichiers au FormData
   });
 
- 
+  // Ajout des URLs externes
- 
+  externalUrls.value.forEach(url => {
- 
+    formData.append('externalUrls', url); // Les URLs sont ajoutées comme tableau
-
-
-
-  externalUrls.value.forEach(externalUrl => {
-    formData.append('externalUrls', externalUrl);
   });
 
   try {
-    const content = await client.post(
+    const response = await client.post(
-        `/api/contents/`,
+        `/api/contents`,
         formData,
         {
           headers: {
             'Content-Type': 'multipart/form-data',
-          }
+          },
-        });
+        },
+    );
 
-
+    console.log('Content published:', response.data);
-    title.value = '';
+    resetForm(); // Réinitialise le formulaire après le succès
-    message.value = '';
-    files.value = [];
-    Thumbnail.value = '';
-    externalUrls.value = [];
   } catch (error) {
-    console.error(error);
+    console.error('Error publishing content:', error);
   }
 }
 
-const cancelPost = () => {
+const resetForm = () => {
   title.value = '';
   message.value = '';
   files.value = [];
   Thumbnail.value = null;
   externalUrls.value = [];
 };
+
+const cancelPost = resetForm;
 </script>
 
-
-
 <template>
   <v-form>
     <v-card class="text-center rounded-xl w-[600px]">
@@ -85,72 +85,70 @@ const cancelPost = () => {
       </v-card-title>
 
       <v-card-text>
-        <v-text-field v-model="title"
+        <v-text-field
-                      class="p-2"
+            v-model="title"
             label="Titre"
             density="comfortable"
             variant="outlined"
-                      hide-details
             clearable
-        ></v-text-field>
+        />
-
+        <v-textarea
-        <v-textarea v-model="message"
+            v-model="message"
-                    label="Écrivez votre message ici..."
+            label="Message"
-                    class="p-2"
             density="comfortable"
             variant="outlined"
-                    hide-details
             clearable
-                    outlined
+        />
-        ></v-textarea>
 
+        <!-- Ajout des URLs externes -->
         <div v-for="(url, index) in externalUrls" :key="index" class="d-flex align-center">
-          <v-text-field v-model="externalUrls[index]"
+          <v-text-field
-                        class="p-2 flex-grow-1"
+              v-model="externalUrls[index]"
-                        label="Url Externe"
+              label="URL externe"
               density="comfortable"
               variant="outlined"
-                        hide-details
+          />
-          ></v-text-field>
+          <v-btn icon @click="removeUrl(index)">
-          <v-btn icon @click="removeUrl(index)" class="ml-2">
             <v-icon>mdi-minus</v-icon>
           </v-btn>
         </div>
-        <v-btn icon @click="addUrl" class="mt-2">
+        <v-btn icon @click="addUrl">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
-        <v-file-input v-model="Thumbnail"
+
-                      label="Glissez votre Thumbnail"
+        <!-- Ajout du thumbnail -->
-                      class="p-2 custom-file-input"
+        <v-file-input
+            v-model="Thumbnail"
+            label="Thumbnail (obligatoire)"
             variant="outlined"
             dropzone
-                      prepend-icon=""
+            clearable
-                      placeholder="Glissez et déposez un fichier ici ou cliquez pour sélectionner un fichier"
+            :rules="[value => !!value || 'Un thumbnail est obligatoire']"
-        ></v-file-input>
+        />
 
-
+        <!-- Ajout des fichiers -->
-
+        <v-file-input
-        <v-file-input v-model="files"
+            v-model="files"
-                      label="Glissez vos images"
+            label="Images"
-                      class="p-2 custom-file-input"
             variant="outlined"
             multiple
             dropzone
-                      prepend-icon=""
+        />
-                      placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
-        ></v-file-input>
       </v-card-text>
 
       <v-card-actions>
-        <v-btn variant="flat"
+        <v-btn
+            variant="flat"
             @click="cancelPost"
-               class="p-20">
+        >
-          Cancel
+          Annuler
         </v-btn>
 
-        <v-btn variant="flat"
+        <v-btn
+            variant="flat"
             color="primary"
-               @click="publishPost">
+            @click="publishPost"
+        >
           Publier
         </v-btn>
       </v-card-actions>