Part 7: Uploading Pictures Safely — Where Images Live

The Problem: Big Image Files Are Expensive

Imagine you run a delivery service. If you keep every customer's package in your warehouse, you'd need a giant warehouse. That costs a lot.

But if customers keep packages at their own homes or use a storage locker, you only need a small office.

Servers have the same problem. Image files are huge (1-10 MB each). If every blog post has 5 images, that's 50 MB per post. A thousand posts = 50 GB. That's expensive to store.

The Solution: Host Images Somewhere Else

Instead of storing images on AllBengal's server, I upload them to ImgBB (a free image hosting service). It's like renting a storage locker.

Here's how it works:

You write a blog post and add an image
↓
You click "Upload Image"
↓
AllBengal sends image to ImgBB
↓
ImgBB says: "I got it! Here's the URL: https://imgbb.com/abc123xyz"
↓
AllBengal saves that URL in your post
↓
When readers view your post, they download the image directly from ImgBB

AllBengal stores the URL (just text), not the huge image file.

Why This Is Smart

1. Saves Server Space

AllBengal's server: Just stores URLs (a few kilobytes)
ImgBB's server: Stores the actual images (they have huge servers)

2. Saves Money

ImgBB's free tier can store thousands of images
AllBengal stays lightweight and cheap to run

3. Loads Faster

ImgBB optimizes images (makes them smaller without losing quality)
ImgBB uses a CDN (distributed network) so images load from the server nearest to you

4. Reliable

ImgBB is a professional service designed for this
They have backups, security, and 99.9% uptime
AllBengal doesn't have to worry about image server crashes

The Upload Flow

Here's exactly what happens when you add an image to your blog:

Step 1: You Select an Image

Click "Add Image" in the editor
→ Your computer shows file chooser
→ You pick an image from your files

Step 2: Frontend Uploads to ImgBB

Browser sends image to /api/media/upload (AllBengal)
↓
AllBengal forwards it to ImgBB with API key
↓
ImgBB stores it and returns URL
↓
AllBengal sends URL back to your browser

Step 3: Image Appears in Editor

TinyMCE inserts: <img src="https://imgbb.com/abc123xyz.jpg">
↓
You can see the image in the editor preview
↓
You click "Publish"

Step 4: Image URL Saved to Database

AllBengal saves post with content:
<p>Check out this sunset!</p>
<img src="https://imgbb.com/abc123xyz.jpg" alt="Sunset">
↓
Image URL is stored, not the image itself

What Happens With the API Key?

ImgBB requires an API key (like a password) to upload images. This is secret and never shown to users:

Good:

Backend has API key
User uploads image
Backend uses API key to upload to ImgBB
URL returned to user
User never sees the API key ✓

Bad:

API key is in frontend code
Anyone reading the code can steal it
Someone uploads millions of images and bankrupts you ✗

AllBengal keeps the API key on the backend where it's safe.

File Validation

Before uploading, AllBengal checks:

1. File Type

Is it an image?

Allowed: .jpg, .png, .gif, .webp
Not allowed: .exe, .zip, .pdf, .mp4

2. File Size

Is it not too big?

Max: 10 MB per image
Typical post image: 2-5 MB

3. Image Dimensions

Is it not ridiculously huge or tiny?

Min: 100x100 pixels
Max: 8000x8000 pixels

If any check fails, you get a friendly error:

"Image is too large. Please resize to under 10 MB."
"JPG and PNG only, please."
"Image is too small (100x100 pixels minimum)."

Image Optimization

ImgBB automatically:

Compresses images (smaller files, same quality)
Converts formats (saves bandwidth)
Caches images globally (fast downloads everywhere)

Example

Original: sunset.jpg (5.2 MB)
↓
ImgBB stores: sunset_optimized.jpg (847 KB)
↓
When reader loads your post, they download: 847 KB (not 5.2 MB)
→ Saves 80% bandwidth
→ Loads in 500ms instead of 2 seconds

Security: Why Not Just Upload Files?

You might ask: "Why not let users upload any file they want?"

Because:

Malware: Someone uploads an .exe (program) that infects readers' computers
Storage abuse: Someone uploads 1,000 GB of files, bankrupting the service
Space: Your server fills up instantly
Processing: Your server spends all CPU power on image handling

By only allowing images and enforcing limits, we stay safe and fast.

The Bottom Line

Image uploading is:

✅ Simple (click upload, it works)
✅ Safe (validates file type and size)
✅ Fast (ImgBB optimizes images)
✅ Cheap (free storage)
✅ Scalable (handles millions of images)

You focus on writing. I focus on images being perfect.

Have questions about images? Drop a comment below!