First of all great example, it has helped me a lot in implementing it in my code, but i have a confusion regarding it.
lets say a random image file or a gif (low res) is uploaded to the spiff.
So is there any way of previewing it in the webui like the "list files" option would show the image/GIF file along with the name and size, etc in the same row
something like this
https://imgur.com/a/pOX02IO
https://m.youtube.com/watch?v=OOF2qWc4IAg

Hello,

Code example with FATFS instead of SPIFFS:

https://github.com/rtek1000/esp32-asyncwebserver-fileupload-example/tree/master/example-03

Thanks.

In the example 2 I could not download the uploaded file and could not delete the uploaded file.

I traced the issue to: line 99: if(!SPIFFS.exists(filename)
the filename is defined with: const char *fileName = request->getParam("name")->value().c_str(); (line 94)

I did a rather ugly workauround with the following code:

    char *cstr1 = (char*)malloc(strlen(request->getParam("name")->value().c_str())+1);
    strcpy(cstr1,"/");
    strcat(cstr1, fileName);
    if (!SPIFFS.exists(cstr1)){
    .
    .
     request->send(SPIFFS, cstr1, "application/octet-stream");
     .
    .
    SPIFFS.remove(cstr1);
    .
    .
    free(cstr1);

In the first example the following handler generates a memory leak:

server->on("/upload", HTTP_POST, [](AsyncWebServerRequest *request) {
request->send(200);
}, handleUpload);

it should be written as

server->on("/upload", HTTP_POST, [](AsyncWebServerRequest *request) {
}, handleUpload);

Handling the response in the handleUpload function.

Otherwise request->send() clear the request while is still in use in the handleUpload() and then heap is never recovered....

Modifing to name="data[]" multiple> I cand send up to 5 or 6 files (4-5Kb each) or the connection resets.
I woud like to be able to send about 2-300 files, approx 1.5Mb total.
What is triggering the error?

First, thank you very much for this great example. It works quite well, and fiited well into my project involving modifying an old jukebox, rewiring the old buttons and finally serve audio files to a sonos box. I did not use the SPIFF but added an SD card for more storage.

I used the more fancy 2nd example and noticed the reboot button does not work at all.

In webpages.h
Line 29:
document.getElementById("statusdetails").innerHTML = "Invoking Reboot ...";

Changed into:
document.getElementById("details").innerHTML = "Invoking Reboot ...";

BTW, the conversion to SD card was easy. First I changed all SPIFFS references to SD. The only thing with SD.exists() and SD.remove() is that it wants a "/" in front of the filename, so I made some minor changes for that in webserver.ino

Thanks again, very happy with this!

Cheers,
Frank

Hi, how are you?, and thanks for this example.

I'm trying to apply your method to upload a file to the esp32 (in my case the content is JSON) but even tough the request is being done correctly to the esp32 then after receiving the request then the equivalent handleUpload in my code is not being called, I say this because none of the messages that I have in my implementation of handleUpload as you defined it here are displayed, I made this post in stackoverflow where I tell the problem.

I think all the arguments of handleUpload are automatically generated and passed to it by the .on method but I'm no sure. Can you help me with this?.

Thanks in advance ofr the help