Envoyer des images depuis l'interface vers mon serveur

Version imprimable

Bonjour,

On copain m'a préparé tous les fichiers pour faire mon serveur NodeJs et m'a présenté les bases. Je m'en débrouille pas trop mal mais la suis un peu perdu et j'ai besoin de votre aide. Vous l'avez compris je suis novice dans ce type de programmation

Mes fichiers :
Ma page HTML (avec mes fenêtres à afficher) : dico.html
ici pour charger une image avec la fonction input file

Code:

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
        <!-- ###################################################################################
                                boite de dialogue => Image
        #################################################################################### -->  
        <form action="/form" method="post" enctype="multipart/form-data" id="ImageModal" class="modal fade" role="dialog">        
          <div aria-labelledby="ImageModalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="DicoModalTitle">Image ...</h3>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="" id="MotModalContent">
                    <form class="form" id="MotForm">                        
                      </H3>
                          <input type="file" name="fil" id="imageCorrige" accept="image/png, image/jpeg" />
                          <img  class="star" id="lImage">
                      </h3>
                    </form>
                  </div>
                </div>
                <div class="modal-footer">
                  <h4>
                    <button type="button" style="float: left;" class="btnh btn-primary" id="annulerImage">Annuler</button>
                  </h4>
                  <h3>
                    <button type="button" style="float: left;" class="btnh btn-primary" id="supprimerImage">Pas d'image</button>
                  </h3>
                  <h2>
                    <button type="button" style="float: right;" class="btnh btn-primary" id="goImage">Enregistrer</button>
                  </h2>
                </div>
              </div> 
            </div>
          </div>
      </form>

Mon fichier avec le javascript dico.js

Code:

1
2
3
4
5
$("#goImage").click(function(){
        $('#CorrigeModal').modal('show');
        $('#ImageModal').modal('hide');
        alert("action demandée : enregistre l'image"); //       <----
    });

et mon fichier route.js pour le serveur

Code:

1
2
3
4
5
6
7
8
const express = require('express');
const path = require('path');
var formidable = require('formidable');  
var fs = require('fs');
//var fse = require('fs-extra');  
var app = express();
 
var routeprincipale = express.Router();

J'ai bien trouvé des codes mais ce que je n'arrive pas à faire c'est les utiliser correctement, soit j'ai des erreur de compilation soit rien ne se passe

Je voudrais copier les images dans le dossier du serveur \src\public\Dicos\img pour pouvoir les réutiliser après dans mes pages web

J'ai installé Formidable, j'ai vu rapidement un exemple mais je n'arrive pas à transposer

Merci pour votre aide

Note : mon programme peut utiliser soket.IO

09/06/2020, 20h22
Speed41

J'ai eu une illumination en buvant mon café.

Ca fonctionne

Je met les codes demain et je met résolu demain

Merci

dico.html

Code:

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
<!-- ###################################################################################
                                boite de dialogue => Image
        #################################################################################### -->  
        <form action="/image" enctype="multipart/form-data" method="post" id="ImageModal" class="modal fade" role="dialog">        
          <div aria-labelledby="ImageModalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="DicoModalTitle">Image ...</h3>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="" id="MotModalContent">
                    <form class="form" id="MotForm">                        
                      </H3>
                          <input type="file" name="fil" id="imageCorrige" accept="image/png, image/jpeg" />
                          <img  class="star" id="lImage">
                      </h3>
                    </form>
                  </div>
                </div>
                <div class="modal-footer">
                  <h4>
                    <button type="button" style="float: left;" class="btnh btn-primary" id="annulerImage">Annuler</button>
                  </h4>
                  <h3>
                    <button type="button" style="float: left;" class="btnh btn-primary" id="supprimerImage">Pas d'image</button>
                  </h3>
                  <h2>
                    <button type="submit" style="float: right;" class="btnh btn-primary" id="goImage" value="Upload">Enregistrer</button>
                  </h2>
                </div>
              </div> 
            </div>
          </div>
      </form>

Rien dans dico.js

route.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const express = require('express');
const path = require('path');
var formidable = require('formidable');  
var fs = require('fs');
//var fse = require('fs-extra');  
var app = express();
 
var routeprincipale = express.Router();
 
routeprincipale.post('/image', (req, res, next) => {
    var form = new formidable.IncomingForm();  
    form.parse(req);
    form.uploadDir = '/public/Dicos/img';
    form.on('fileBegin', function (name, file) {
        console.log(__dirname + '/public/Dicos/img/' + file.name);
        file.path = __dirname + '/public/Dicos/img/' + file.name;    
    });  
    form.on('file', function (name, file) {
        console.log('Uploaded ' + file.name);
    });
    return res.send("Ok");
});

Et ça fonctionne

Merci le café :chin: