How to create menu "ESP32 Sketch Data Upload"

Hello, I am creating an Analog Data Input application using the ESP32 Web Server, where I will upload several HTML, CSS, and JavaScript files located in the data folder along with the Main.ino file.

I need the facility in the Tools > ESP32 Sketch Data Upload menu. I have followed the procedure to make the "ESP32 Sketch Data Upload" menu appear, but it always fails. I even tried installing it on Arduino IDE versions 2.04, 2.10, and 2.34. None of them worked. Why is that? Is there something wrong with my laptop?

Hi @yudilubis.

Please provide a link to the procedure you are following. That will give us the information we need to most effectively assist you.

Here are some links to install the INSTALL ESP32 FILESYSTEM UPLOADER IN ARDUINO IDE :

  1. Install ESP32 Filesystem Uploader in Arduino IDE - SPIFFS
  2. Install ESP32 Filesystem Uploader in Arduino IDE | Random Nerd Tutorials
  3. Install ESP32 Filesystem Uploader in Arduino IDE

I just found the link below, and I have tried it as well. I successfully uploaded the test_example.txt file :

but when tested with a sketch to open and read it, the file is empty. Here the skectch to open and read test_example.txt :

/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/

#include "SPIFFS.h"

void setup() {
Serial.begin(115200);

if(!SPIFFS.begin(true)){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}

//File file = SPIFFS.open("/script.js");
//File file = SPIFFS.open("/test_example.txt");
File file = SPIFFS.open("/test_example");

if(!file){
Serial.println("Failed to open file for reading");
return;
}

Serial.println("File Content:");
while(file.available()){
Serial.write(file.read());
}
file.close();
}

void loop() { }

Please help me, I have been studying the ESP32 Filesystem Uploader in Arduino IDE for 2 weeks, but I haven't succeeded yet.

It looks like you figured it out while I was writing this, but I'll post the information anyway for the benefit of others who have the same question and find this forum thread during their research:

These instructions are specific to Arduino IDE 1.x. They won't work with Arduino IDE 2.x

These instructions are specific to Arduino IDE 1.x. However, this tutorial does link to another tutorial for Arduino IDE 2.x:

Please note that the Arduino IDE 2.x ESP32 filesystem uploader is accessed in a different way than the Arduino IDE 1.x tool was:

https://randomnerdtutorials.com/arduino-ide-2-install-esp32-littlefs/#upload-files

  1. Then, upload the files to the ESP32 board. Press [Ctrl ] + [Shift ] + [P ] on Windows or [ ] + [Shift ] + [P ] on MacOS to open the command palette. Search for the Upload LittleFS to Pico/ESP8266/ESP32 command and click on it.

Okay, thank you, Sir. The sketch can now read the contents of the test_example.txt file as follows:

But why can't I add Tools > ESP32 Sketch Data Upload in Arduino IDE yet? I am very curious to find out why it doesn't work.

Great work finding the solution to the problem. Thanks for taking the time to post an update!

I'm not sure I understand what you mean by this.


Maybe you are asking why you can't use the "ESP32 sketch data upload" Tool with Arduino IDE 2.x?

The reason is because the "Tools" system of Arduino IDE 1.x used by the "ESP32 sketch data upload" Tool (AKA "plugin") is very specific to the Java programming language that version series of Arduino IDE was written in.

Arduino IDE 2.x is a complete rewrite of the Arduino IDE on a different framework and in a new language (TypeScript), so it is not possible for Arduino IDE 2.x to support the Arduino IDE 1.x Tools.


Or maybe you are asking why you must activate the extension via the "Command Palette" when using Arduino IDE 2.x, instead of via a "Tools" menu item as was the case with Arduino IDE 1.x?

The reason is that the VS Code extensions framework that is used by the "arduino-littlefs-upload" extension for Arduino IDE 2.x doesn't provide the capability for the extension to add new menu items. The Arduino IDE developers are tracking the request for the addition of such a capability here:

Yes, that's my question, how to add the menu (plugin): Tool > ESP32 sketch data upload. Does it mean that what I got from several links can only work on Arduino IDE 1.x and not on Arduino IDE 2.x?

Thanks for the clarification. So the answer to your question is here:

If what you got from those links was the "ESP32 sketch data upload" Tool, then yes that is correct.

Hi,
Wasn't sure if to start a new thread but given the issue I have is the same I thought to ask on here first. I am trying to following the instructions in post 5 and use the little FS uploader. I am using a Mac and for the life of me I can't find the folder ~/.arduinolDE/ on my Mac at all.

Any help appreciated.
Thanks
Josh

Hi @joshbear01. ~ is an alias for the path /Users/<username>/ (where <username> is your macOS username).

So an alternative way of describing the folder's path, which is probably more relevant when using Finder, is:

/Users/<username>/.arduinoIDE/

:exclamation: The .arduinoIDE folder is hidden by default. You can make it visible by pressing the Command+Shift+. keyboard shortcut.


Thank you! The hidden part was a learning for me. :roll_eyes:

You are welcome. I'm glad if I was able to be of assistance.

Regards, Per

Sorry, "I have tried to add the 'ESP32 sketch data upload' tool in Arduino IDE 1.x, but the menu still does not appear under 'Tools >'. Please help me with how to add the 'ESP32 sketch data upload' tool in Arduino IDE 1.x? Thanks."

I don't understand why you now want to use the outdated Arduino IDE 1.x when you already had a working system using Arduino IDE 2.x. But I'll try to provide assistance anyway:

You can install the "ESP32 sketch data upload" Tool by following these instructions:

  1. Start Arduino IDE 1.x.
  2. Select File > Preferences from the Arduino IDE menus.
    The "Preferences" dialog will open.
  3. Note the path shown in the "Sketchbook location:" field of the "Preferences" dialog.
  4. Click the "Cancel" button in the "Preferences" dialog.
  5. Select File > Quit from the Arduino IDE menus.
    All Arduino IDE windows will close.
  6. Using your file browser, open the folder at the path that was shown in the "Sketchbook location" IDE preference.
  7. Create a folder named tools if one doesn't already exist.
  8. Click the following link to open the GitHub repository page for the latest release of the "ESP32 sketch data upload" Tool in your web browser:
    https://github.com/me-no-dev/arduino-esp32fs-plugin/releases/latest
  9. Click on the "ESP32FS-1.1.zip" download link under the "Assets" section of that page.
    Your browser will start a file download.
  10. Wait for the download to finish.
  11. Extract the downloaded file.
  12. Copy the unzipped ESP32FS folder to the tools subfolder of the sketchbook you created in step (7).
    The resulting folder structure must be exactly like this:
    <sketchbook location>
    ├── tools/
    │   ├── ESP32FS/
    │   │   └── tool/
    │   │       └── esp32fs.jar
    │   ...
    ...
    
    (where <sketchbook location> is the path that was shown in the "Sketchbook location" IDE preference)
  13. Start Arduino IDE 1.x.

You should now see a "ESP32 Sketch Data Upload" menu item under the Arduino IDE 1.x Tools menu.

"Thank you for your response. I have tried several times to add 'ESP32 sketch data upload' in Arduino IDE 1.x, even on 3 laptops, but it still doesn't work. Here are the results.

Alright, I will close the discussion using IDE 1.x. With your help, I have been able to create an ESP32 'LittleFS Uploader' in Arduino IDE 2.x.

I am actually learning how to create a sketch to read sensors (any sensor) using the WebServer method, and I found a link that uses Arduino IDE 1.x. Could you provide a link uses Arduino 2.x for reading sensors with WebServer that separates the HTML, CSS and JavaScript files into a 'data' folder" like the following file organization?

Thank you very much for your help

I'm sorry to hear that. I personally verified that my instructions do work.

I wonder if it might be caused by you using the Microsoft Store app version of Arduino IDE? Windows places some extra security restrictions on these apps, so maybe those block the IDE's ability to use the tool?

I'm using the non-app version of Arduino IDE 1.8.19, which you get by clicking the "Windows Win 7 and newer" or "Windows ZIP file" download links on the "Software" page instead of the "Windows app" link.

I think that is a reasonable decision.

Since it is unrelated to the original subject of this topic, please open a new forum topic for that question. This will ensure it gets the attention of the forum helpers knowledgeable about the subject of your new question.

You are welcome. I'm glad if I was able to be of assistance.

Regards, Per

Ok, i'll try next. Thank you