POST Verlinkung verhindern

Hallo Zusammen,

ich bräuchte mal euren Rat.

Ich habe eine Form und es ist so, dass ich auch einen Server habe wo ich ausgewählte Bilder dort speichern/hochladen kann.

Leider habe ich das Problem, dass ich jedesmal auf das Verzeichnis verlinkt werde wenn ich ein bild hochlade. Also werde ich direkt auf http://lochalhost:3000/uploadverzeichnis/irgendwas.png verlinkt. Ich würde dies gerne verhindern und die bilder nur an den server schicken.

onsubmit=return false behebt nicht das Problem. Es muss ja bestätigt werden, damit ich das bild hochladen kann.

e.preventDefault() löst es auch nicht.

ich zeige euch mal, wie die form aussieht.

<form action="/uploadverzeichnis" method="POST" enctype="multipart/form-data" ;>
        <input type="file" accept="image/*, .geojson" onchange="loadFile(event)" onchange="onFileSelected(event)" name="myImage">
            <button type="button" id="i">Upload das Ding</button></form><br>

die serverseitige umsetzung erfolgt mit multer.

Zitat von Sempervivum

Du darfst das Attribut onchange nicht mehrfach hinzu fügen. Mein Editor reklamiert das als Fehler und ein Test ergibt, dass nur das erste feuert (im Opera, anders als ich erwartet hätte).

Da Du keinen Submit-Button hast, muss die Weiterleitung irgend wo in deinem Javascript erfolgen. Poste das doch mal.

Hallo,

Die erste onchange-Methode loadfile ladet das Bild in einem Container. Da warst du mir auch sehr behilflich

var loadFile = function(event) {
    var reader = new FileReader();
    var output2 = document.getElementById('myImageContainer');
    var myEditor = document.getElementById('editor-container');
    var html = myEditor.children[0].innerHTML;
    reader.onload = function(){
    output2.src = reader.result;
    output2.style.height = "auto";
    output2.style.width = "auto";
    
    document.getElementById('i').onclick = () => {
      myFunction();
    }
    function myFunction(){
        myText();
        myDate();
      output2.innerHTML += '<img src="' + reader.result + '">';
      this.element=document.querySelector('break');
    };
    function myText(){
      output2.innerHTML += html;
    };
    function myDate(){
        var date = new Date();
      var datenow = date.toString();
    
      output2.innerHTML += datenow;
    };
    };
    reader.readAsDataURL(event.target.files[0]);
    };

In Multer habe ich noch diesen Code hier

app.post('/uploadverzeichnis', (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      res.render('index', {
        msg: err
      });
    } else {
      if (req.file === undefined) {
        res.render('index', {
          msg: 'Error: No File Selected'
        });
      } else {
        res.render('index', {
          msg: 'File Uploaded!',
          file: `uploadverzeichnis/${req.file.filename}` 
        });
      }
    }
  });
});

Zitat von Sempervivum

Kam mir gleich sehr bekannt vor, dieser Code

Leider hast Du meinen Vorschlag aus dem vorigen Thread nicht übernommen sondern bist immer noch bei diesem verbauten Code

Und aus dem Code in diesem Thread kann ich leider nicht erkennen, wodurch die Weiterleitung zu Stande kommt. Extra getestet: <button type="button" ... bewirkt bei mir keinen Submit.

ja, da ich mit meinem code bei dem vorherigen problem weiter kam, hatte ich es so belassen.

den button type hatte ich auch mal als input type submit drin stehen, und wurde auch weiterverlinkt.

ich denke das es mit der funktion loadfile wenig zu tun hat. eher mit dem verzeichnis in der form action selbst.

ich habe dir mal den input type hinzugefügt.

<form action="/uploadverzeichnis" method="POST" enctype="multipart/form-data" ;>
        <input type="file" accept="image/*, .geojson" onchange="loadFile(event)" name="myImage">
            <input type="submit" value ="Upload Button" id="i"></form><br>