Belajar Fullstack Developer - File Upload & Storage

#Pendahuluan

Hampir semua produk akhirnya butuh file: foto profil, lampiran dokumen, gambar catatan. Episode ini membahas file upload & storage dengan pola yang benar — karena "menyimpan file di folder project" adalah keputusan yang tampak mudah di awal, tetapi menjadi bencana saat deploy dan diskalakan.

Mengapa masalah ini spesifik fullstack? Karena melibatkan dua sisi sekaligus: frontend (mengunggah dari browser dengan UX yang baik) dan backend (validasi, keamanan, dan tempat penyimpanan yang benar). Kesalahan di salah satu sisi langsung terasa di sisi lain.

#Mengapa Bukan Filesystem Lokal atau Database

Dua pilihan "mudah" yang sering dipakai pemula, dan alasan keduanya salah:

Solusi standar industri: object storage — layanan yang dirancang khusus untuk file tak berubah (S3, Cloudflare R2, GCS). File disimpan sebagai objek dengan URL, database hanya menyimpan referensi (path/URL), dan biaya penyimpanannya jauh lebih murah.

#Alur Upload yang Benar

Jangan pernah upload file melewati server aplikasi kalian (kecuali file kecil yang butuh proses khusus). Alur standar dengan presigned URL:

Upload melewati browser → storage langsung tanpa menyentuh server aplikasi. Keuntungannya: server tidak menjadi bottleneck, tidak ada batas body upload, dan skala tidak bergantung pada kapasitas server kalian.

#Validasi File: Sebelum dan Sesudah

Validasi wajib di dua tempat:

#1. Di Browser (UX)

Cek cepat agar user tahu sejak awal:

const MAX_SIZE = 10 * 1024 * 1024 // 10 MB
 
function validateFile(file: File) {
  if (!["image/png", "image/jpeg", "image/webp"].includes(file.type)) {
    return "Hanya PNG, JPEG, atau WebP"
  }
  if (file.size > MAX_SIZE) {
    return "Maksimal 10 MB"
  }
  return null
}

#2. Di Server (Kebenaran)

Validasi browser bisa dilewati. Di server, periksa lagi — dan jangan percaya file.type dari client yang bisa dipalsukan:

import { z } from "zod"
 
const uploadSchema = z.object({
  fileName: z.string().min(1).max(255),
  contentType: z.enum(["image/png", "image/jpeg", "image/webp"]),
  size: z.number().int().max(10 * 1024 * 1024),
})
 
export async function POST(request: Request) {
  const parsed = uploadSchema.safeParse(await request.json())
  if (!parsed.success) {
    return Response.json({ error: "File tidak valid" }, { status: 400 })
  }
  const key = createUploadKey(parsed.data.contentType)
  const url = await getPresignedUrl(key, parsed.data.contentType)
  return Response.json({ url, key })
}

#Streaming Upload: Bisa Lanjut Saat Terputus

Untuk file besar, fetch biasa gagal total jika koneksi putus di tengah. Solusinya upload multi-bagian (multipart) yang di-resume dari bagian terakhir. AWS SDK menyediakan ini dengan mudah:

import { S3Client, Upload } from "@aws-sdk/client-s3"
import { env } from "@/lib/env"
 
const s3 = new S3Client({
  region: env.STORAGE_REGION,
  endpoint: env.STORAGE_ENDPOINT,
  credentials: {
    accessKeyId: env.STORAGE_ACCESS_KEY,
    secretAccessKey: env.STORAGE_SECRET_KEY,
  },
})
 
export async function uploadObject(key: string, body: ReadableStream) {
  const upload = new Upload({
    client: s3,
    params: { Bucket: env.STORAGE_BUCKET, Key: key, Body: body },
    partSize: 5 * 1024 * 1024, // bagian 5 MB, bisa di-resume
  })
  await upload.done()
}

Alasan pemilihan R2 (Cloudflare) untuk contoh: tanpa biaya egress, satu region global, dan API-nya kompatibel S3 — jadi kode di atas bisa berpindah ke AWS/GCS tanpa perubahan besar.

#Menampilkan File dengan Benar

Setelah upload, simpan key di database dan tampilkan lewat URL. Satu detail keamanan: untuk file user (bukan aset publik), jangan ekspos URL publik permanen — beri akses terbatas:

export async function getSignedViewUrl(key: string) {
  return await getSignedUrl(s3, new GetObjectCommand({
    Bucket: env.STORAGE_BUCKET,
    Key: key,
  }), { expiresIn: 3600 })
}

URL ini berlaku 1 jam, lalu harus dibuat ulang — kombinasi dengan validasi akses di server action (episode 6) menjaga privasi file.

#Praktik: Fitur Upload

Selesaikan dengan urutan berikut:

1. Buat endpoint POST /api/upload yang memvalidasi dan mengembalikan presigned URL.
2. Di halaman baru catatan, tambahkan input file + drag-drop yang menampilkan pratinjau gambar.
3. Setelah upload sukses, simpan key file di database via server action.
4. Tampilkan file yang sudah diunggah memakai signed view URL.

curl -s -X POST http://localhost:3000/api/upload \
  -H "Content-Type: application/json" \
  -d '{"fileName":"foto.png","contentType":"image/png","size":2048}'

Response harus berisi url dan key — bukti alur presigned bekerja.

#Penutup

Inti yang harus dibawa pulang:

• File tidak boleh di filesystem lokal atau database — pakai object storage.
• Database menyimpan metadata; object storage menyimpan bytes.
• Upload langsung browser → storage via presigned URL agar server tidak jadi bottleneck.
• Validasi di browser untuk UX, di server untuk kebenaran — termasuk magic bytes.
• Gunakan upload multipart untuk file besar agar bisa di-resume.
• File user ditampilkan via signed URL terbatas waktu, bukan URL publik permanen.

Di episode 13 selanjutnya kita membahas background jobs & queues — queue, cron, dan long-running tasks — agar kerja berat tidak memblokir request pengguna. Sampai jumpa di episode 13!