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 = image;
  saveImg.download= saveAs;
  saveImg.click();
}

if(saveMode){
  saveMode.addEventListener("click", handleSaveImg);
}

It uses an <a> tag to save some data (in my case, an image exported from a <canvas>).

But this saves directly to the disk, with no prompt asking where to save the file, nor under which name.

I want to force the displaying of the "Save as" dialog box, so that the user has to choose where they'll save that file.
Is there any way?

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 = image;
  saveImg.download= saveAs;
  saveImg.click();
}

if(saveMode){
  saveMode.addEventListener("click", handleSaveImg);
}

It uses an <a> tag to save some data (in my case, an image exported from a <canvas>).

But this saves directly to the disk, with no prompt asking where to save the file, nor under which name.

I want to force the displaying of the "Save as" dialog box, so that the user has to choose where they'll save that file.
Is there any way?

• javascript
• canvas
• save-as

• Does this answer your question? How to make a browser display a "save as dialog" so the user can save the content of a string to a file on his system? – user13976487 Commented Jun 2, 2021 at 11:40
• Does this answer your question? Using HTML5/JavaScript to generate and save a file – oligofren Commented Jun 2, 2021 at 11:40

2 Answers 2

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 plicated 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).

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.