img2db

Summary

While coding my website/blog, I wanted to keep my deployment complexity down and use a single DB for all the data like blog posts. If I wanted to be able to support images in my blog posts, I would need to store them somewhere but I didn't want to expose a file system or deploy an S3 service alongside my website. I decided to investigate storing images in a sqlite database as base64 encoded strings. This project is the result of that investigation.

This project also allowed me to explore Buns native HTTP and SQLite modules. Bun should be the only dependancy needed to run this project.

Architecture

There are two fundemental operations. Read everything and write a single new image. This isn't meant to be production ready after all, it's just a proof of concept. We can see the logic in the following sequence diagrams. Frontend code is all located in index.html with JS and Styles inlined. Backend logic is in the index.ts entrypoint. Logic for each endpoint is defined in routes.ts and database queries and setup are in database.ts.

Read (initial Page load and image retrieval)

sequenceDiagram
    autonumber
    Frontend->>Backend: GET /
    Backend->>Frontend: Return index.html
    Frontend->>Backend: Request /images
    Backend->>DB: Get all image details
    DB->>Backend: Return IDs and File Extensions
    Backend->Frontend: Return Image 'URIs'
    Note over Frontend: Append <img> tags w/ URIs to Document
    Frontend->>Backend: Browser: Load Images
    Note right of Frontend: /images/:id
    Backend->>DB: Get Image
    DB->>Backend: Return Base64 Image and MIME type
    Note over Backend: Parse Base64 Image into Buffer
    Backend->>Frontend: Return Buffer with MIME Type
    Note over Frontend: Load image into document

Write (Image upload)

sequenceDiagram
    autonumber
    Frontend->>Backend: Post image to /upload
    Note over Backend: Parse image to Base64
    Backend->>DB: Save Base64 and MIME type
    DB->>Backend: Return image ID
    Backend->>Frontend: Return redirect to /

Usage

To run this project, you will need to have Bun installed. You can then git clone and run bun run dev in the project root. This will start index.ts and listen on port 8080. You can then navigate to localhost:8080 in your browser to see the project in action. That's right, no need to install any other dependancies! (A SQLite database will be created in the project root when you start the server.)