Force Showing The "Save As" Dialog Box When Downloading A File

Below code does save a file to the user's disk: function handleSaveImg(event){ const image = canvas.toDataURL(); const saveImg = document.createElement('a'); saveImg.href = i

Solution 1:

Yes, and it's called showSaveFilePicker().

This is part of the File System Access API, which is still a draft, but is already exposed in all Chromium browsers.

This API is quite powerful and will give your code direct access to the user's disk, so it is only available in secure contexts.

Once the Promise returned by this method resolve, you'll get access to an handle where you'll be able to access a WritableStream to which you'll be able to write your data.

It's a bit more complicated than download, but it's also a lot more powerful, since you can write as stream, not needing to have the whole data in memory (think recording a video).

In your case this would give

async function handleSaveImg(event){
  const image = await new Promise( (res) => canvas.toBlob( res ) );
  if( window.showSaveFilePicker ) {
    const handle = await showSaveFilePicker();
    const writable = await handle.createWritable();
    await writable.write( image );
    writable.close();
  }
  else {
    const saveImg = document.createElement( "a" );
    saveImg.href = URL.createObjectURL( image );
    saveImg.download= "image.png";
    saveImg.click();
    setTimeout(() => URL.revokeObjectURL( saveImg.href ), 60000 );
  }
}

Here is a live demo, (and the code).

Solution 2:

No.

You can specify a filename by assigning a string to the download property.

There is no way to persuade a browser to show a SaveAs dialog when it is configured to save downloads to a default folder without prompting. That is entirely under the control of the user.