Forum: Mikrocontroller und Digitale Elektronik ESP8266 Webbrowser File Upload


ESP8266 Webbrowser File Upload
von Mathias F. (savag)

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
  

  


  

    Beitrag melden Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: ESP8266 Webbrowser File Upload
  


  

    

      von
      
        Stefan F. (Gast)
      
      


      
    


    

      
    

    

    

  
  


  

  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>


  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: ESP8266 Webbrowser File Upload
  


  

    

      von
      
        Mathias F.
        (savag)
        
      
      


      
    


    

      
    

    

    

  
  


  

  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.

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: ESP8266 Webbrowser File Upload
  


  

    

      von
      
        Mathias F.
        (savag)
        
      
      


      
    


    

      
    

    

    

  
  


  

  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 :)

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: ESP8266 Webbrowser File Upload
  


  

    

      von
      
        Michael A.
        (micha54)
        
      
      


      
    


    

      
    

    

    

  
  


  

  Lesenswert?
  

  •
  
  ▲  
  

  ▼  
  		
  

  


  

      
Hallo,

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

Gruß,
Michael

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: ESP8266 Webbrowser File Upload
  


  

    

      von
      
        Mathias F.
        (savag)
        
      
      


      
    


    

      
    

    

    

  
  


  

  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>


  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: ESP8266 Webbrowser File Upload
  


  

    

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


      
    


    

      
    

    

    

  
  


  

  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

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: ESP8266 Webbrowser File Upload
  


  

    

      von
      
        Joachim S.
        (oyo)
        
      
      


      
    


    

      
    

    

    

  
  


  

  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.

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  








    

    

       Thread beobachten

      |
         Seitenaufteilung abschalten

    

        


Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.



  Bestehender Account

  


  
  

  
    

      

        
          
        
        
          
        
      

      

        
          
        
        
          
        
      

    


    
    
    





  Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!

  Mit Google-Account einloggen
  





  Noch kein Account? Hier anmelden.