Cara Mudah Upload Gambar ke Cloudinary di SvelteKit

Mengelola upload gambar di aplikasi web modern bisa jadi tricky. Kalau kita deploy ke platform serverless (seperti Vercel atau Netlify), kita nggak bisa sembarangan simpan file di disk server karena file system-nya bersifat ephemeral (sementara).

Solusi terbaik? Gunakan layanan penyimpanan media eksternal seperti Cloudinary. Selain menyimpan gambar, Cloudinary juga otomatis mengoptimalkan format dan ukuran gambar agar website kita tetap ngebut.

Di artikel ini, gue bakal share cara integrasi Cloudinary di SvelteKit dengan cara yang paling efisien: streaming upload langsung dari memory, tanpa perlu simpan file sementara di disk.

1. Persiapan

Pertama, pastikan lo udah punya akun Cloudinary. Kalau belum, daftar dulu (gratis kok). Setelah login, cek Dashboard dan catat tiga hal ini dari bagian Product Environment Credentials:

• Cloud Name

• API Key

• API Secret

2. Instalasi & Konfigurasi

Install library Cloudinary di project SvelteKit lo:

npm install cloudinary

Lalu, masukkan credentials tadi ke file

.env:

# .env

CLOUDINARY_CLOUD_NAME=nama_cloud_lo

CLOUDINARY_API_KEY=1234567890

CLOUDINARY_API_SECRET=rahasia_banget

3. Buat Helper Utility

Kita bakal bikin file helper biar kodenya rapi dan bisa dipake ulang. Buat file

src/lib/server/cloudinary.ts.

Di sini kita pakai teknik upload_stream. Kenapa? Karena di SvelteKit, file yang di-upload via form data bisa kita ambil sebagai ArrayBuffer. Dengan stream, kita bisa "mengalirkan" data buffer ini langsung ke Cloudinary tanpa harus fs.writeFile dulu ke folder tmp. Lebih cepat dan aman untuk serverless!

// src/routes/settings/+page.server.ts
import { fail } from '@sveltejs/kit';
import { uploadImageFromBuffer } from '$lib/server/cloudinary';
import { db } from '$lib/server/db'; // Asumsi pake Drizzle ORM
export const actions = {
	updateProfile: async ({ request }) => {
		const formData = await request.formData();
		const avatarFile = formData.get('avatar') as File;
		let avatarUrl = null;
		// Cek apakah user upload file baru
		if (avatarFile && avatarFile.size > 0) {
			// 1. Convert File ke Buffer
			const arrayBuffer = await avatarFile.arrayBuffer();
			const buffer = Buffer.from(arrayBuffer);
			try {
				// 2. Upload ke Cloudinary
				const result = await uploadImageFromBuffer(buffer, 'users/avatars');
				avatarUrl = result.secure_url;
				
				console.log('Upload sukses:', avatarUrl);
			} catch (error) {
				console.error('Gagal upload:', error);
				return fail(500, { message: 'Gagal upload gambar' });
			}
		}
		// 3. Simpan URL ke database
		if (avatarUrl) {
			await db.update(users).set({ avatarUrl }).where(...)
		}
		return { success: true };
	}
};

5. Tips Tambahan

• Format Otomatis: Di helper tadi gue set format: 'webp'. Ini bikin gambar jadi jauh lebih kecil ukurannya dibanding JPG/PNG biasa tanpa ngurangin kualitas visual secara drastis.

• Hapus File Lama: Kalau user ganti foto profil, jangan lupa hapus foto lama di Cloudinary biar storage nggak penuh sampah. Lo bisa ekstrak public_id dari URL gambar lama terus panggil cloudinary.uploader.destroy.

Kesimpulan

Integrasi Cloudinary di SvelteKit itu sebenernya simpel banget. Dengan modal beberapa baris kode helper, lo udah bisa punya sistem manajemen media yang robust, scalable, dan otomatis teroptimasi.

Selamat ngoding! 🚀