Cara Upload File Image di Next JS 13

Next.js 13 adalah salah satu kerangka kerja (framework) JavaScript yang sangat populer untuk mengembangkan aplikasi web modern. Dengan kemampuannya yang kuat dalam pengelolaan tampilan dan navigasi, Next.js adalah pilihan yang sangat baik untuk mengembangkan aplikasi web yang memerlukan upload file gambar. Dalam artikel ini, kita akan membahas cara mengupload file gambar di Next.js 13.

Persiapan Proyek

Sebelum memulai, pastikan Anda telah menginisialisasi proyek Next.js Anda. Jika belum, Anda dapat membuatnya dengan perintah berikut:

npx create-next-app nextjs-upload-file-image
cd nextjs-upload-file-image

Instalasi Dependencies

Langkah berikutnya adalah menginstal beberapa dependencies yang diperlukan untuk mengelola upload file gambar. Anda perlu menginstal multer untuk mengelola unggahan file, dan formidable untuk mengurai permintaan unggahan. Instal dependensi ini dengan perintah berikut:

npm install multer formidable

Membuat Component Upload

Anda dapat membuat component yang memungkinkan pengguna untuk memilih dan mengunggah gambar. Pertama buat file di pages/upload.js.

Selanjutnya, import React dan dependensi yang diperlukan:

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

Kode ini mengimpor modul React, useState dari React untuk mengelola state komponen, dan axios untuk melakukan permintaan HTTP ke API Route di server.

Kemudian, buat komponen ImageUpload:

function ImageUpload() {
  const [file, setFile] = useState(null);
}

export default ImageUpload;

Di sini, Anda mendefinisikan komponen ImageUpload. Anda menggunakan useState untuk membuat state file yang akan digunakan untuk menyimpan file gambar yang akan diunggah.

Setelah itu, buat fungsi handleFileChange di dalam ImageUpload().

const handleFileChange = (e) => {
  const selectedFile = e.target.files[0];
  setFile(selectedFile);
};

Ini adalah event handler yang akan dipanggil ketika pengguna memilih file gambar yang akan diunggah. Fungsi ini mengambil file yang dipilih oleh pengguna dan menyimpannya dalam state file menggunakan setFile.

Selanjutnya, buat fungsi handleUpload yang berfungsi mengirim file gambar ke API Route di server.

const handleUpload = async () => {
    const formData = new FormData();
    formData.append('image', file);

    try {
      await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      alert('File berhasil diunggah');
    } catch (error) {
      if (error.response) {
        alert('Terjadi kesalahan saat mengunggah file: ' + error.response.data.message);
      } else if (error.request) {
        alert('Terjadi kesalahan saat mengirim permintaan ke server.');
      } else {
        alert('Terjadi kesalahan: ' + error.message);
      }
    }
};

Di dalam return, Anda membuat elemen input tipe file yang memungkinkan pengguna memilih file gambar. Anda juga membuat tombol “Upload Image” yang memanggil handleUpload saat diklik.

return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload Image</button>
    </div>
);

Membuat API Route untuk Upload

Anda perlu membuat API Route di Next.js untuk menangani permintaan unggahan. Buat file upload.js dalam direktori pages/api:

import formidable from 'formidable';
import path from 'path';

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async (req, res) => {
  const form = new formidable.IncomingForm();
  form.uploadDir = path.join(process.cwd(), 'public/uploads');
  form.keepExtensions = true;

  form.parse(req, (err, fields, files) => {
    if (err) {
      return res.status(500).json({ error: 'File upload failed.' });
    }

    const imagePath = files.image.path;

    return res.status(200).json({ imagePath });
  });
};

Menampilkan Gambar yang Diunggah

Terakhir, Anda dapat menampilkan gambar yang diunggah dengan mengambilnya dari server atau database Anda. Anda dapat menggunakan React Query untuk mengelola permintaan data ini dan menampilkannya di component yang sesuai.

Itulah langkah-langkah dasar untuk mengupload file gambar di Next.js 13. Dengan menggunakan kombinasi React Query, API Route, dan komponen React, Anda dapat dengan mudah mengelola upload file gambar dalam aplikasi Next.js Anda. Pastikan untuk menyesuaikan dan memodifikasi kode sesuai dengan kebutuhan proyek Anda.