Forum: Mikrocontroller und Digitale Elektronik ESP8266 Webbrowser File Upload


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Mathias F. (savag)


Bewertung
0 lesenswert
nicht lesenswert
Hallo Leute,
ich verwende den ESP8266 als Webserver. Kompaliert wird alles mit 
Nodemcu LUA.

Ich habe ein eigentlich simples Problem aber irgendwie komm ich nicht 
dahinter. Ich möchte eine Website machen die einfach nur einen "FILE 
UPLOAD" Button hat. im Browser wird dann ein *.hex File zum ESP8266 
übertragen. Das ganze soll per AJAX funktionieren.

Das Problem im Detail:
In der Website arbeite ich mit Javascript und dem "FileReader".
1
<!DOCTYPE HTML>
2
<html lang="en">
3
<head>
4
     <meta charset="UTF-8" />
5
     <title>Firmware Upload</title>
6
     </head>
7
<body>  
8
     <input type="file" id="fileInput">
9
     <button onclick="handleFile(); return false;">Upload</button>
10
</body>
11
<script language="JavaScript">
12
13
  var data;  //Globale Variable, Daten zur weiteren Verarbeitung
14
  var fileInput = document.getElementById('fileInput');
15
  var filePath = fileInput.value;
16
  var file = fileInput.files[0];
17
  function handleFile() {    
18
    var allowedExtensions =/(\.hex)$/i;
19
    var reader = new FileReader();  
20
    if(allowedExtensions.exec(filePath)){  
21
      reader.onload = function(e) {
22
      data = reader.result;  
23
      console.log(data); //Inhalt Data noch da
24
            }
25
    }
26
    else {
27
            alert("File not supported!");
28
    }  
29
    reader.readAsText(file);
30
    console.log(data); //Hier sind keine Daten mehr vorhanden
31
  }  
32
</script>  
33
</html>

Ich bekomme meine Daten nicht aus der Funktion heraus. Hat jemand eine 
Idee?

: Bearbeitet durch User
von Stefan ⛄ F. (stefanus)


Bewertung
0 lesenswert
nicht lesenswert
> Ich bekomme meine Daten nicht aus der Funktion heraus

Was genau bedeutet das?

Normalerweise sieht eine entsprechendes Formular so aus:
1
<form method="post" enctype="multipart/form-data">
2
  <input name="datei" type="file" size="50" accept="text/*"> 
3
  <button>Senden</button>
4
</form>

: Bearbeitet durch User
von Mathias F. (savag)


Bewertung
0 lesenswert
nicht lesenswert
Ich habe zwei Consolenausgaben gemacht die auf die Globale Variable 
"data" zugreifen.

1) console.log(data); //Inhalt Data noch da

2) console.log(data); //Hier sind keine Daten mehr vorhanden

Wie ich schon in den Kommentaren geschrieben habe ist die Globale 
Variable "data" plötzlich ohne Inhalt obwohl ich diese an einer anderen 
Stelle mit Inhalt ausgebe (Also innerhalb der funktion)
1
reader.onload = function(e) {
2
      data = reader.result;  
3
      console.log(data); //Inhalt Data noch da
4
}

Stefan U. schrieb:
> Normalerweise sieht eine entsprechendes Formular so aus:<form
> method="post" enctype="multipart/form-data">
>   <input name="datei" type="file" size="50" accept="text/*">
>   <button>Senden</button>
> </form>

Hiermit hatte ich es zuvor versucht. Bei dem ESP gab es zwar eine 
Reaktion in Form dass der Anfragen-Header geschickt wurde jedoch wurde 
kein Inhalt der im Browser ausgewählten Datei gesendet.

von Mathias F. (savag)


Bewertung
0 lesenswert
nicht lesenswert
Update:

Unglaublich, aber ich hab es hinbekommen :)

Das Geheimniss ist:
Ich hatte den befehl
1
data = reader.result;
verwendet um den Inhalt meiner Datei in die Globale Variablr "data" zu 
schreiben. Dieser scheint dazu ungeeignet!

Ersetzt man das ganze gegen
1
data = e.target.result;
funktioniert es und ich kann mit dem Inhalt Arbeiten :)

von Michael A. (micha54)


Bewertung
0 lesenswert
nicht lesenswert
Hallo,

sieht so aus, als ob die variable data lokal in der Funktion e ein 2. 
Mal existiert.

Gruß,
Michael

von Mathias F. (savag)


Bewertung
0 lesenswert
nicht lesenswert
Für alle die das gleiche Problem haben sollten.
Hier mein minimal beispiel.
Zum testen eine:
1)  *.txt anlegen und irgendwas eintragen um die Datei zu füllen
2)  Datei in *.hex umbenennen (wegen dem Regular expression regel)
3)  über den button "Browse" im Browser dann die Datei Laden
4)  Auf Upload wird die Datei verarbeitet und es wird der Wert angezeigt
5)  Extern drücken -> nun sieht man dass der Inhalt der Datei in einer 
externen Funktion existiert.
1
<!DOCTYPE HTML>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>Firmware Upload</title>
6
  </head>
7
  <body>
8
    
9
    
10
    <input type="file" id="fileInput">
11
    
12
    <button onclick="upload_data(); return false;">Upload</button>
13
    <button onclick="extern(); return false;">extern</button>
14
    
15
    
16
  </body>
17
  
18
  <script language="JavaScript">
19
20
  var data;
21
    function handleFile() {
22
      var fileInput = document.getElementById('fileInput');
23
      var filePath = fileInput.value;
24
      var file = fileInput.files[0];    
25
      var allowedExtensions =/(\.hex)$/i;
26
      var reader = new FileReader();  
27
      
28
      if(allowedExtensions.exec(filePath)){  
29
        reader.onload = function(evt) {
30
          data = evt.target.result;
31
          alert("innerhalb " + data);
32
        }
33
34
        reader.readAsText(file);
35
36
      }
37
      else {
38
        alert("File not supported!");
39
      }
40
    }
41
    
42
    function upload_data(){
43
      handleFile();
44
    }
45
    
46
    function extern(){
47
    alert("EXTERN " + data);
48
    }
49
    
50
    
51
  </script>
52
  
53
</html>

von Frank L. (Firma: Flk Consulting UG) (flk)


Bewertung
1 lesenswert
nicht lesenswert
Hallo,

Dein Ursprungsproblem war ein anderes. Die Funktion
1
function(e) {
2
      data = reader.result;  
3
      console.log(data);

läuft quasi asynchron ab. Sie wird ausgelöst vom 
reader.readAsText(file);

D.h. zum Zeitpunkt, an dem Du
1
      reader.readAsText(file);
2
==>   console.log(data); //Hier sind keine Daten mehr vorhanden

Dein console.log(Data) aufrufst, sind die Daten noch gar nicht da.

Da bin ich auch schon das ein oder andere drauf reingefallen.

Gruß
Frank

von Joachim S. (oyo)


Bewertung
0 lesenswert
nicht lesenswert
Frank L. schrieb:
> Hallo,
>
> Dein Ursprungsproblem war ein anderes. Die Funktion
> läuft quasi asynchron ab. Sie wird ausgelöst vom
> reader.readAsText(file);
>
> D.h. zum Zeitpunkt, an dem Du
> Dein console.log(Data) aufrufst, sind die Daten noch gar nicht da.

So sehe ich das auch. Dementsprechend war auch die ursprüngliche 
Schlussfolgerung:
1
1) console.log(data); //Inhalt Data noch da
2
[...]
3
2) console.log(data); //Hier sind keine Daten mehr vorhanden
letztlich genau falsch herum.

@savag
Genau aus solchen Gründen macht es imho Sinn, bei derartigen 
Debug-Ausgaben nicht einfach nur
1
console.log(data);
zu schreiben, sondern in jeder einzelnen Debug-Ausgabe auch noch eine 
Art ID auszugeben, durch die man sofort erkennen kann, um welche 
Debug-Ausgabe es sich genau handelt. Also z.B.
1
console.log('#1', data);
2
[...]
3
console.log('#2', data);
Hättest Du das gemacht, wärest Du vermutlich viel schneller auf die 
Ursache des Problems gestossen.

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.