Upload image to LittleFS

Morning all.

I rarely ask for help, so I would appreciate some assistance. This has been stumping me for WEEKS and it is driving me mad! I finally capitulate and ask for help.

I do NOT want to upload an image using the IDE. I can do that no problem.

Again, general webserver programming is fine. My code uses Webserver.h and everything runs as I want it to. I have no issues programming the webserver or the other code.

My hardware uses an ILI9341 display. On boot, I load a "logo.jpg" file from \data and displays it on the screen. I uploaded the image via the IDE upload.

I am TRYING (without success) to give the user the option to upload a new image, selected from a web browser. I have the basic web page with the upload button but I cannot work out how to upload the jpg/png/bmp into the ESP32 and save it in \data as an image (which I can then pick up on boot).

I have not uploaded any code to do with the logo upload becuase everything that I have done is meaningless. The overall project is around 2k lines long and is irrelevant to this part, as this logo feature is just an addition to the code.

Can anyone help? I would realy appreciate it.

Richard

if you are willing to go for ESPAsncWebServer (assuming you are on an ESP) then you can look at my "tutorial " Uploading various byte streams to an ESP32 using ESPAsncWebServer

you'll get a byte stream, then it's just a matter of opening the file you want to dump the stream into.

Ok well i don't have a snippet for you which does exactly this, since i have only SD card functions for the ESP32 since i have never used LittleFS also not on the esp8266, where i keep using SPIFFS.
I'll give you first the ESP8266/SPIFFS example i am using for uploading from a webpage

first of all the callback which resides in setup()

  server.on("/fupload",  HTTP_POST, []() {
    server.send(200);
  }, handleUploadFile);

then the function that does the work

void handleUploadFile() {
  static File fsUploadFile;
  //static String upfil;
  HTTPUpload& uploadfile = server.upload();
  if (uploadfile.status == UPLOAD_FILE_START)  {
    String filename = uploadfile.filename;
    if (!filename.endsWith(".dsq")) {
      String redir = "/?page=file&upl=nonseqfile&name=" + filename;
      server.sendHeader("Location", redir);     // Redirect the client to the file page
      server.send(303);
      return;
    }
    if (!filename.startsWith("/")) filename = "/" + filename;
    if (SPIFFS.exists(filename)) {
      uint8_t len = filename.length();
      String fil = filename.substring(0, len - 4) + "0" + F(".dsq");
      filename = fil;
      while (SPIFFS.exists(filename)) {
        char c = filename.charAt(filename.length() - 5);
        if (c == '9') c = 'A';
        else if (c == 'Z') c = 'a';
        else if (c == 'z') {
          String refil = filename.substring(0, filename.length() - 5) + "00" + ".dsq";
          filename = refil;
          c = '0';
        }
        else c++;
        filename[filename.length() - 5] = c;
      }
    }
    fsUploadFile = SPIFFS.open(filename, "w");
    if (!fsUploadFile) {
      String redir = F("/?page=file&upl=failcreate&name=");
      redir += HashURLFilename(filename.substring(1, filename.length() - 4));
      server.sendHeader("Location", redir);     // Redirect the client to the file page
      server.send(303);
    }
    upfil = HashURLFilename(filename.substring(1, filename.length() - 4));
    
  }
  else if (uploadfile.status == UPLOAD_FILE_WRITE)  {
    if (fsUploadFile) fsUploadFile.write(uploadfile.buf, uploadfile.currentSize); // Write the received bytes to the file
  }
  else if (uploadfile.status == UPLOAD_FILE_END)  {
    if (fsUploadFile) {        // If the file was successfully created
      fsUploadFile.close();   // Close the file again
      String redir = "/?page=file&upl=success&name=" + upfil;
      server.sendHeader("Location", redir);     // Redirect the client to the file page
      server.send(303);
    }
    else {
      String redir = "/?page=file&upl=failcreate&name=" + upfil;
      server.sendHeader("Location", redir);     // Redirect the client to the file page
      server.send(303);
    }
  }
}

note redirects that actually tell my webpages what the result is of the action i took.
There is also a simple system in there that prevents duplicate file names.

Then there is the form which i use to start the process (never mind the different IP address selection)

s = F("<pre><form action='");
  if (WiFi.status() == WL_CONNECTED) {
    s += StationIP();
  }
  else {
    s += accessIP;
  }
  //s += webIP;
  s += F("/fupload' method='post' action='' enctype='multipart/form-data'>");
  s += F("<b>Upload Sequence File :  <br><br>");
  s += F("<input type='file' name='upload'></b>");
  s += F("    <input type='submit' value='  Upload  '></form></pre><br>");

Hope this helps

I have no problem changing to ESPAsyncWebServer. I am at work, so cannot checkout your link yet, but really thank you for your prompt reply.

I am really impressed with the speed and quality of the responses so far. I should ask for help faster and stop being so stubborn! Thank you.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.