ESP8266 Web Server Upload Files Quick To SPIFFS Flash Memory Over HTTP w/ Arduino IDE

in a previous video we saw how to set up the flash file system on the esp8266 after making a few changes we were able to upload files included in a data subdirectory we use the tools menu option which takes a really long time this needs to be repeated every time we make a change on the file so today we're going to learn a much quicker way on how to do so all right let's do this [Music] this video is sponsored by jl CPCB they're currently offering a great deal just two dollars for ten prototype PCBs with fast turnaround time they offer a variety of options and the resulting PCBs were great they also offer stencils have great facilities and wonderful people so I encourage you to give them a try the first thing we'll do is download our tips repository from the URL which I'll leave in the description of the video I'll copy to my desktop the web server SPI f FS example I'll rename it to web server HTTP upload and do the same thing for the actual code file I'll open it in the arduino ide making sure that the USB drivers are installed as we've done in other videos I'll go ahead and connect the board to the USB I'll then select the corresponding option from the Tools menu for the board and the port then remembering that this directory already includes a subdirectory called data with an index.html file in it I'll select the option from the Tools menu to upload it to the flash file system if this is not clear go back to the spi ffs video where I explain things more clearly notice that this process takes over a minute and a half that's a really long time so if I want to test that file out then I need to make changes to the firmware then upload the firmware which is a much quicker process open up the serial monitor to get the IP address of the esp8266 and use it to load the file from my browser if I want to make a change to the file I can't do it on the esp8266 so I need to open it in my preferred text editor on my computer make the change and go back to the Arduino IDE we uploaded to flash memory this process will once again take over a minute and a half you can see how it becomes tedious so we need to find a better way of proceeding to do that we'll start by getting rid of stuff we're now going to need the definition of the pin number also the declaration of the route that we were using to toggle the LED on and off and we'll start by adding a route that will allow us to see all the files that are currently inside the flash file system the access route will be list when it's accessed it will call a function named handle file list for consistency I'll rename the function that's called when the tab root path is accessed then proceed to define the handle file this function to list all the files will start with a string variable called path for the sake of simplicity I'll assume that there are no sub directories for only file currently uploaded to the flash file system I'll use the open door method of the spi ffs object to return all the files currently in the filesystem then I'll start constructing the string that will contain all the files that are currently stored I'll iterate through all the files using a while loop with the next method of the object to get each file I'll use the open file method of the dere object for each return file I'll use the name method in combination with the substring method of the string object to get the name of the file and I'll add it to the string that we want to output for readability I'll add a comma in between each file entry and I'll remember to close each file after getting the name once I've gone through all the files I'll format the string and return in using the send method of the server objects so that we can see it in a client browser we can upload the firmware to testings out go to our browsers and access the list path we see that currently there is only one file in the file system namely the index.html that we uploaded priorly now that we're able to see the files that are currently inside the file system we can worry about uploading more I'll start by declaring a variable that will hold the uploaded file I'll then create the route where we're going to be uploading the files and I'll name it upload I'll only allow uploads using the HTTP POST method and when the route is access it'll call an anonymous function that will simply send a plain text reply formatted in jason saying that the status is okay in addition to sending this reply i'll call a function to handle the actual upload in the definition of the handle file upload function I'll start by instantiating an object of the HTTP upload class we can use that object to monitor the status of the upload itself I can use the status property of the HTTP upload object to know in which step were in in the first step we'll get the name of the file that is about to be uploaded and add a forward slash if it's needed I'll add a couple of debug messages so that I know that things are working correctly using the spi ffs object we can then create the file in the flash file system that is about to be uploaded then in the second step is where we actually write the contents of the file onto the flash file system we can only do so if the file was successfully created if it is we can get the content and its size through the upload object in the last step of the file upload process will once again check that the file was actually created and if it was we'll go ahead and close it for debugging purposes I'll print out another set of messages with the size of the file and we're ready to test things out so let's upload the firmware make a change to the HTML file then instead of using the tools menu options through the Reno IDE I'm going to use the command line utility curl with a few options pointing to the location of the file and the IP address and route of where I want to upload it to notice that this just takes a couple of seconds I get the response message and if I go back to my browser refresh the page I can see the change that I just included to test it once again I can make a copy of the file without any changes go back to the terminal upload that second file and then I can access the list route to see if it was actually uploaded and there you have it we have two files in the flash file system in a shorter amount of time than you would have taken to upload a single file through there'd we no ID if you like my videos I invite you to my patreon page where you can chip in a buck or two that really helps me put in more time into the videos and release them quicker but whatever you do don't forget to Like subscribe or leave me a comment you can also interact with me on social media I'm on Instagram Twitter and Facebook and you can even use the community tab of the channel thank you for watching my videos and I will see you next time

Channel: datasith

Views: 22,592

Keywords: ESP32, ESP8266, Arduino, IDE, NodeMcu, Tutorials, Makers, Learn, Guide, IoT, Internet Of Things, Raspberry Pi, Wireless, Communication, Weather, Creative, Sensor, Python, Programming, C++, Beginner, Electronics, DIY, MicroPython, 3d Printing, CAD, Fusion 360, Education, Tutorial, Intro, Introduction, Web, Developer, HTML, Datalogger, Project, Sensors, Data, Visualization, Webserver, Server, Client, App, WebApp, Wemos, Robot, Robotics, Robots, Easy, Adafruit, Sparkfun, OS X, Windows, Linux, Embedded, Kickstarter, RC, Fun, Build, Engineering

Id: QLGwI5tC9yk

Length: 9min 37sec (577 seconds)

Published: Tue Feb 26 2019