title: Multer: How to have the filename same with the one save in database
body: <p>Right now I'm able to basically <code>save</code> <strong>just</strong> the <code>name</code> or <code>originalname</code> of the image <code>file</code> in both:-</p>
  <ol>
  <li>database (using <code>mongoose</code>) and,</li>
  <li><code>image folder</code></li>
  </ol>
  <p>But this way of doing it will have <strong>flaw</strong> when trying to <code>delete</code> an <code>image</code>. For example if I try to <code>upload</code> the same <code>image</code> <strong>twice</strong>. <code>Multer</code> will not <strong>copy</strong> the new image (the same image) again in the <code>destination</code> <code>location</code> or <code>folder</code> (<code>/upload</code>). So if later on, I try to delete a <code>data</code> from:- (bare in mind that right now I've <strong>two data</strong> that have the same <strong>image name</strong>)</p>
  <ol>
  <li>database (using <code>mongoose</code>)</li>
  <li>delete the image affiliate with the data from folder <code>/upload</code></li>
  </ol>
  <p>The <strong>other</strong> <code>data</code> that use the <strong>same image</strong> will not have one anymore.</p>
  <p>So, I've tried putting <code>new Date().toISOString().replace(/[-T:\.Z]/g, &quot;&quot;)</code> on the <code>filename</code> on both the image saved in <code>local folder</code> <code>/upload</code> and <code>document</code> in <code>mongoDb</code>. But obviously that won't work cause the generated <code>date</code> slightly different for both case.</p>
  <p>Below is my current code:-</p>
  <ul>
  <li>Multer.js</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>// Mutler
  const multer = require('multer')
  // Path
  const path = require('path')
  // File Remove
  const fileRemove = require('fs')
  
  const {
    // File Base FOlder Location
    FILE_BASE_FOLDER_LOCATION = path.resolve(__dirname + '/', '../'),
    // Image Folder Location
    IMAGE_FOLDER_LOCATION = FILE_BASE_FOLDER_LOCATION + '/upload/',
  } = process.env
  
  // storage img
  const storageImgFile = multer.diskStorage({
    destination: (req, file, cb) =&gt; {
      cb(null, IMAGE_FOLDER_LOCATION)
    },
    filename: (req, file, cb) =&gt; {
      // renaming the image file to have the 'date' and the original file name 
      cb(null, new Date().toISOString().replace(/[-T:\.Z]/g, &quot;&quot;) + '-' + file.originalname)
    }
  })
  
  // filter img types
  const filterImgFile = (req, file, cb) =&gt; {
    const fileTypes = ['image/png', 'image/jpg', 'image/jpeg']
    
    if(fileTypes.includes(file.mimetype)) cb(null, true)
    else cb('Only .png .jpg and .jpeg format allowed!', false)
  }
  
  // Img FIle Upload Middleware
  const uploadImgFile = multer({
    storage: storageImgFile,
    filterImgFile: filterImgFile
    // limits: { fieldSize: 10000000000 }
  })
  
  // Img Removing Handler
  const handleImgRemove = (res, imgName) =&gt; {
    fileRemove.unlink(IMAGE_FOLDER_LOCATION + imgName, (err) =&gt; {
      if(err) {
        return res.status(500).json({
          success: false,
          error: `Failed at removing file from upload folder`,
          data: err
        })
      }
    })
  }
  
  module.exports = {
    imgFolderLocation: IMAGE_FOLDER_LOCATION,
    uploadImgFile,
    handleImgRemove,
  }
  </code></pre>
  <ul>
  <li><code>AddNewImage Route</code>:-</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>router.post('/add', uploadImgFile.single('file'), async(req, res) =&gt; {
    let { desc } = req.body
  
    const image = new Image({
      // the date will be slightly different or not same with the 'imagename' saved in 'local' destination
      imgName: new Date().toISOString().replace(/[-T:\.Z]/g, &quot;&quot;) + '-' + req.file.originalname,
      desc: desc
    });
  
    image.save()
    .then(res =&gt; {
  
      return res.status(200).json({
        success: true,
        count: res.length,
        data: res
      })
    })
    .catch(err =&gt; {
      console.log(err)
      return res.status(500).json({
        success: false,
        error: `Failed to upload new image!`,
        data: err
      })
    })
  })
  </code></pre>
  <ul>
  <li><code>DeleteImage Route</code>:-</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>router.delete('/delete/:id', async(req, res) =&gt; {
    await Image.findByIdAndDelete(req.params.id)
    .then(data =&gt; {
      // - remove image from upload folder
      handleImgRemove(res, data.imgName)
  
      return res.status(200).json({
        success: true,
        count: data.length,
        data: data
      })
    })
    .catch(err =&gt; {
      return res.status(500).json({
        success: false,
        error: `Failed to delete image from DB!`,
        data: err
      })
    })
  })
  </code></pre>
  <p>I'm hoping to get both (<code>imgName</code> saved in <code>mongoDb</code>) and <code>filename</code> saved in <code>local</code> destination folder <code>/upload</code> will be the same. But I can't. So how can I make sure that <code>both</code> of them will have the same <code>naming system or ways</code>?</p>