Download all images from a webpage

downloadWebpageImages.js

const IMAGE_EXTENSIONS = [".jpg", ".png", ".svg", ".webp", ".gif"]
const getFileExtension = url => `.${url.split('?')[0].split('.').pop()}`
const imageUrls = 
Array.from(
  document.querySelectorAll('img')
).map(({ src }) => ({src}))
.filter(({ src }) => {
  return src && IMAGE_EXTENSIONS.includes(getFileExtension(src))
})
.map(({src}, idx) => ({ src, filename: `Image-${idx}${getFileExtension(src)}`}))

function downloadFile(url, name) {
  fetch(url).then(res => res.blob()).then(res => {
      const link = document.createElement('a');
      link.setAttribute('download', name);
      const href = URL.createObjectURL(res);
      console.log(href)
      link.href = href;
      link.setAttribute('target', '_blank')
      link.click();
      setTimeout(() => {
          URL.revokeObjectURL(href)
      }, 0)
  })
}

imageUrls.forEach((img) => {
  downloadFile(img.src, filename)
})

it giving me an error "filename is not defined" i copied the all of the code without affecting it , why it giving me like this ?