ExpressJS Lanjutan #2 | Menggunakan Multer untuk Upload File

Pengantar

Dalam pengembangan aplikasi web, seringkali kita perlu mengizinkan pengguna untuk mengunggah file, seperti gambar produk dalam aplikasi e-commerce. Dalam artikel ini, kita akan membahas cara menggunakan multer untuk mengunggah file dan membuat endpoint API untuk membuat produk baru beserta file gambar.

1. Instalasi Multer

Pertama, kita perlu menginstal multer sebagai middleware untuk menangani pengunggahan file.

npm install multer

2. Membuat File fileUpload.js

Buatlah file fileUpload.js dalam folder utils dengan kode berikut:

const multer = require('multer');
const FILE_TYPE = {
    'image/png': 'png',
    'image/jpeg': 'jpeg',
    'image/jpg': 'jpg'
};
const storageFile = multer.diskStorage({
    destination: function (req, file, cb) {
        const isValidFormat = FILE_TYPE[file.mimetype];
        let uploadError = new Error("Invalid File Type");
        if (isValidFormat) {
            uploadError = null;
        }
        cb(uploadError, 'public/uploads');
    },
    filename: function (req, file, cb) {
        const filename = file.originalname.split(' ').join('-');
        const extension = FILE_TYPE[file.mimetype];
        const uniqueFilename = filename + '-' + Date.now() + '.' + extension;
        cb(null, uniqueFilename);
    }
});

exports.uploadOption = multer({
    storage: storageFile
});

3. Membuat File productController.js

Berikutnya, kita akan membuat controller productController.js dalam folder controllers dengan kode untuk membuat produk baru beserta file gambar:

const asyncHandle = require('../middleware/asyncHandle');
const { Product } = require("../models");

exports.createProduct = asyncHandle(async (req, res) => {
    let { name, description, price, categoryId, stock } = req.body;
    const file = req.file;
    if (!file) {
        res.status(400);
        throw new Error("No image uploaded");
    }
    const fileName = file.filename;
    const pathFile = `${req.protocol}://${req.get("host")}/public/uploads/${fileName}`;
    const newProduct = await Product.create({
        name,
        description,
        price,
        categoryId,
        stock,
        image: pathFile
    });
    res.status(201).json({
        status: "success",
        message: "Product added successfully",
        product: newProduct
    });
});

4. Membuat File product.js dalam Folder routes

Selanjutnya, kita akan membuat file product.js dalam folder routes untuk menangani endpoint API terkait produk:

const express = require("express");
const router = express.Router();
const { createProduct } = require("../controllers/productController");
const { uploadOption } = require("../utils/fileUpload");

router.post("/", uploadOption.single('image'), createProduct);
module.exports = router;

5. Update File app.js

Terakhir, kita perlu mengupdate file app.js untuk menambahkan routing untuk produk dan middleware untuk menangani file statis yang diunggah:

const express = require('express');
const app = express();
const dotenv = require('dotenv');
const cors = require('cors');
const CategoriesRouter = require('./routes/catagories');
const AuthRouter = require('./routes/auth');
const ProductRouter = require('./routes/product');
const morgan = require('morgan');
const { errorHandler, notFound } = require('./middleware/errorMiddleware');
const cookieParser = require('cookie-parser');
const path = require('path');

dotenv.config();
// Middleware
app.use(express.json()); // Parse JSON bodies
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded bodies
app.use(cookieParser()); // Parse cookies
app.use(morgan('dev')); // Logging middleware
app.use(cors()); // Enable CORS
app.use('/public/uploads', express.static(path.join(__dirname, 'public/uploads'))); // Serve static files
// Routing
app.use('/api/v1/categories', CategoriesRouter);
app.use('/api/v1/auth', AuthRouter);
app.use('/api/v1/products', ProductRouter);
// Error handling
app.use(notFound);
app.use(errorHandler);
// Server
const port = process.env.PORT || 3000; // Use port from environment variable or default to 3000
app.listen(port, () => {
    console.log(`Server berjalan di port ${port}`);
});

Kesimpulan

Dengan langkah-langkah di atas, kita telah berhasil menggunakan multer untuk mengunggah file pada aplikasi ExpressJS. Kita juga telah membuat endpoint API untuk membuat produk baru beserta file gambar terkait.

Penggunaan multer memungkinkan kita untuk mengunggah file gambar produk ke server, dan menyimpan informasi produk beserta lokasi file gambar di database. Ini merupakan langkah penting dalam pengembangan aplikasi e-commerce yang membutuhkan pengelolaan produk dengan gambar.

Jika Anda ingin melihat contoh kode yang lengkap, Anda dapat mengunjungi repositori GitHub saya di sini.

Referensi:

• https://expressjs.com/en/starter/static-files.html
• https://www.npmjs.com/package/multer