Upload Foto Profil User di React + Node.js

Halo semuanya! 👋

Pada bagian ini, kita akan membuat fitur upload foto profil agar user bisa mengunggah gambar mereka sendiri. Keren, kan?

🛠️ Tools yang Digunakan

• React untuk frontend
• Express (Node.js) untuk backend
• Multer untuk menangani upload file

🔧 Backend – Tambah Fitur Upload

1️⃣ Install Multer

npm install multer

2️⃣ Setup Upload Route

File: routes/user.js

const express = require('express');
const router = express.Router();
const multer = require('multer');
const path = require('path');

// Konfigurasi penyimpanan
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + ext);
  }
});

const upload = multer({ storage });

router.post('/upload', upload.single('avatar'), (req, res) => {
  res.json({ filename: req.file.filename });
});

module.exports = router;
  

3️⃣ Tambahkan Folder Uploads

mkdir uploads

Dan pastikan Express bisa menyajikan file statis dari folder ini:

// index.js
app.use('/uploads', express.static('uploads'));
  

🖼️ Frontend – Form Upload

Contoh sederhana upload file ke backend:

import { useState } from 'react';
import axios from 'axios';

function UploadFoto() {
  const [file, setFile] = useState(null);
  const [preview, setPreview] = useState(null);

  const handleChange = (e) => {
    setFile(e.target.files[0]);
    setPreview(URL.createObjectURL(e.target.files[0]));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('avatar', file);

    try {
      const res = await axios.post('http://localhost:5000/api/user/upload', formData);
      alert('Upload berhasil! Nama file: ' + res.data.filename);
    } catch (err) {
      console.error(err);
      alert('Upload gagal');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleChange} /><br />
      {preview && <img src={preview} alt="preview" width="150" />}
      <br />
      <button type="submit">Upload Foto</button>
    </form>
  );
}

export default UploadFoto;
  

✅ Hasil Akhir

• User bisa pilih file dan melihat preview-nya
• File akan tersimpan di folder /uploads dan bisa diakses via URL
• Kamu bisa simpan path-nya di database user untuk tampilkan di profil

📦 Tambahan (Opsional)

• Validasi tipe file (gambar saja)
• Batasi ukuran file
• Simpan path foto ke MongoDB sebagai bagian dari data user

📌 Penutup

Dengan fitur ini, aplikasi todomu makin terasa personal. Di bagian selanjutnya, kita bisa tambahkan halaman profil user atau bahkan fitur dark mode biar tampilannya makin kece!

Sampai jumpa di Bagian 10 ya! 🚀

Ditulis oleh ruanginformatika.com