📌 Pengertian SPIFFS

SPIFFS (SPI Flash File System) adalah sistem file yang digunakan di dalam flash memory internal ESP32 untuk menyimpan data seperti:

• gambar (JPG, PNG)

• file HTML (web server)

• JSON/config

• font UI

• asset tampilan (ikon, background)

Berbeda dengan RAM:

• RAM → hilang saat mati

• SPIFFS → tetap tersimpan meskipun ESP32 dimatikan 

⚙️ Cara Kerja SPIFFS di ESP32

ESP32 punya flash memory (biasanya 4MB atau lebih).

Memory ini dibagi jadi beberapa bagian:

• program (firmware)

• OTA update

• SPIFFS (storage file)

👉 Jadi SPIFFS itu “harddisk kecil” di dalam ESP32

📁 Struktur SPIFFS (Sederhana)

Contoh isi SPIFFS:

/spiffs
  ├── bg.jpg
  ├── icon_start.jpg
  ├── config.json
  ├── data.txt

ESP32 bisa:

• baca file

• tulis file

• hapus file 

   

🖥️ Kenapa SPIFFS Penting untuk TFT 4 Inch?

Kalau kamu pakai LCD TFT 4 inch (ILI9488):

Tanpa SPIFFS:

• gambar harus di-embed di kode ❌

• program jadi berat ❌

• susah update ❌

Dengan SPIFFS:

• gambar disimpan di flash ✅

• bisa load saat runtime ✅

• bisa ganti tanpa ubah kode utama ✅ 

🔥 Contoh Use Case Nyata

1. Tampilan UI

• background menu

• tombol start/stop

• logo brand

2. Gallery / Slideshow

• baca semua file di SPIFFS

• tampilkan satu per satu

3. Sistem Dashboard Lokal

• HTML disimpan di SPIFFS

• ESP32 jadi web server

⚠️ Kelemahan SPIFFS 

SPIFFS itu bukan tanpa kekurangan:

❌ Tidak ada folder asli

Semua file dianggap satu level

❌ Tidak cocok untuk file besar

Contoh:

• video ❌

• image resolusi besar ❌

❌ Sudah mulai tergantikan

ESP-IDF terbaru mulai pakai:

• LittleFS (lebih modern) 

🔄 SPIFFS vs Alternatif

🧩 Kapan Harus Pakai SPIFFS?

Gunakan SPIFFS kalau:

• butuh simpan gambar UI

• butuh config file

• project kecil-menengah

Jangan pakai kalau:

• butuh banyak file besar

• butuh struktur folder kompleks

🖼️ Cara Upload Gambar ke SPIFFS dan Tampilkan di TFT ESP32 (Step-by-Step)

Kalau kamu sudah sampai tahap pakai ESP32 + TFT 4 inch, biasanya masalah berikut pasti muncul:

❓ “Gimana cara nampilin gambar (logo, background UI) tanpa bikin program jadi berat?”

Jawabannya: pakai SPIFFS + file JPG.
Di artikel ini kamu akan belajar dari nol sampai tampil di layar. 

🎯 Tujuan Tutorial

Setelah mengikuti ini, kamu bisa:

• upload gambar ke SPIFFS

• membaca file dari ESP32

• menampilkan gambar ke TFT (ILI9488)

• memahami alur kerja end-to-end 

🧰 Persiapan

Hardware

• ESP32

• TFT 4 inch (ILI9488 / sejenis)

Software

• Arduino IDE

• Library:

  • TFT_eSPI

  • TJpg_Decoder

  • SPIFFS (built-in)

 📁 STEP 1 — Siapkan Gambar

Gunakan gambar dengan kriteria:

• format: .jpg

• resolusi kecil (misal: 320x240 atau 480x320)

• ukuran < 100KB (biar cepat load)

👉 Kenapa JPG?

• lebih ringan dibanding PNG

• didukung langsung oleh TJpg_Decoder

Contoh nama file:

bg.jpg
logo.jpg 

project_esp32/
  ├── project_esp32.ino
  └── data/
        └── bg.jpg

🌐 Upload Gambar ke SPIFFS via Web (Tanpa USB)

🎯 Tujuan

• Upload file JPG ke SPIFFS lewat browser
• Melihat daftar file di ESP32
• Menampilkan file ke TFT langsung 

Gunakan program ini pastikan mengganti nama dan pasword wifi

#include 
#include 
#include 
#include 
#include 

// =====================================================
// WIFI ACCESS POINT
// =====================================================
const char* ssid = "carapaklek dot com";
const char* password = "12345678";

// =====================================================
// OBJECT
// =====================================================
WebServer server(80);
TFT_eSPI tft = TFT_eSPI();
File uploadFile;

// =====================================================
// HTML PAGE
// =====================================================
String uploadPage = R"rawliteral(






  

  

  







ESP32 TFT Upload
















Lihat File SPIFFS






)rawliteral";

// =====================================================
// TFT JPG RENDER
// =====================================================
bool tft_jpg_render(int16_t x,
                    int16_t y,
                    uint16_t w,
                    uint16_t h,
                    uint16_t *bitmap)
{
  if (y >= tft.height()) return false;

  tft.pushImage(x, y, w, h, bitmap);

  return true;
}

// =====================================================
// TFT BOOT SCREEN
// =====================================================
void showBootScreen()
{
  tft.fillScreen(TFT_BLACK);

  tft.setTextColor(TFT_WHITE);
  tft.setTextSize(2);

  tft.setCursor(20, 40);
  tft.println("ESP32 TFT READY");

  tft.setCursor(20, 80);
  tft.println("Starting AP...");
}

// =====================================================
// TFT WIFI INFO
// =====================================================
void showWifiInfo()
{
  tft.fillScreen(TFT_BLACK);

  tft.setTextColor(TFT_GREEN);
  tft.setTextSize(2);

  tft.setCursor(20, 30);
  tft.println("WiFi AP Ready");

  tft.setTextColor(TFT_WHITE);

  tft.setCursor(20, 80);
  tft.println("SSID:");

  tft.setCursor(20, 110);
  tft.println(ssid);

  tft.setCursor(20, 160);
  tft.println("IP:");

  tft.setCursor(20, 190);
  tft.println(WiFi.softAPIP());
}

// =====================================================
// HANDLE UPLOAD
// =====================================================
void handleUpload()
{
  HTTPUpload& upload = server.upload();

  // =====================================================
  // START UPLOAD
  // =====================================================
  if (upload.status == UPLOAD_FILE_START)
  {
    String filename = upload.filename;

    // =====================================================
    // RAPIIKAN NAMA FILE
    // =====================================================
    filename.toLowerCase();

    filename.replace(" ", "_");
    filename.replace("(", "");
    filename.replace(")", "");

    filename = "/" + filename;

    Serial.println("Upload File: " + filename);

    uploadFile = SPIFFS.open(filename,
                             FILE_WRITE);
  }

  // =====================================================
  // WRITE FILE
  // =====================================================
  else if (upload.status == UPLOAD_FILE_WRITE)
  {
    if (uploadFile)
    {
      uploadFile.write(upload.buf,
                       upload.currentSize);
    }
  }

  // =====================================================
  // FINISH UPLOAD
  // =====================================================
  else if (upload.status == UPLOAD_FILE_END)
  {
    if (uploadFile)
    {
      uploadFile.close();
    }

    Serial.println("Upload selesai");
  }
}

// =====================================================
// LIST FILE
// =====================================================
void handleList()
{
  String html;

  html += "";

  html += "
Daftar File SPIFFS
";

  File root = SPIFFS.open("/");

  File file = root.openNextFile();

  while (file)
  {
    String name = file.name();

    html += "
";

    html += "";
    html += name;
    html += "

";

    // =====================================================
    // BUTTON SHOW
    // =====================================================
    html += "Tampilkan";

    // =====================================================
    // BUTTON DELETE
    // =====================================================
    html += "Hapus";

    html += "
";

    file.close();

    file = root.openNextFile();
  }

  root.close();

  html += "

";

  html += "Kembali";

  html += "";

  server.send(200,
              "text/html",
              html);
}

// =====================================================
// SHOW IMAGE TO TFT
// =====================================================
void handleShow()
{
  if (!server.hasArg("file"))
  {
    server.send(400,
                "text/plain",
                "File tidak ditemukan");

    return;
  }

  String filename = server.arg("file");

  // =====================================================
  // PASTIKAN ADA "/"
  // =====================================================
  if (!filename.startsWith("/"))
  {
    filename = "/" + filename;
  }

  Serial.println("Show: " + filename);

  // =====================================================
  // CEK FILE
  // =====================================================
  if (!SPIFFS.exists(filename))
  {
    server.send(404,
                "text/plain",
                "File tidak ada");

    return;
  }

  // =====================================================
  // BACA UKURAN JPG
  // =====================================================
  uint16_t w, h;

  if (TJpgDec.getFsJpgSize(&w,
                           &h,
                           filename.c_str()) != JDR_OK)
  {
    server.send(500,
                "text/plain",
                "Gagal membaca JPG");

    return;
  }

  // =====================================================
  // AUTO SCALE
  // =====================================================
  uint8_t scale = 0;

  while (scale < 3)
  {
    if ((w >> scale) <= 480 &&
        (h >> scale) <= 320)
    {
      break;
    }

    scale++;
  }

  // =====================================================
  // CLEAR TFT
  // =====================================================
  tft.fillScreen(TFT_BLACK);

  // =====================================================
  // SET DECODER
  // =====================================================
  TJpgDec.setJpgScale(scale);

  TJpgDec.setSwapBytes(true);

  TJpgDec.setCallback(tft_jpg_render);

  // =====================================================
  // AUTO CENTER
  // =====================================================
  int x = (480 - (w >> scale)) / 2;

  int y = (320 - (h >> scale)) / 2;

  // =====================================================
  // TAMPILKAN JPG
  // =====================================================
  TJpgDec.drawFsJpg(x,
                    y,
                    filename.c_str());

  server.send(200,
              "text/plain",
              "Gambar tampil di TFT");
}

// =====================================================
// DELETE FILE
// =====================================================
void handleDelete()
{
  if (!server.hasArg("file"))
  {
    server.send(400,
                "text/plain",
                "File tidak ditemukan");

    return;
  }

  String filename = server.arg("file");

  // =====================================================
  // PASTIKAN ADA "/"
  // =====================================================
  if (!filename.startsWith("/"))
  {
    filename = "/" + filename;
  }

  Serial.println("Hapus file: " + filename);

  // =====================================================
  // CEK FILE
  // =====================================================
  if (!SPIFFS.exists(filename))
  {
    Serial.println("File tidak ada");

    server.send(404,
                "text/plain",
                "File tidak ada");

    return;
  }

  // =====================================================
  // HAPUS FILE
  // =====================================================
  bool result = SPIFFS.remove(filename);

  if (result)
  {
    Serial.println("File berhasil dihapus");

    server.sendHeader("Location",
                      "/list");

    server.send(303);
  }
  else
  {
    Serial.println("Gagal menghapus file");

    server.send(500,
                "text/plain",
                "Gagal menghapus file");
  }
}

// =====================================================
// SETUP
// =====================================================
void setup()
{
  Serial.begin(115200);

  // =====================================================
  // SPIFFS
  // =====================================================
  if (!SPIFFS.begin(true))
  {
    Serial.println("SPIFFS gagal mount");

    return;
  }

  // =====================================================
  // TFT
  // =====================================================
  tft.begin();

  tft.setRotation(1);

  tft.fillScreen(TFT_BLACK);

  // =====================================================
  // JPG DECODER
  // =====================================================
  TJpgDec.setSwapBytes(true);

  TJpgDec.setCallback(tft_jpg_render);

  // =====================================================
  // BOOT SCREEN
  // =====================================================
  showBootScreen();

  // =====================================================
  // START ACCESS POINT
  // =====================================================
  WiFi.softAP(ssid,
              password);

  Serial.println();
  Serial.println("Access Point Started");

  Serial.print("IP Address: ");
  Serial.println(WiFi.softAPIP());

  // =====================================================
  // SHOW WIFI INFO TFT
  // =====================================================
  showWifiInfo();

  // =====================================================
  // HOME PAGE
  // =====================================================
  server.on("/",
            HTTP_GET,
            []()
            {
              server.send(200,
                          "text/html",
                          uploadPage);
            });

  // =====================================================
  // UPLOAD
  // =====================================================
  server.on("/upload",
            HTTP_POST,

            []()
            {
              server.sendHeader("Location",
                                "/list");

              server.send(303);
            },

            handleUpload);

  // =====================================================
  // LIST FILE
  // =====================================================
  server.on("/list",
            HTTP_GET,
            handleList);

  // =====================================================
  // SHOW IMAGE
  // =====================================================
  server.on("/show",
            HTTP_GET,
            handleShow);

  // =====================================================
  // DELETE FILE
  // =====================================================
  server.on("/delete",
            HTTP_GET,
            handleDelete);

  // =====================================================
  // START SERVER
  // =====================================================
  server.begin();

  Serial.println("Web Server Aktif");
}

// =====================================================
// LOOP
// =====================================================
void loop()
{
  server.handleClient();
}

🧪 Cara Pakai (Real Use Case)

1. Nyalakan ESP32
2. Lihat IP di Serial Monitor 
3. koneksikan wifi dengan pc/komputer 

4. Buka di browser:

   http://192.168.xxx.xxx
   

5. Upload gambar
6. Klik “Lihat File”
7. Klik tampilkan → langsung tampil di TFT 

🔥 Kelebihan Metode Ini

• Tidak perlu upload ulang firmware
• Bisa update UI dari HP/laptop
• Cocok untuk:
  • display menu
  • dashboard 

⚠️ Tips Penting

• Batasi ukuran file (ideal <100KB)
• Gunakan JPG, bukan PNG
• Nama file tanpa spasi (biar aman)

Baca juga : Download Sket Arduino IDE untuk Kalibrasi Layar Touchscreen TFT 4 Inch ILI9488