cancel
Showing results for 
Search instead for 
Did you mean: 

LwIP_IAP: html files?

LCE
Principal

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.

1 ACCEPTED SOLUTION

Accepted Solutions
Pavel A.
Evangelist III

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

4 REPLIES 4
Pavel A.
Evangelist III

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. 

 

LCE
Principal

Thanks a lot @Pavel A. 

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

LCE
Principal

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?

LCE
Principal

@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...