[SOLVED] How to download files from browser using AsyncWebServer ?

GeorgeFlorian1
Posts: 92
Joined: Thu Jan 31, 2019 2:32 pm

[SOLVED] How to download files from browser using AsyncWebServer ?

Postby GeorgeFlorian1 » Wed Jul 03, 2019 8:43 am

OS: Linux Mint 19.1
Board: ESP-32 EVB
FS: SPIFFS
WebServer: ESPAsyncWebServer

Hello !

I am trying to give the possibility to the end-user to save/export its configuration, but also upload/import saved settings.
Currently, the end-user can save it's network config in one file and other config in a second file. So I will have two (2) .txt files inside the SPIFFS image.
I know it's possible to download those .txt files from the SPI FFS and also upload files to it.

But what I am curios about if it's possible to make, write and download a file from a browser. So, the file never existed in the SPI FFS and it shouldn't really exist.

What do you think ?
Last edited by GeorgeFlorian1 on Tue Jul 09, 2019 9:00 am, edited 1 time in total.

boarchuz
Posts: 97
Joined: Tue Aug 21, 2018 5:28 am

Re: Is there a way of making a file and then download it using a web-server and a browser without touching the file-syst

Postby boarchuz » Wed Jul 03, 2019 10:09 am

https://developer.mozilla.org/en-US/doc ... isposition

I think you're using AsyncWebServer so your handler might look something like this:

Code: Select all

AsyncWebServerResponse *response = request->beginResponse(200, "text/plain", "My file contents");
response->addHeader("Content-Disposition","attachment; filename=\"file.txt\"");
request->send(response);

PeterR
Posts: 146
Joined: Mon Jun 04, 2018 2:47 pm

Re: Is there a way of making a file and then download it using a web-server and a browser without touching the file-syst

Postby PeterR » Wed Jul 03, 2019 10:15 am

Well depend what you mean.
It is possible to 'create, upload' file/data from browser the exact details depend on your back end (ESP32) and how complicated you want to get.

You could just POST a JSON text record which you create in Javascript. That would be easiest but if you must use the same back end then have a look here: https://stackoverflow.com/questions/232 ... ile-upload

Creating & saving locally: https://stackoverflow.com/questions/366 ... ugh-server

In terms of creating the file well you can do pretty much whatever you like in Javascript and HTML5. JQuery UI is easy enough to pickup but there are loads of similar. I prefer the angularjs approach.

GeorgeFlorian1
Posts: 92
Joined: Thu Jan 31, 2019 2:32 pm

Re: Is there a way of making a file and then download it using a web-server and a browser without touching the file-syst

Postby GeorgeFlorian1 » Tue Jul 09, 2019 8:48 am

After some digging I managed to make a download method:

Code: Select all

    if (request->hasParam("filename", true)) { // Check for files: <input name="filename" />
      if (request->hasArg("download")) { // Download file: <button name="download"></button>
        Serial.println("Download Filename: " + request->arg("filename"));
        AsyncWebServerResponse *response = request->beginResponse(SPIFFS, request->arg("filename"), String(), true);
        response->addHeader("Server", "ESP Async Web Server");
        request->send(response);
        return;
      } else if(request->hasArg("delete")) { // Delete file
        if (SPIFFS.remove(request->getParam("filename", true)->value())) {
          logOutput((String)request->getParam("filename", true)->value().c_str() + " was deleted !");
        } else {
          logOutput("Could not delete file. Try again !");
        }
        request->redirect("/files");
      }
    }

Who is online

Users browsing this forum: Google [Bot] and 20 guests