51 lines
2.5 KiB
Markdown
51 lines
2.5 KiB
Markdown
# 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)
|
|
|
|
```mermaid
|
|
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)
|
|
|
|
```mermaid
|
|
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](https://bun.sh/docs/installation). 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.)
|