Bonjour tout le monde.
Voilà depuis quelque jours que j'essaaye de trouver un moyen d'uploader une image et du text en meme temps en recuperant leurs valeurs à travers javascript. Cependant bien que je recoive le texte sans soucis du coté du serveur grâce à node, je n'arrive pas à trouver un moyen d'uploader l'image en même temps.
Je me demandais donc si il y avait un moyen d'y arriver.
Merci d'avance pour vos futur réponses et voici mon code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/adminAddingNews.css">
{{>bootstrapCss}}
<title>Document</title>
</head>
<body>
{{>adminMenu}}
<div class="container">
<div class="h1 title_description text-center">Ajouter news</div>
{{!-- ADDING TITLE --}}
<div class="h3 text-center">Titre</div>
<div class="news_title input-group mb-3">
<div class="input-group-append">
<label class="h2 input-group-text" for="">Titre</label>
</div>
<input type="text" class="form-control" id="title">
</div>
{{!-- ADDING MAIN PHOTO --}}
<div class="h3 text-center">Photo principale</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="main_photo" required>
<label class="custom-file-label" for="main_photo">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
{{!-- ADDING PHOTO --}}
<div class="h3 text-center">Photo article</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="photo_article" >
<label class="custom-file-label" for="photo_article">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
{{!-- ADDING TEXT --}}
<div class="h3 text-center">article</div>
<textarea classe="w-100" id="article" row="70" style="width:100%; height:700px;"></textarea>
<inpit class="photo_article"></div>
{{!-- ADDING PARAGRAPH --}}
<div class="text-center">
<button class="btn btn-primary" id="add">Ajouter article</button>
</div>
<img src="data:image/JPG;base64," alt="" id="test">
</div>
<script src="/js/admin_adding_news.js"></script>
</body>
</html>
JS:
const title = document.getElementById('title');
const main_photo = document.getElementById('main_photo');
const photo_article = document.getElementById('photo_article');
const text = document.getElementById('article');
const validation = document.getElementById('add');
const test = document.getElementById('test');
validation.addEventListener('click', async (e) => {
console.log(main_photo.file);
const data = {
title: title.value,
main_photo: main_photo.value,
article_photo: photo_article.value,
article: text.value
}
console.log(main_photo.value.);
const result = await fetch('/admin/news',{
headers : { "content-type" : 'multipart/form-data',},
body: JSON.stringify(data),
method: 'POST'
});
});
