{"id":8336,"date":"2025-03-25T14:58:48","date_gmt":"2025-03-25T13:58:48","guid":{"rendered":"https:\/\/willem.aandewiel.nl\/?p=8336"},"modified":"2025-03-26T12:26:47","modified_gmt":"2025-03-26T11:26:47","slug":"bibliotheken-om-het-leven-makkelijker-te-maken-part-3","status":"publish","type":"post","link":"https:\/\/willem.aandewiel.nl\/index.php\/2025\/03\/25\/bibliotheken-om-het-leven-makkelijker-te-maken-part-3\/","title":{"rendered":"Bibliotheken om het leven makkelijker te maken (part 3)"},"content":{"rendered":"\n<p>1,134 keer bekeken \/ views<br><br>Dit is het derde deel van drie posts over drie bibliotheken die ik heb geschreven om ons leven makkelijker te maken:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Deel 1: <a href=\"https:\/\/willem.aandewiel.nl\/index.php\/2025\/03\/15\/bibliotheken-om-het-leven-makkelijker-te-maken\/\">Networking<\/a><\/li>\n\n\n\n<li>Deel 2:&nbsp;<a href=\"https:\/\/willem.aandewiel.nl\/index.php\/2025\/03\/17\/bibliotheken-om-het-leven-makkelijker-te-maken-part-2\/\">Single Page Application (de GUI)<\/a><\/li>\n\n\n\n<li>Deel 3: Filesystem Manager<\/li>\n<\/ul>\n\n\n\n<p>Dit is het 3e deel en gaat dus over de Filesystem Manager. <br>In mijn eerdere posts heb ik besproken hoe bibliotheken het leven van een ontwikkelaar kunnen vereenvoudigen. In dit derde deel richt ik me specifieke op de FSmanager bibliotheek. Deze bibliotheek biedt een eenvoudige manier om het bestandssysteem op ESP8266- en ESP32-microcontrollers te beheren via een webinterface.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wat is FSmanager?<\/h2>\n\n\n\n<p>FSmanager is een C++-bibliotheek die gebruikmaakt van LittleFS om bestandssystemen op ESP-microcontrollers te beheren. Met FSmanager kun je bestanden uploaden, downloaden, verwijderen en mappen aanmaken of verwijderen. Daarnaast biedt het functies om de totale en gebruikte opslagruimte te tonen. De bibliotheek is ontworpen voor zowel ESP8266 als ESP32 en integreert naadloos met de Arduino-ontwikkelomgeving.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Belangrijkste functies<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bestandsbeheer<\/strong>: Uploaden, downloaden en verwijderen van bestanden.<\/li>\n\n\n\n<li><strong>Mapbeheer<\/strong>: Aanmaken en verwijderen van mappen (let op: alleen lege mappen kunnen worden verwijderd).<\/li>\n\n\n\n<li><strong>Opslaginformatie<\/strong>: Weergave van totale en gebruikte opslagruimte, met automatische aanpassing van de eenheden (B, KB, MB).<\/li>\n\n\n\n<li><strong>Systeembestandenbescherming<\/strong>: Voorkomt per ongeluk verwijderen van cruciale systeembestanden.<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Installatie en gebruik<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Voor PlatformIO-gebruikers:<\/h2>\n\n\n\n<p>Voeg de FSmanager-bibliotheek toe aan je platformio.ini-bestand:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">lib_deps =\n  https:\/\/github.com\/mrWheel\/esp-fsmanager<\/pre>\n\n\n\n<p>Zorg ervoor dat de benodigde afhankelijkheden, zoals LittleFS en de juiste webserverbibliotheek voor je microcontroller, zijn ge\u00efnstalleerd.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Voor Arduino IDE-gebruikers:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Download de FSmanager-bibliotheek als een .zip-bestand van de <a href=\"https:\/\/github.com\/mrWheel\/esp-fsmanager\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub-pagina<\/a>.<\/li>\n\n\n\n<li>Open de Arduino IDE en selecteer Sketch &gt; Add .ZIP Library&#8230;.<\/li>\n\n\n\n<li>Navigeer naar de locatie waar je het .zip-bestand hebt opgeslagen en voeg het toe.<\/li>\n\n\n\n<li>Installeer de benodigde afhankelijkheden via de Bibliotheekbeheerder:<br><br>* Voor ESP8266: ESP8266WebServer en LittleFS.<br>* Voor ESP32: WebServer en LittleFS.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Voorbeeld van gebruik<\/h2>\n\n\n\n<p>Hier is een eenvoudig voorbeeld van hoe je FSmanager in je project kunt integreren:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#include &lt;FSmanager.h>;\n\nvoid setup()\n{\n    Serial.begin(115200);\n\n    \/\/-- Initialize WiFiManager\n    wifiManager.autoConnect(\"FSManager-AP\");\n\n    LittleFS.begin();\n\n    fsManager.begin(&amp;Serial);\n\n    fsManager.addSystemFile(\"\/basicFSM.html\");\n    fsManager.addSystemFile(\"\/basicFSM.js\");\n\n    server.on(\"\/\", HTTP_GET, []() {\n        server.send(200, \"text\/html\", readSystemHtml(\"\/basicFSM.html\"));\n    });\n    server.onNotFound([]() {\n      Serial.printf(\"Not Found: %s\\n\", server.uri().c_str());\n      server.send(404, \"text\/plain\", \"404 Not Found\");\n    });\n    server.begin();\n    Serial.println(\"Webserver started!\");\n}\n\nvoid loop()\n{\n    server.handleClient();\n}<\/pre>\n\n\n\n<p>Dit voorbeeld initialiseert FSmanager en start de webinterface, waardoor je via een webbrowser toegang krijgt tot het bestandssysteem van je ESP-microcontroller. Om een werkende FSmanager te krijgen moet je er wel voor zorgen dat de bestanden <code>basicFSM.html<\/code> en <code>basicFSM.js<\/code> bestaan in de root van het LittleFS!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.26.23.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.26.23-1024x768.png\" alt=\"\" class=\"wp-image-8346\" style=\"width:444px;height:auto\" srcset=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.26.23-1024x768.png 1024w, https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.26.23-300x225.png 300w, https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.26.23-768x576.png 768w, https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.26.23.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Het <code>basicFSM.js<\/code> bestand beval alle Javascript functies die nodig zijn voor de werking van de FSmanager. Het <code>basicFSM.html<\/code> bestand ziet er zo uit:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;title>FSManager&lt;\/title>\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n&lt;\/head>\n&lt;body>\n  &lt;h1>FileSystem Manager&lt;\/h1>\n\n  &lt;div id=\"fileList\">\n    &lt;h2>Files&lt;\/h2>\n    &lt;div id=\"files\">&lt;\/div>\n    &lt;div id=\"spaceInfo\">&lt;\/div>\n  &lt;\/div>\n\n  &lt;div style=\"display: gap: 20px; margin-bottom: 20px;\">\n    &lt;div>\n      &lt;h2 id=\"uploadHeading\">Upload File&lt;\/h2>\n      &lt;form id=\"uploadForm\" action=\"\/fsm\/upload\" method=\"post\" enctype=\"multipart\/form-data\" onsubmit=\"handleUpload(event)\">\n        &lt;input type=\"file\" name=\"file\" required>\n        &lt;button type=\"submit\" class=\"button upload\">Upload File&lt;\/button>\n      &lt;\/form>\n    &lt;\/div>\n\n    &lt;div id=\"folderInput\">\n      &lt;h2>New Folder&lt;\/h2>\n      &lt;div style=\"display: gap: 10px;\">\n        &lt;input type=\"text\" id=\"foldername\" placeholder=\"Enter folder name\">\n        &lt;button class=\"button\" id=\"createFolderBtn\" onclick=\"createFolder()\">Create&lt;\/button>\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n\n \n  &lt;div id=\"status\">&lt;\/div>\n\n  &lt;script src=\"\/basicFSM.js\">&lt;\/script>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p>Het belangrijkste onderdeel is:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"fileList\">\n  &lt;h2>Files&lt;\/h2>\n  &lt;div id=\"files\">&lt;\/div>\n  &lt;div id=\"spaceInfo\">&lt;\/div>\n&lt;\/div>\n<\/pre>\n\n\n\n<p>In de <code>&lt;div&gt;<\/code> met <code>id=\"fileList\"<\/code> zullen de mappen en bestanden van het LittleFS worden ingevuld en meer specifiek in de <code>&lt;div&gt;<\/code> met <code>id=\"files\"<\/code>. In de <code>&lt;div&gt;<\/code> met <code>id=\"spaceInfo\"<\/code> komen de totale grootte en de gebruikte ruimte van het LittelFS te staan.<\/p>\n\n\n\n<p>Onder deze <code>&lt;div&gt;<\/code>&#8216;s komen twee knoppen. Deze dienen respectievelijk voor het uploaden van een bestand naar de ESP:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div>\n  &lt;h2 id=\"uploadHeading\">Upload File&lt;\/h2>\n  &lt;form id=\"uploadForm\" action=\"\/fsm\/upload\" method=\"post\" enctype=\"multipart\/form-data\" onsubmit=\"handleUpload(event)\">\n    &lt;input type=\"file\" name=\"file\" required>\n    &lt;button type=\"submit\" class=\"button upload\">Upload File&lt;\/button>\n  &lt;\/form>\n&lt;\/div>\n<\/pre>\n\n\n\n<p>en voor het aanmaken van een nieuwe map.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"folderInput\">\n  &lt;h2>New Folder&lt;\/h2>\n  &lt;div style=\"display: gap: 10px;\">\n    &lt;input type=\"text\" id=\"foldername\" placeholder=\"Enter folder name\">\n    &lt;button class=\"button\" id=\"createFolderBtn\" onclick=\"createFolder()\">Create&lt;\/button>\n  &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p>Het mag duidelijk zijn dat de gebruikte <code>id<\/code>&#8216;s correct in het <code>html<\/code> bestand moeten staan omdat de Javascript functies anders niet werken.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#fbe801\">Als je mij wil helpen om meer van dit soort posts te schrijven, overweeg dan om een kleine donatie te geven door op de knop hieronder te klikken.<br><!-- Begin PayPal Donations by https:\/\/www.tipsandtricks-hq.com\/paypal-donations-widgets-plugin -->\n\n<form action=\"https:\/\/www.paypal.com\/cgi-bin\/webscr\" method=\"post\" target=\"_blank\">\n    <div class=\"paypal-donations\">\n        <input type=\"hidden\" name=\"cmd\" value=\"_donations\" \/>\n        <input type=\"hidden\" name=\"bn\" value=\"TipsandTricks_SP\" \/>\n        <input type=\"hidden\" name=\"business\" value=\"Willem@Aandewiel.nl\" \/>\n        <input type=\"hidden\" name=\"return\" value=\"https:\/\/willem.aandewiel.nl\/index.php\/thank-you-for-your-donation\/\" \/>\n        <input type=\"hidden\" name=\"item_number\" value=\"FSmanager\" \/>\n        <input type=\"hidden\" name=\"rm\" value=\"0\" \/>\n        <input type=\"hidden\" name=\"currency_code\" value=\"EUR\" \/>\n        <input type=\"image\" style=\"cursor: pointer;\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2022\/09\/bmc-button-75.png\" name=\"submit\" alt=\"PayPal - The safer, easier way to pay online.\" \/>\n        <img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"https:\/\/www.paypalobjects.com\/en_US\/i\/scr\/pixel.gif\" width=\"1\" height=\"1\" \/>\n    <\/div>\n<\/form>\n<!-- End PayPal Donations -->\n<\/p>\n\n\n\n<p>FSmanager vereenvoudigt het beheer van het bestandssysteem op ESP8266- en ESP32-microcontrollers aanzienlijk. Door een intu\u00eftieve webinterface te bieden, maakt het de interactie met bestanden en mappen op je apparaat eenvoudig en effici\u00ebnt. Of je nu bestanden wilt uploaden, verwijderen of de opslagruimte wilt controleren, FSmanager is het tool dat je hierbij helpt.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">API Reference<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>De FSmanager-bibliotheek biedt een webgebaseerd bestandsbeheersysteem voor ESP32- en ESP8266-microcontrollers. Hiermee kunnen gebruikers bestanden in het LittleFS-bestandssysteem via een webinterface bekijken, uploaden, downloaden en beheren. De bibliotheek is ontworpen om te werken met zowel ESP32 als ESP8266 en past zich automatisch aan de juiste platformspecifieke API\u2019s aan.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Class: FSmanager<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/mrWheel\/esp-fsmanager#class-fsmanager\"><\/a>Description<\/h3>\n\n\n\n<p>De <strong>FSmanager<\/strong>-klasse integreert met een ESP-webserver om bestandsbeheerfunctionaliteit te bieden. Het behandelt bestandsbewerkingen zoals het weergeven, uploaden, downloaden en verwijderen van bestanden, evenals het aanmaken en verwijderen van mappen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Constructor<a href=\"https:\/\/github.com\/mrWheel\/esp-fsmanager#constructor\"><\/a><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">FSmanager(WebServerClass &amp;server);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Aanmaken van een FSmanager-instantie<\/h2>\n\n\n\n<p>Maakt een nieuwe <strong>FSmanager<\/strong>-instantie aan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Parameters:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>server: Referentie naar een <strong>WebServer<\/strong>-instantie (<em>WebServer<\/em> voor ESP32 of <em>ESP8266WebServer<\/em> voor ESP8266).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Voorbeeld:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#ifdef ESP32\n  WebServer server(80);\n#else\n  ESP8266WebServer server(80);\n#endif\n\nFSmanager fsManager(server);<\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">Publieke methoden<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">begin<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">void begin(Stream* debugOutput = &amp;Serial);<\/pre>\n\n\n\n<p>Initialiseert FSmanager en stelt de benodigde HTTP-handlers in voor bestandsbeheer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Parameters:<\/h3>\n\n\n\n<p>\u2022 debugOutput: Optionele Stream* voor debug-uitvoer (standaard: Serial).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Voorbeeld:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">void setup()\n{\n  Serial.begin(115200);\n  LittleFS.begin();\n  \n  \/\/-- Initialiseren met debug-uitvoer naar Serial\n  fsManager.begin(&amp;Serial);  \n  \n  server.begin();\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><br>setSystemFilePath<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">void setSystemFilePath(const std::string &amp;path);<\/pre>\n\n\n\n<p>Stelt het pad in voor systeembestanden, die worden beschermd tegen verwijdering.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Parameters:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>path: Pad voor systeembestanden (wordt genormaliseerd zodat het <strong>altijd<\/strong> begint met &#8216;\/&#8217; en <strong>nooit<\/strong> eindigt met &#8216;\/&#8217;).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Voorbeeld:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/-- Stel het pad voor systeembestanden in op \"\/config\"\nfsManager.setSystemFilePath(\"\/config\");\n\n\/\/-- Bestanden toegevoegd met addSystemFile zijn nu relatief aan dit pad\nfsManager.addSystemFile(fsManager.getSystemFilePath() + \"\/settings.json\");<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><br>getSystemFilePath<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">std::string getSystemFilePath() const;<\/pre>\n\n\n\n<p>Geeft het huidige pad voor systeembestanden terug.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Returnwaarde:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Het huidige systeembestandspad als een std::string.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Voorbeeld:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/-- Haal het huidige systeembestandspad op\nstd::string sysPath = fsManager.getSystemFilePath();\nSerial.printf(\"Huidig systeem pad: %s\\n\", sysPath.c_str());\n\n\/\/-- Gebruik het om een volledig pad te maken\nstd::string fullPath = sysPath + \"\/config.json\";<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><br>addSystemFile<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">void addSystemFile(const std::string &amp;fileName, bool setServe = true);<\/pre>\n\n\n\n<p>Voegt een bestand toe aan de lijst met systeembestanden (wordt beschermd tegen verwijdering via de webinterface).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Parameters:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>fileName: Het pad naar het bestand dat als systeembestand moet worden toegevoegd.<\/li>\n\n\n\n<li>setServe: (Optioneel) <strong>true<\/strong> om het bestand automatisch te serveren via de webserver (standaard: true).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Voorbeeld:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/-- Voeg \"index.html\" toe als systeembestand en serveer het\nfsManager.addSystemFile(\"\/index.html\");\n\n\/\/-- Voeg een configuratiebestand toe als systeembestand, maar serveer het niet\nfsManager.addSystemFile(\"\/config\/settings.json\", false);\n\n\/\/-- Voeg een bestand toe relatief aan het systeempad\nfsManager.setSystemFilePath(\"\/app\");\nfsManager.addSystemFile(fsManager.getSystemFilePath() + \"\/app.js\");<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><br>getCurrentFolder<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">std::string getCurrentFolder();<\/pre>\n\n\n\n<p>Geeft het huidige pad terug van de map die wordt bekeken in de file manager.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Returnwaarde:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Het huidige map-pad als een std::string.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Voorbeeld:<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/-- Haal de huidige map op\nstd::string currentFolder = fsManager.getCurrentFolder();\nSerial.printf(\"Momenteel in map: %s\\n\", currentFolder.c_str());\n\n\/\/-- Controleer of we in de rootmap zijn\nif (currentFolder == \"\/\") \n{\n  Serial.println(\"In de rootmap\");\n}<\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">Private methoden (voor begrip van de werking)<\/h1>\n\n\n\n<p>Hoewel deze methoden <strong>priv\u00e9<\/strong> zijn en niet direct toegankelijk, helpt het begrijpen ervan bij het effectief gebruiken van de bibliotheek:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>handleFileList<\/strong> \u2013 Behandelt HTTP-verzoeken om bestanden en mappen in een specifieke map weer te geven.<\/li>\n\n\n\n<li><strong>handleDelete<\/strong> \u2013 Behandelt HTTP-verzoeken om een bestand te verwijderen.<\/li>\n\n\n\n<li><strong>handleUpload<\/strong> \u2013 Behandelt HTTP-bestandsuploadverzoeken.<\/li>\n\n\n\n<li><strong>handleDownload<\/strong> \u2013 Behandelt HTTP-verzoeken om een bestand te downloaden.<\/li>\n\n\n\n<li><strong>handleCreateFolder<\/strong> \u2013 Behandelt HTTP-verzoeken om een nieuwe map aan te maken.<\/li>\n\n\n\n<li><strong>handleDeleteFolder<\/strong> \u2013 Behandelt HTTP-verzoeken om een map te verwijderen.<\/li>\n\n\n\n<li><strong>formatSize<\/strong> \u2013 Formatteert een bestandsgrootte in bytes naar een leesbaar formaat (B, KB, MB).<\/li>\n\n\n\n<li><strong>isSystemFile<\/strong> \u2013 Controleert of een bestand een systeembestand is (beschermd tegen verwijdering).<\/li>\n\n\n\n<li><strong>getTotalSpace<\/strong> \u2013 Geeft de totale beschikbare opslagruimte terug.<\/li>\n\n\n\n<li><strong>getUsedSpace<\/strong> \u2013 Geeft de gebruikte opslagruimte terug.<\/li>\n\n\n\n<li><strong>handleCheckSpace<\/strong> \u2013 Behandelt HTTP-verzoeken om te controleren of er voldoende ruimte is voor een upload.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Volledig gebruiksvoorbeeld<\/h1>\n\n\n\n<p>Hier is een compleet voorbeeld van hoe je FSmanager kunt instellen en gebruiken:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"cpp\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#include &lt;Arduino.h>\n#include &lt;WiFiManager.h>\n\n#ifdef ESP32\n  #include &lt;WebServer.h>\n  #include &lt;Update.h>\n#else\n  #include &lt;ESP8266WebServer.h>\n  #include &lt;ESP8266HTTPUpdate.h>\n#endif\n#include &lt;FSmanager.h>\n\nWiFiManager wifiManager;\nStream* debug = nullptr;\n\n#ifdef ESP32\n  WebServer server(80);\n#else\n  ESP8266WebServer server(80);\n#endif\nFSmanager fsManager(server);\n\n#include &lt;LittleFS.h>\n\n\nvoid handleFileRequest(String path) \n{\n  \/\/-- First try with systemPath if available\n  std::string sysPath = fsManager.getSystemFilePath();\n  String fullPath;\n\n  if (!sysPath.empty() &amp;&amp; sysPath.back() == '\/') \n  {\n    sysPath.pop_back();\n  }\n  Serial.printf(\"handleFileRequest(): sysPath[%s], path[%s]\\n\", sysPath.c_str(), path.c_str());\n  \n  if (sysPath.empty()) fullPath = path;\n  else                 fullPath = (sysPath + path.c_str()).c_str();\n  Serial.printf(\"handleFileRequest(): fullPath[%s]\\n\", fullPath.c_str());\n  \n  if (LittleFS.exists(fullPath)) \n  {\n    File file = LittleFS.open(fullPath, \"r\");\n\n    \/\/-- Determine the correct MIME type based on file extension\n    String contentType = \"text\/plain\"; \/\/-- Default\n    if (fullPath.endsWith(\".html\"))       contentType = \"text\/html\";\n    else if (fullPath.endsWith(\".css\"))   contentType = \"text\/css\";\n    else if (fullPath.endsWith(\".js\"))    contentType = \"application\/javascript\";\n    else if (fullPath.endsWith(\".png\"))   contentType = \"image\/png\";\n    else if (fullPath.endsWith(\".jpg\") || fullPath.endsWith(\".jpeg\")) contentType = \"image\/jpeg\";\n    else if (fullPath.endsWith(\".gif\"))   contentType = \"image\/gif\";\n    else if (fullPath.endsWith(\".ico\"))   contentType = \"image\/x-icon\";\n    else if (fullPath.endsWith(\".svg\"))   contentType = \"image\/svg+xml\";\n    else if (fullPath.endsWith(\".woff\"))  contentType = \"font\/woff\";\n    else if (fullPath.endsWith(\".woff2\")) contentType = \"font\/woff2\";\n    else if (fullPath.endsWith(\".ttf\"))   contentType = \"font\/ttf\";\n    else if (fullPath.endsWith(\".eot\"))   contentType = \"text\/plain\";\n    else if (fullPath.endsWith(\".json\"))  contentType = \"application\/json\";\n\n    Serial.printf(\"handleFileRequest: [%s] contentType[%s]\\n\", fullPath.c_str(), contentType.c_str());\n    \/\/-- Send the file with the correct content type\n    server.streamFile(file, contentType);\n    file.close();\n    return;\n  }\n  else \n  {\n    server.send(404, \"text\/plain\", \"File Not Found\");\n  }\n\n} \/\/ handleFileRequest()\n\n\nString readSystemHtml(const char* htmlFile)\n{\n  \/\/-- First try with systemPath if available\n  std::string sysPath = fsManager.getSystemFilePath();\n  File file;\n  \n  if (!sysPath.empty()) \n  {\n    std::string fullPath = sysPath + htmlFile;\n    file = LittleFS.open(fullPath.c_str(), \"r\");\n  }\n  \n  \/\/-- If file not found with systemPath or systemPath is empty, try original path\n  if (!file) \n  {\n    file = LittleFS.open(htmlFile, \"r\");\n  }\n  \n  if (!file) \n  {\n    Serial.println(\"Failed to open file for reading\");\n    \/\/-- Return empty string if file not found\n    return String();  \n  }\n\n  String fileContent;\n  while (file.available()) \n  {\n    \/\/-- Read byte by byte and append to String\n    fileContent += (char)file.read();  \n  }\n\n  file.close();\n  return fileContent;\n  \n} \/\/ readSystemHtml()\n\n\nvoid setup()\n{\n    Serial.begin(115200);\n\n    \/\/-- Initialize WiFiManager\n    wifiManager.autoConnect(\"fancyFSM-AP\");\n\n    LittleFS.begin();\n\n    fsManager.begin(&amp;Serial);\n    fsManager.addSystemFile(\"\/index.html\");\n    fsManager.addSystemFile(\"\/favicon.ico\");\n\n    fsManager.setSystemFilePath(\"\/fancyFSM\");\n    fsManager.addSystemFile(fsManager.getSystemFilePath() + \"\/fancyFSM.html\");\n    fsManager.addSystemFile(fsManager.getSystemFilePath() + \"\/fancyFSM.js\");\n    fsManager.addSystemFile(fsManager.getSystemFilePath() + \"\/fancyFSM.css\");\n\n    server.on(\"\/\", HTTP_GET, []() {\n        server.send(200, \"text\/html\", readSystemHtml(\"\/fancyFSM.html\"));\n    });\n    server.onNotFound([]() {\n      Serial.printf(\"Not Found: %s\\n\", server.uri().c_str());\n      server.send(404, \"text\/plain\", \"404 Not Found\");\n    });\n\n    server.begin();\n    Serial.println(\"Webserver started!\");\n}\n\nvoid loop()\n{\n    server.handleClient();\n}\n<\/pre>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-envira-envira-gallery\"><div id=\"envira-gallery-wrap-8353\" class=\"envira-gallery-wrap envira-gallery-theme-base envira-lightbox-theme-base\" itemscope itemtype=\"https:\/\/schema.org\/ImageGallery\"><div data-row-height=\"\" data-gallery-theme=\"\" id=\"envira-gallery-8353\" class=\"envira-gallery-public  envira-gallery-2-columns envira-clear enviratope envira-gallery-css-animations\" data-envira-columns=\"2\"><div id=\"envira-gallery-item-8349\" class=\"envira-gallery-item enviratope-item envira-gallery-item-1 envira-lazy-load\" style=\"padding-left: 5px; padding-bottom: 10px; padding-right: 5px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.36.49-1024x736.png\" class=\"envira-gallery-8353 envira-gallery-link\" rel=\"enviragallery8353\" title=\"Screenshot-2025-03-25-at-14.36.49-1024x736\" data-envira-caption=\"Screenshot-2025-03-25-at-14.36.49-1024x736\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><div class=\"envira-lazy\" data-test-width=\"640\" data-test-height=\"480\" style=\"padding-bottom:75%;\"><img decoding=\"async\" id=\"envira-gallery-image-8349\" class=\"envira-gallery-image envira-gallery-image-1\" data-envira-index=\"1\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.36.49-1024x736.png\" data-envira-src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.36.49-1024x736.png\" data-envira-gallery-id=\"8353\" data-envira-item-id=\"8349\" data-envira-caption=\"Screenshot-2025-03-25-at-14.36.49-1024x736\" alt=\"\" title=\"Screenshot-2025-03-25-at-14.36.49-1024x736\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.36.49-1024x736.png 400w,https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.36.49-1024x736.png 2x\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/div><\/a><\/div><\/div><div id=\"envira-gallery-item-8390\" class=\"envira-gallery-item enviratope-item envira-gallery-item-2 envira-lazy-load\" style=\"padding-left: 5px; padding-bottom: 10px; padding-right: 5px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-26-at-12.19.07.png\" class=\"envira-gallery-8353 envira-gallery-link\" rel=\"enviragallery8353\" title=\"Screenshot 2025-03-26 at 12.19.07\" data-envira-caption=\"Screenshot 2025-03-26 at 12.19.07\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><div class=\"envira-lazy\" data-test-width=\"640\" data-test-height=\"480\" style=\"padding-bottom:75%;\"><img decoding=\"async\" id=\"envira-gallery-image-8390\" class=\"envira-gallery-image envira-gallery-image-2\" data-envira-index=\"2\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-26-at-12.19.07-1024x737.png\" data-envira-src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-26-at-12.19.07-1024x737.png\" data-envira-gallery-id=\"8353\" data-envira-item-id=\"8390\" data-envira-caption=\"Screenshot 2025-03-26 at 12.19.07\" alt=\"\" title=\"Screenshot 2025-03-26 at 12.19.07\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-26-at-12.19.07-1024x737.png 400w,https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-26-at-12.19.07-1024x737.png 2x\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/div><\/a><\/div><\/div><div id=\"envira-gallery-item-8351\" class=\"envira-gallery-item enviratope-item envira-gallery-item-3 envira-lazy-load\" style=\"padding-left: 5px; padding-bottom: 10px; padding-right: 5px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.43-1024x629.png\" class=\"envira-gallery-8353 envira-gallery-link\" rel=\"enviragallery8353\" title=\"Screenshot-2025-03-25-at-14.40.43-1024x629\" data-envira-caption=\"Screenshot-2025-03-25-at-14.40.43-1024x629\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><div class=\"envira-lazy\" data-test-width=\"640\" data-test-height=\"480\" style=\"padding-bottom:75%;\"><img decoding=\"async\" id=\"envira-gallery-image-8351\" class=\"envira-gallery-image envira-gallery-image-3\" data-envira-index=\"3\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.43-1024x629.png\" data-envira-src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.43-1024x629.png\" data-envira-gallery-id=\"8353\" data-envira-item-id=\"8351\" data-envira-caption=\"Screenshot-2025-03-25-at-14.40.43-1024x629\" alt=\"\" title=\"Screenshot-2025-03-25-at-14.40.43-1024x629\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.43-1024x629.png 400w,https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.43-1024x629.png 2x\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/div><\/a><\/div><\/div><div id=\"envira-gallery-item-8352\" class=\"envira-gallery-item enviratope-item envira-gallery-item-4 envira-lazy-load\" style=\"padding-left: 5px; padding-bottom: 10px; padding-right: 5px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.53-1024x649.png\" class=\"envira-gallery-8353 envira-gallery-link\" rel=\"enviragallery8353\" title=\"Screenshot-2025-03-25-at-14.40.53-1024x649\" data-envira-caption=\"Screenshot-2025-03-25-at-14.40.53-1024x649\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><div class=\"envira-lazy\" data-test-width=\"640\" data-test-height=\"480\" style=\"padding-bottom:75%;\"><img decoding=\"async\" id=\"envira-gallery-image-8352\" class=\"envira-gallery-image envira-gallery-image-4\" data-envira-index=\"4\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.53-1024x649.png\" data-envira-src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.53-1024x649.png\" data-envira-gallery-id=\"8353\" data-envira-item-id=\"8352\" data-envira-caption=\"Screenshot-2025-03-25-at-14.40.53-1024x649\" alt=\"\" title=\"Screenshot-2025-03-25-at-14.40.53-1024x649\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.53-1024x649.png 400w,https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.53-1024x649.png 2x\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/div><\/a><\/div><\/div><div id=\"envira-gallery-item-8355\" class=\"envira-gallery-item enviratope-item envira-gallery-item-5 envira-lazy-load\" style=\"padding-left: 5px; padding-bottom: 10px; padding-right: 5px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.36.png\" class=\"envira-gallery-8353 envira-gallery-link\" rel=\"enviragallery8353\" title=\"Screenshot 2025-03-25 at 14.46.36\" data-envira-caption=\"Screenshot 2025-03-25 at 14.46.36\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><div class=\"envira-lazy\" data-test-width=\"640\" data-test-height=\"480\" style=\"padding-bottom:75%;\"><img decoding=\"async\" id=\"envira-gallery-image-8355\" class=\"envira-gallery-image envira-gallery-image-5\" data-envira-index=\"5\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.36-1024x742.png\" data-envira-src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.36-1024x742.png\" data-envira-gallery-id=\"8353\" data-envira-item-id=\"8355\" data-envira-caption=\"Screenshot 2025-03-25 at 14.46.36\" alt=\"\" title=\"Screenshot 2025-03-25 at 14.46.36\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.36-1024x742.png 400w,https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.36-1024x742.png 2x\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/div><\/a><\/div><\/div><div id=\"envira-gallery-item-8354\" class=\"envira-gallery-item enviratope-item envira-gallery-item-6 envira-lazy-load\" style=\"padding-left: 5px; padding-bottom: 10px; padding-right: 5px;\"  itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><div class=\"envira-gallery-item-inner\"><div class=\"envira-gallery-position-overlay  envira-gallery-top-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-top-right\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-left\"><\/div><div class=\"envira-gallery-position-overlay  envira-gallery-bottom-right\"><\/div><a href=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.47.png\" class=\"envira-gallery-8353 envira-gallery-link\" rel=\"enviragallery8353\" title=\"Screenshot 2025-03-25 at 14.46.47\" data-envira-caption=\"Screenshot 2025-03-25 at 14.46.47\" data-envira-retina=\"\" data-thumbnail=\"\"  itemprop=\"contentUrl\"><div class=\"envira-lazy\" data-test-width=\"640\" data-test-height=\"480\" style=\"padding-bottom:75%;\"><img decoding=\"async\" id=\"envira-gallery-image-8354\" class=\"envira-gallery-image envira-gallery-image-6\" data-envira-index=\"6\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.47-1024x784.png\" data-envira-src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.47-1024x784.png\" data-envira-gallery-id=\"8353\" data-envira-item-id=\"8354\" data-envira-caption=\"Screenshot 2025-03-25 at 14.46.47\" alt=\"\" title=\"Screenshot 2025-03-25 at 14.46.47\"  itemprop=\"thumbnailUrl\" data-envira-srcset=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.47-1024x784.png 400w,https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.47-1024x784.png 2x\" srcset=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/\/\/\/\/yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" \/><\/div><\/a><\/div><\/div><\/div><\/div><noscript><img decoding=\"async\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.36.49.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-26-at-12.19.07.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.43.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.40.53.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.36.png\" alt=\"\" \/><img decoding=\"async\" src=\"https:\/\/willem.aandewiel.nl\/wp-content\/uploads\/2025\/03\/Screenshot-2025-03-25-at-14.46.47.png\" alt=\"\" \/><\/noscript><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>Dit voorbeeld gaat er van uit dat er drie bestanden in de map <code>fancyFSM<\/code> staan<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>fancyFSM.html<\/li>\n\n\n\n<li>fancyFSM.css<\/li>\n\n\n\n<li>fancyFSM.js<\/li>\n<\/ul>\n\n\n\n<div style=\"height:56px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<p>Alle in deze post gepresenteerde code staat in de examples folder van de <a href=\"https:\/\/github.com\/mrWheel\/esp-fsmanager\" target=\"_blank\" rel=\"noreferrer noopener\">github repository<\/a>.<\/p>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">Webinterface API-endpoints<\/h1>\n\n\n\n<p>De FSmanager stelt de volgende HTTP-endpoints in:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Endpoint<\/strong><\/th><th><strong>Methode<\/strong><\/th><th><strong>Beschrijving<\/strong><\/th><\/tr><\/thead><tbody><tr><td>\/fsm\/filelist<\/td><td>GET<\/td><td>Lijst met bestanden in een map ophalen<\/td><\/tr><tr><td>\/fsm\/delete<\/td><td>POST<\/td><td>Bestand verwijderen<\/td><\/tr><tr><td>\/fsm\/upload<\/td><td>POST<\/td><td>Bestand uploaden<\/td><\/tr><tr><td>\/fsm\/download<\/td><td>GET<\/td><td>Bestand downloaden<\/td><\/tr><tr><td>\/fsm\/checkSpace<\/td><td>GET<\/td><td>Controleren of er voldoende ruimte is voor een upload<\/td><\/tr><tr><td>\/fsm\/createFolder<\/td><td>POST<\/td><td>Nieuwe map aanmaken<\/td><\/tr><tr><td>\/fsm\/deleteFolder<\/td><td>POST<\/td><td>Map verwijderen<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:167px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1,134 keer bekeken \/ views Dit is het derde deel van drie posts over drie bibliotheken die ik heb geschreven om ons leven makkelijker te maken: Dit is het 3e deel en gaat dus over de Filesystem Manager. In mijn &hellip; <a href=\"https:\/\/willem.aandewiel.nl\/index.php\/2025\/03\/25\/bibliotheken-om-het-leven-makkelijker-te-maken-part-3\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[25,119,47,51,181,173,183,182],"class_list":["post-8336","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-arduino","tag-esp32","tag-esp8266","tag-firmware","tag-library","tag-platformio","tag-visual-studio-code","tag-vsc"],"views":1134,"_links":{"self":[{"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/posts\/8336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/comments?post=8336"}],"version-history":[{"count":27,"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/posts\/8336\/revisions"}],"predecessor-version":[{"id":8394,"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/posts\/8336\/revisions\/8394"}],"wp:attachment":[{"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/media?parent=8336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/categories?post=8336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/willem.aandewiel.nl\/index.php\/wp-json\/wp\/v2\/tags?post=8336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}