Upload thumbnail required
This commit is contained in:
PascalMarchesseault
@@ -1,14 +1,14 @@
|
||||
<script setup>
|
||||
import {useClient} from '@/plugins/api.js';
|
||||
import {ref} from 'vue';
|
||||
import {v7} from 'uuid';
|
||||
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
|
||||
import { useClient } from '@/plugins/api.js';
|
||||
import { ref } from 'vue';
|
||||
import { v7 } from 'uuid';
|
||||
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
|
||||
|
||||
const client = useClient();
|
||||
const title = ref('');
|
||||
const message = ref('');
|
||||
const files = ref([]);
|
||||
const Thumbnail = ref();
|
||||
const Thumbnail = ref();
|
||||
const externalUrls = ref([]);
|
||||
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
@@ -22,61 +22,61 @@ const removeUrl = (index) => {
|
||||
};
|
||||
|
||||
async function publishPost() {
|
||||
const formData = new FormData();
|
||||
formData.append('id', v7());
|
||||
formData.append('creatorId', creatorProfileStore.creator.id);
|
||||
formData.append('title', title.value);
|
||||
formData.append('description', message.value);
|
||||
if (Thumbnail.value) {
|
||||
formData.append('thumbnail', Thumbnail.value);
|
||||
// Validation : le thumbnail est obligatoire
|
||||
if (!Thumbnail.value) {
|
||||
alert("Veuillez ajouter un thumbnail avant de publier."); // Utilisez une alerte ou une notification Vuetify
|
||||
return;
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
externalUrls.value.forEach(externalUrl => {
|
||||
formData.append('externalUrls', externalUrl);
|
||||
// Ajout des URLs externes
|
||||
externalUrls.value.forEach(url => {
|
||||
formData.append('externalUrls', url); // Les URLs sont ajoutées comme tableau
|
||||
});
|
||||
|
||||
try {
|
||||
const content = await client.post(
|
||||
`/api/contents/`,
|
||||
const response = await client.post(
|
||||
`/api/contents`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
title.value = '';
|
||||
message.value = '';
|
||||
files.value = [];
|
||||
Thumbnail.value = '';
|
||||
externalUrls.value = [];
|
||||
console.log('Content published:', response.data);
|
||||
resetForm(); // Réinitialise le formulaire après le succès
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error('Error publishing content:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const cancelPost = () => {
|
||||
const resetForm = () => {
|
||||
title.value = '';
|
||||
message.value = '';
|
||||
files.value = [];
|
||||
Thumbnail.value = null;
|
||||
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"
|
||||
class="p-2"
|
||||
label="Titre"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
clearable
|
||||
></v-text-field>
|
||||
|
||||
<v-textarea v-model="message"
|
||||
label="Écrivez votre message ici..."
|
||||
class="p-2"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
clearable
|
||||
outlined
|
||||
></v-textarea>
|
||||
<v-text-field
|
||||
v-model="title"
|
||||
label="Titre"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
clearable
|
||||
/>
|
||||
<v-textarea
|
||||
v-model="message"
|
||||
label="Message"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<!-- 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]"
|
||||
class="p-2 flex-grow-1"
|
||||
label="Url Externe"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
<v-btn icon @click="removeUrl(index)" class="ml-2">
|
||||
<v-text-field
|
||||
v-model="externalUrls[index]"
|
||||
label="URL externe"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
/>
|
||||
<v-btn icon @click="removeUrl(index)">
|
||||
<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"
|
||||
class="p-2 custom-file-input"
|
||||
variant="outlined"
|
||||
dropzone
|
||||
prepend-icon=""
|
||||
placeholder="Glissez et déposez un fichier ici ou cliquez pour sélectionner un fichier"
|
||||
></v-file-input>
|
||||
|
||||
<!-- Ajout du thumbnail -->
|
||||
<v-file-input
|
||||
v-model="Thumbnail"
|
||||
label="Thumbnail (obligatoire)"
|
||||
variant="outlined"
|
||||
dropzone
|
||||
clearable
|
||||
:rules="[value => !!value || 'Un thumbnail est obligatoire']"
|
||||
/>
|
||||
|
||||
|
||||
<v-file-input v-model="files"
|
||||
label="Glissez vos 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>
|
||||
<!-- Ajout des fichiers -->
|
||||
<v-file-input
|
||||
v-model="files"
|
||||
label="Images"
|
||||
variant="outlined"
|
||||
multiple
|
||||
dropzone
|
||||
/>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn variant="flat"
|
||||
@click="cancelPost"
|
||||
class="p-20">
|
||||
Cancel
|
||||
<v-btn
|
||||
variant="flat"
|
||||
@click="cancelPost"
|
||||
>
|
||||
Annuler
|
||||
</v-btn>
|
||||
|
||||
<v-btn variant="flat"
|
||||
color="primary"
|
||||
@click="publishPost">
|
||||
<v-btn
|
||||
variant="flat"
|
||||
color="primary"
|
||||
@click="publishPost"
|
||||
>
|
||||
Publier
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
Reference in New Issue
Block a user