Not sure if this is silly to ask but couldn't find anything online:
Users on my site can save a file to their disk:
const saveFile = async blob => {
try {
const handle = await window.showSaveFilePicker({
types: [
{
description: "Mp3 file",
accept: { "audio/mp3": [".mp3"] },
},
],
})
const writable = await handle.createWritable()
await writable.write(blob)
await writable.close()
return handle
} catch (err) {
console.error(err.name, err.message)
}
}
As you can see, this file is not on any server but comes from a blob. It works fine, but I would like to suggest a better filename than simply Untitled.mp3, so that ideally the user just needs to press the return key and doesn't need to worry about naming the file (but could do so, if she wanted to).
Is this possible at all?
I was looking at this and this but couldn't find anything helpful!
I know that in Chrome 91 I can do:
const handle = await self.showSaveFilePicker({
suggestedName: 'song.mp3',
types: [{
description: 'Mp3 file',
accept: {
'audio/mp3': ['.mp3'],
},
}],
});
- but isn't there something that would work for more browsers & also older Chrome versions?
As of Chrome 91 you can use
suggestedName, as documented in our article. Unfortunately there is no support for this parameter on version of Chrome older than 91.Alternative 1
For the
<a download="suggested_name.txt" href="blob:…">workaround, the file name is taken from thedownloadattribute's value, as documented.Alternative 2
If you want to (or can) involve a server, you can use the
Content-Dispositionheader, as outlined on MDN.