FAQs
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

LwIP_IAP: html files?

Go to solution
LCE
Principal

‎2024-03-15 09:41 AM

Heyho,

I'm about to start writing an ethernet bootloader for the H7.

I found the F7's LwIP_IAP example, a good way to get ideas how to realize the bootloader, although I'll probably put the new bin into an external SPI flash.

As I have an http-webserver with a few pages already up and running, I will use the http method.

The example is using LwIP's "standard" fs_data.c file containing the STM32's webpage, prepared with makefsdata.

But where can I find the original html-files which served as the fs_data source ?

I don't want to learn any more html, the webserver is more or less a debugging tool, so it would be a great help if I could simply modify the original html-files to fit my purpose.

Maybe @STea or @Peter BENSCH  might help

Thanks in advance!

PS: I already checked the original F4 example on Github, no html there.

Labels:
0 Kudos
1 ACCEPTED SOLUTION

Accepted Solutions
Go to solution
Pavel A.
Evangelist III

‎2024-03-15 10:32 AM - edited ‎2024-03-15 10:42 AM

> I don't want to learn any more html, the webserver is more or less a debugging tool

Well. AI to the rescue!

Me: Dear Copilot, show me example html code for a button that starts upload of a file from web browser on a PC to the http server. How the upload of file works form the point of view of the server?

Copilot (5 seconds later): - Let’s start by creating a simple HTML button that allows users to upload files from their web browser to an HTTP server. Then I’ll explain how the file upload process works from the server’s perspective.

HTML Code for File Upload Button

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Example</title>
</head>
<body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <label for="fileInput">Choose a file:</label>
        <input type="file" id="fileInput" name="file">
        <input type="submit" value="Upload">
    </form>
</body>
</html>
AI-generated code. Review and use carefully.

 

 

 

 

In this example:

  • We create a form with an action attribute set to /upload. When the user submits the form, the browser sends a POST request to the specified server endpoint (/upload in this case).
  • The enctype="multipart/form-data" attribute ensures that the form data includes binary files (like uploaded files).
  • The <input type="file"> element allows users to select a file from their local system.
  • The name="file" attribute specifies the name of the input field that will hold the uploaded file data.
  • The <input type="submit"> button triggers the form submission.

How File Upload Works from the Server’s Perspective

  1. Client Request:

    • The user selects a file and clicks the “Upload” button.
    • The browser sends a POST request to the server with the file data attached.

  2. Server Handling:

    • The server receives the request at the specified endpoint (/upload).
    • It processes the request and extracts the uploaded file data.
    • The server may perform additional validation (e.g., file type, size) and security checks.

  3. File Storage:

    • The server saves the uploaded file to a designated location (e.g., a specific folder on the server).
    • The file can be stored on the local file system or in a cloud storage service.

  4. Response to Client:

    • The server responds to the client (browser) with a success or error message.
    • If successful, the server may provide a link to access the uploaded file.

  5. Handling on the Server:

    • The server can process the uploaded file further (e.g., resize images, extract data, save to a database).
    • It can trigger additional actions (e.g., send notifications, update records).

(end session)

That's it for the embedded server.  Example html for simple page can be found in the original LwIP examples:

https://github.com/lwip-tcpip/lwip/tree/master/src/apps/http/fs

You can instead want to be a web client and pull the update file from a simple tcp or http server or a cloud service. 

 

View solution in original post

10 REPLIES 10
Go to solution
Pavel A.
Evangelist III

‎2024-03-15 10:32 AM - edited ‎2024-03-15 10:42 AM

> I don't want to learn any more html, the webserver is more or less a debugging tool

Well. AI to the rescue!

Me: Dear Copilot, show me example html code for a button that starts upload of a file from web browser on a PC to the http server. How the upload of file works form the point of view of the server?

Copilot (5 seconds later): - Let’s start by creating a simple HTML button that allows users to upload files from their web browser to an HTTP server. Then I’ll explain how the file upload process works from the server’s perspective.

HTML Code for File Upload Button

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Example</title>
</head>
<body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <label for="fileInput">Choose a file:</label>
        <input type="file" id="fileInput" name="file">
        <input type="submit" value="Upload">
    </form>
</body>
</html>
AI-generated code. Review and use carefully.

 

 

 

 

In this example:

  • We create a form with an action attribute set to /upload. When the user submits the form, the browser sends a POST request to the specified server endpoint (/upload in this case).
  • The enctype="multipart/form-data" attribute ensures that the form data includes binary files (like uploaded files).
  • The <input type="file"> element allows users to select a file from their local system.
  • The name="file" attribute specifies the name of the input field that will hold the uploaded file data.
  • The <input type="submit"> button triggers the form submission.

How File Upload Works from the Server’s Perspective

  1. Client Request:

    • The user selects a file and clicks the “Upload” button.
    • The browser sends a POST request to the server with the file data attached.

  2. Server Handling:

    • The server receives the request at the specified endpoint (/upload).
    • It processes the request and extracts the uploaded file data.
    • The server may perform additional validation (e.g., file type, size) and security checks.

  3. File Storage:

    • The server saves the uploaded file to a designated location (e.g., a specific folder on the server).
    • The file can be stored on the local file system or in a cloud storage service.

  4. Response to Client:

    • The server responds to the client (browser) with a success or error message.
    • If successful, the server may provide a link to access the uploaded file.

  5. Handling on the Server:

    • The server can process the uploaded file further (e.g., resize images, extract data, save to a database).
    • It can trigger additional actions (e.g., send notifications, update records).

(end session)

That's it for the embedded server.  Example html for simple page can be found in the original LwIP examples:

https://github.com/lwip-tcpip/lwip/tree/master/src/apps/http/fs

You can instead want to be a web client and pull the update file from a simple tcp or http server or a cloud service. 

 

Go to solution
LCE
Principal

‎2024-03-18 12:27 AM

Thanks a lot @Pavel A. 

Interesting that only such few lines of html are needed for this.

0 Kudos
Go to solution
LCE
Principal

‎2024-03-18 08:13 AM

Anyway, it would be nice to see the original files from STM used for that, also to compare the tags:

So again, maybe @STea  or @Peter BENSCH  might help, please?

0 Kudos
Go to solution
LCE
Principal

‎2024-03-19 10:00 AM

@Pavel A. Thanks to you again, and kudos to your copilot pal! ;)

I found a POST method example from the lwIP guys on github, and now login, file upload and system reset all work via a simple additional html page and http / POST.

I had the http webserver already running, but only used GET and PUT. So it was actually not that hard to implement the POST method.

Next: saving data to external SPI flash, then check and use that data for a bootloader. Still some stuff to do...

Go to solution
HKapo.2
Associate II
In response to LCE

‎2024-07-29 02:15 AM

I am trying to do something similar.

 

Can toy please point me to POST method example in lwip

 

0 Kudos
Go to solution
LCE
Principal

‎2024-07-29 03:36 AM

Check lwip's httpd.c / h files, everything already prepared in lwip.

Then google for lwip post example, for the "post finish" and other functions.

0 Kudos
Go to solution
HHuyn.4
Associate III

‎2024-12-17 02:18 AM

Hi @LCE , I am also starting a similar project, which is updating the firmware for H7. However, there are still some issues that are quite new to me. I am using H7 as a server, and after selecting a .bin file from the computer and using POST to send the .bin file to the server, how can H7 receive the .bin file and write it to Flash? Please share your solution for reference. Thank you.

 

0 Kudos
Go to solution
LCE
Principal

‎2024-12-17 07:21 AM

:D nice try...

I'm doing this not for fun, so I can give you only a draft how I do it:

- bin file via html / POST to H7

- H7 writes each data packet immediately into external HyperRam

- H7 checks validity of completely received bin file

- H7 writes bin file to external QSPI flash

- then user can decide to jump to bootloader, or at next start

- bootloader checks QSPI flash at start if newer version in QSPI flash

- bootloader erase application flash

- bootloader writes H7 flash, page by page from QSPI flash

- bootloader compares QSPI & H7 flash

 

I expected that the source code for getting data via browser to the H7 would take me some time, but that went actually pretty quick, as lwIP and I had everything prepared.
And then came the QSPI flash, which I expected to be quick work, being about the 100th SPI flash driver I did - but the first with the H7's OCTOSPI - oh my... that took me a long time. (not using HAL)

Go to solution
HHuyn.4
Associate III
In response to LCE

‎2024-12-17 05:35 PM

Thank you so much, 

But I am confused at this step. After loading the .bin file from the PC, I use a POST HTTP request to send the .bin file to the STM.  I use the following line to capture the request:

netbuf_data(inbuf, (void**) &buf, &buflen);

Here is the buf content:

POST /index.html HTTP/1.1
Host: 192.168.2.158
Connection: keep-alive
Content-Length: 176815
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryGhYpLxBOxGv1PE1D
Accept: */*
Origin: http://192.168.2.158
Referer: http://192.168.2.158/index.html
Accept-Encoding: gzip, deflate
Accept-Language: vi-VN,vi;q=0.9,fr-FR;q=0.8,fr;q=0.7,en-US;q=0.6,en;q=0.5,zh-TW;q=0.4,zh;q=0.3

How can I receive the content of a .bin file to store it in flash?

?

0 Kudos
Top