All posts
Storing images in Firebase Realtime Database with base64
nodejsfirebasejavascript

Storing images in Firebase Realtime Database with base64

March 10, 20252 min readHumaira Ambreen

Lost and Found was a simple campus app — post a photo and description of a lost or found item, someone responds if they can help.

The immediate engineering question was images. Setting up Cloudinary or S3 for a low-traffic campus tool felt like overkill. Firebase Realtime Database is a JSON key-value store with no native file support, but JSON can hold strings, and images can be encoded as strings.

How it works

The client reads the uploaded file with FileReader.readAsDataURL(), which produces a data:image/jpeg;base64,... string. That string goes to the Node.js backend as a regular JSON field. The backend writes it to Firebase via the Admin SDK. On retrieval it goes straight into an <img src=""> and renders.

const reader = new FileReader();
reader.onload = (e) => {
  const base64 = e.target.result;
  // send as JSON to the Express backend
};
reader.readAsDataURL(file);

No CDN, no storage SDK on the frontend, no extra billing configuration. Base64 is ~33% larger than raw binary, so this doesn't scale past a certain point — but for small phone photos at low traffic, the numbers were fine.

The security constraint: all Firebase credentials stay in the backend (server.js). The frontend only knows about the Express REST API. No Firebase project config is ever in the browser.

What students did with it

The app had a public reverse-chronological feed. That was all it was — a list of posts from everyone on campus.

Within a few weeks, students were posting things that had nothing to do with lost items. Canteen takes, campus announcements, random observations. The lost-and-found framing was just a low-friction way in. Once they were reading the feed for actual lost items, they started posting whatever.

It ended up functioning as an informal college social feed — no accounts, no profiles, just a form and a public timeline.

That observation directly shaped what KEC Archives became. Students wanted an open, verified campus space. The lost-and-found was just the first version of that.

TAGGED

nodejsfirebasejavascript

Newer

KEC Archives is now the official platform of Krishna Engineering College