Bonjour à tous, pour mon projet étudiant je dois réaliser un site web sur lequel je souhaite qu'un utilisateur puisse mettre une image de couverture sur son profil.
Cela fait plusieurs jour que je suis bloqué dessus, je peine à trouver la solution...

j'ai un fichier faisant une requête sql pour mettre à jour ma colonne image_de_couverture dans ma base de donnée, et je souhaite qu'une fois l'image stockée, la récupérée afin de l'afficher sur le profil de l'utilisateur.

voici mon fichier en question :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import query from '../../database.js';
import formidable from 'formidable';
import fs from 'fs';
 
export const pageSeller = (req, res) => {
    const id = req.params.id;
 
    query(`SELECT * FROM vendeurs WHERE seller_id = ?`,
    [id],
    (error, result) => {
        if(error) {
            console.error(`Erreur lors de l'exécution de la requête ${error}`);
            return res.status(500).json({
                error: 'Erreur serveur'
            });
        }
 
        res.render('page-vendeur.ejs', {seller : result[0]});
    })
}
 
export const submitCoverProfile = (req, res) => {
    const id = req.params.id;
    const formData = formidable();
 
    formData.parse(req, (error, fields, files) => {
        if(error) {
            console.error(`Erreur lors de la récupération de l'image de couverture`);
            return res.status(500).json({
                error: 'Erreur serveur'
            });
        }
 
        let updateType = fields.updateType.toString();
 
        if(updateType === 'cover_img') {
            //récupération du chemin temporaire depuis le champ de mon formulaire
            let coverImgPath = files.cover_img[0].filepath;
            //chemin de destination du fichier
            let coverImgNewPath = 'public/images/covers/' + files.cover_img[0].originalFilename;
            //nom du fichier
            let coverImgName = "/" + files.cover_img[0].originalFilename;
 
            fs.copyFile(coverImgPath, coverImgNewPath, (error) => {
                if(error) {
                    console.error(`Erreur lors de la copie du fichier`);
                    return res.status(500).json({
                        error: 'Erreur serveur'
                    });
                }
 
                query(`SELECT * FROM vendeurs WHERE seller_id = ?`,
                [id],
                (error, result) => {
                    if(error) {
                        console.error(`Erreur lors de l'exécution de la requête ${error}`);
                        return res.status(500).json({
                            error: 'Erreur serveur'
                        });
                    }
 
                    query(`UPDATE vendeurs SET image_de_couverture = ? WHERE seller_id = ?`,
                    [coverImgName, id],
                    (error, result) => {
                        if(error) {
                            console.error(`Erreur lors de l'exécution de la requête ${error}`);
                            return res.status(500).json({
                                error: 'Erreur serveur'
                            });
                        }
 
                        query(`SELECT seller_id, image_de_couverture FROM vendeurs WHERE seller_id = ?`,
                        [id],
                        (error, result) => {
                            if(error) {
                                console.error(`Erreur lors de l'exécution de la requête ${error}`);
                                return res.status(500).json({
                                    error: 'Erreur serveur'
                                });
                            }
                            console.log(result[0].image_de_couverture)
                            res.json({ seller : result[0]} );
                        })
                    })
                })
            })
        }
    })
}
l'image est stocké dans ma base de donnée est envoyé au format json, j'ai tout d'abord essayé en faisant un res.render(), mais je n'y parviens pas non plus :

dans ma vue ejs, j'ai mon formulaire dans lequel je passe ma donnée:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
        <form action="/update-cover/<%= seller.seller_id %>" id="form-cover" method="post" enctype="multipart/form-data">
            <div class="container-cover">
                <div class="display-input-cover">
                    <input type="hidden" name="updateType" value="cover_img">
                    <label for="inputCover" class="edit-cover-btn" aria-label="cliquez pour modifier votre image de couverture">modifier mon image de couverture</label>
                    <input type="file" name="cover_img" id="inputCover" class="inputCover" onchange="displayImgCover()" accept="image/jpeg, image/jpg, image/png">
 
                    <img src="<%= seller.image_de_couverture %>" id="coverImage" class="coverImage" hidden="true" alt="image de couverture">
 
                </div>
            </div>
        </form>

et ensuite via mon script je souhaite soumettre le formulaire, afin de mettre à jour ma base de donnée si l'utilisateur change d'image et d'afficher l'image sans rafraichir la page, tout en la conservant après un changement de page ou bien une deconnection.

J'ai tenté pas mal de chose mais je ne parviens pas à obtenir le resultat souhaité, soit j'arrive à affiché l'image mais elle ne se stock pas dans la base de donnée étant donné que la soumission ne se fait pas, ou bien je parviens à la stocké et l'affiché dans ma base de donnée, mais la page se rafraichie et je perd aussitot l'image sur la page web, j'ai essayé de mettre en dur dans la balise img le lien de mon image, mais ça me retourne une image cassé...auriez vous des suggestions/solutions de comment je pourrais le faire ? Un fetch ? Aidez moi svp