Urgent help on multer profile pic upload

This is three days of trying to create upload profile picture,but I can’t seems to. Is either the says pug cannot render image on views or

Error: ENOTDIR: not a directory, open ‘/app/pictures/uploads/IMG-20210817-WA0002.jpg’
etc.please help my client need the work in two days thank you.

index.js

var express = require('express');
var router = express.Router();
var path = require("path");
//multer object creation
var multer  = require('multer')

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, path.join(__dirname + '/../pictures/uploads'));
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
  }
})
 
var upload = multer({ storage: storage })
 module.exports = function(app){
//GET home page. 
app.route("/").get(function(req, res, next) {
  res.render( path.join(__dirname + "/../views/index.pug"));
});
 
app.route("/profile").post(upload.single('avatar'),function(req, res) {
  console.log(req.file);
  res.send("File upload sucessfully.");
});
 }

index.pug

html
   head
    title nanas personal portfolio
    meta(name='description', content='Profile')
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='/public/style.css')
    header 
    div.profile-picture
      label choose/upload profile pic
      br
      form(action="/profile", accept="image/x-png,image/gif,image/jpeg",  method="post", enctype="multipart/form-data")
        input(type="file", id="file", name="avatar")
        br
        input(type="submit", value="upload")
        ```
PLEASE YOU CAN EDIT THE WORK IF POSSIBLE. OR SUGGESTIONS WITH CODE EXAMPLE CAN BE FINE