Revamp of the FSBrowser and SDWebServer examples

[vdeconinck]

Following a discussion in issue #7002 , I proposed to unify the versions (FSBrowser and SDWebServer) and make it a "universal" FS browser. I also tried to modernize calls (e.g. using SDFS instead of SD).
One thing leading to another, I ended up improving usability and adding many features, such as a file size, free space bargraph and rename/move features.
So this is kind of "FSBrowser on steroïds". Hope you'll like it.
Please don't hesitate to test and give feedback.

Here is the hi-level changelog :

Fixes to work on LittleFS based on SDFS

• #define logic to select FS
• switched from SD to SDFS
• begin() does not support parameters > removed SS and added optional config
• LittleFS.open() second parametsr is mandatory > specified "r" where needed
• 'FILE_WRITE' was not declared in this scope > replaced by "w"

UI/usability improvements

• Never format filesystem, just return "FS INIT ERROR" when FS cannot be mounted
• Tree panel width is now proportional (20%) to see long names on big screens
• Added icons for files, and indented them to the same level as folders
• Changed file/folder icon set to use lighter and more neutral one, and added specific "text" and "image" icons for formats recognized as such
• Items are now sorted (folders first, then plain files, each in alphabetic order)
• Added file size after each file name
• Added FS status information at the top right
• Made clear that an async operation is in progress by dimming screen and showing opertation status
• Filled filename box in header with the name of the last clicked file
• Selecting a file for upload defaults to putting it in the same folder as the last clicked file
• Removed limitation to 8.3 lowercase filenames
• Support Filenames without extension, Dirnames with extension
• Improved recursive refresh of parts of the tree (e.g. refresh folder upon file delete, show last folder upon creating nested file)
• Added Save/Discard/Help buttons to ACE editor, discard confirmation on leave, and refresh tree and status upon save
• Removed "Upload" from context menu (which didn't work anyway)
• Added "Rename/Move" feature to context menu

Other

• Added a readme.md, as well as the PNG source for the icons and both full text and minified gz versions of the web page

[devyte]

This is rather close. Some replies to the unresolved conversations.

[vdeconinck]

Hi devyte, First, many thanks for the extensive review and advice. Much appreciated.

Rereading some comments, I realize some moves I made may seem to come out of the blue, but this version is really a merge between the original FSBrowser and SDWebServer. For example, the fact that the page is /edit/index.htm and not /edit.htm[.gz] comes from SDWebServer. Same for the recursive deletion routine.
I guess it means I really didn't invent anything, I'm mostly the cook who mixed the right ingredients :-).

With the latest requested changes (and removal of local urlDecode()), I think the version is quite OK.

With respect to the "is the server alive ?" use of /all, I just compiled a FSBrowser for LittleFS while the filesystem was formated as SPIFFS (please note that no formating ever happens anymore in such a case) and all calls return a clean "FS INIT ERROR" message. OTOH, a call to /status returns the status of the filesystem, which in that case was {"type":"LittleFS", "isOk":"false","unsupportedFiles":""}, so I think it's quite usable this way.

Please don't hesitate to test in real life and report of course.

If everything is OK, I now have two PRs on my TODO list:

• Make the lib version of getContentType() callable from user sketches, and adapt FSBrowser accordingly
• Create a basic example showing a live graph of ESP data.

Regarding that last point, do you still have a html page at hand that calls the graphs.js file ? I would like to know how it's meant to work before refactoring.

[devyte]

Well done, approved!

[devyte]

About the two PRs, let's discuss in gitter, just @ me in the channel.