Upload image (PNG, JPEG) to ESP8266 Web Page and Display it

ESP8266 NodeMCU can be used as Web server with html webpage. Many times you may want to add images in webpage. This can be achieved with help of SPIFFS (SPI Flash File System). Lets see step by step to upload image in web page.

Steps to Upload Image in ESP8266 NodeMCU

Step 1: Setup SPIFFS Tool to upload files in ESP

Uploading files to file system

ESP8266FS is a tool which integrates into the Arduino IDE. It adds a menu item to Tools menu for uploading the contents of sketch data directory into ESP8266 flash file system.

  • Download the tool: https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.1.3/ESP8266FS-0.1.3.zip.
  • In your Arduino sketchbook directory, create tools directory if it doesn’t exist yet
  • Unpack the tool into tools directory (the path will look like <home_dir>/Arduino/tools/ESP8266FS/)
  • Restart Arduino IDE
  • Open a sketch (or create a new one and save it)
  • Go to sketch directory (choose Sketch > Show Sketch Folder)
  • Create a directory named data and put image files you want in the file system there
  • Make sure you have selected a board, port, and closed Serial Monitor
  • Select Tools > ESP8266 Sketch Data Upload. This should start uploading the files into ESP8266 flash file system. When done, IDE status bar will display SPIFFS Image Uploaded message.

Step 2: Creating Web page with image in it

Create folder named as data where you sketch file is (.ino)

Create following files in you sketch data folder

index.html

put png image file in your data folder and rename it image.png make sure your image file should not be more than 3M bytes (our flash size)

Step 3: Create ESP8266 Arduino Sketch

Create new sketch and paste this code. and also create data folder where you have saved you sketch file .ino and paste image. Rename image with name image.png and create index.html file as shown above

Step 4: Uploading Flash with image and html web page file

After putting files in sketch data folder upload flash

Uploading Flash will take some time.

Step 5: Upload Program and Test

Upload program. and then connect to ESP WiFi Access point and enter IP address: 192.168.4.1. This is what we get if everything is done in right way.

Step 6: Points to be noted

  • Never take flash memory data in Variable as we have only 80Kbytes of RAM. Flash size is 3M bytes.
  • Directly stream Flash data to client
  • Flash Files are not deleted until SPIFFS.format() command is used or using delete command.
  • Uploading Sketch will not change or delete Flash files.

For More on SPIFFS read here

 

Leave a Reply