Express js upload file Multer js

mkdir express_upload
cd express_upload
npm init -y

kita butuh multer

npm install express dotenv prisma multer
npx prisma init
npm i -D @babel/core @babel/node @babel/preset-env

kita akan gunakan post man,

kita buat file .babelrc

//.bablerc

{
    "presets": ["@babel/preset-env"]
}

selanjutnya kita akan buat folder src

selanjutnya kita akan hapus test diganti dengan dev

//package.json

{
  "name": "express_upload",
  "version": "1.0.0",
  "description": "",
  "main": "/src/index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node ./src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "multer": "^1.4.5-lts.1",
    "prisma": "^4.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2"
  }
}

masuk ke controller buat file upload_controller

//upload_controller.js

import {request, response} from "express"

const upload_create = async (req = request, res = response)=>{
    try{
        const data = await req.body
        return res.status(201).json({
            success : true,
            data : data
        })
    }catch(err){
        return res.status(500).json({
            success : false,
            error : err.message
        })
    }
}
export default upload_create

selanjutnya kita akan buat upload_mdw.js

//upload_mdw.js

import multer from "multer";

const storage =multer.diskStorage({
    destination : (req, file, cb)=>{
        cb(null, './public/uploads')
    },
    filename : (req, file, cb)=>{
        cb (null, 'test.png')
    }
})

const upload_mdw = multer({storage : storage})

export default upload_mdw

selanjutnya kita akan buat rootnya

//upload_route.js

import express from 'express'
import upload_create from '../controllers/upload_controller'
import upload_mdw from '../middleware/upload_mdw'

const upload_route = express.Router()

//create upload
upload_route.post("/api/upload/create", upload_mdw.single('file'), upload_create)

export default upload_route

tambahkan 8000

//.env

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
PORT=8000

selanjutnya kita ke index.js

//index.js

import express from 'express'
import env from 'dotenv'
import upload_route from './routes/upload_route'
env.config()

const app = express()
const {PORT} =process.env

app.use(express.static("../public"))
app.use(express.json())

app.use(upload_route)

app.listen(PORT, ()=>{
    console.info('server running...')
})

jalankan aplikasinya

npm run dev

selanjutnya kita akan ke postman, buat create new collection , upload folder, add request, post, lanjut ke body, klik rubah jadi form-data, uncentang description, key isi dengan file, kemudian valuenya, select files

berhasil menampilkan file upload, selanjutnya kita akan buat 2 folder public/uploads kosongan nanti akan terisi ketika kitta klik upload dari post man

kenapa nama file nya puploads karena folder yang kita buat nama filesnya adalah ./public/uploads ok, sekarang kita ke post man

sekarang file uploads terisi test.png.

dan kalau kita upload lagi maka akan menghasilkan test.png lagi dan niban data yang lama.

kita ganti 'test.png' menjadi original name

//upload_mdw.js

import multer from "multer";
//buat storagenya
const storage =multer.diskStorage({
    destination : (req, file, cb)=>{
        cb(null, './public/uploads')
    },
    filename : (req, file, cb)=>{
        cb (null, file.originalname) //ganti file ini
    }
})
const upload_mdw = multer({storage : storage})
export default upload_mdw