How to change the automatically populated file name in the browser's Save As dialog?

Question

Requirements for a closed system : Firefox, client side code only, HTML, CSS and JavaScript/Jquery but no other open source libraries.

Need to save a complete web page. The built in functionality works great, except that I need to set the file name dynamically.

Currently, the built in Save as mechanism populates the file name (in the save as dialog) with the html title attribute.

However, I need the file name to be dynamically populated each time. (ie File1, File2, File3) - in other words I need to set the file name on each save via some code.

How do I do this leveraging the browser or writing it all myself?

Thank You!

EDIT

Is there an event that notices when save as is clicked and change the title right then?

Worst case, can I implement my own save as dialog?

EDIT 2
I see the command to save as can be called in IE document.execCommand('SaveAs',), is there an equivalent in FF? If I open the save as dialog via java script, I assume right then I would change the title?

Answer 1

You cannot do this. It is not scriptable. The file dialog is part of the OS that the browser hooks into.

Answer 2

Try using the new html5 download attribute:

<a href="http://..." donwload="someFilename">Click here</a>

If filename is sent in response header, browser will prefer that. But if not, browser will use filename specified in download attribute.

You can even make a script to automatically display the dialog:

//create a element
var a = document.createElement('a');
a.appendChild(document.createTextNode('Click here'));
a.href = 'http://some/url';
a.download = 'filename';

//Put filename in clipboard. If download filename is ignored, user can simply paste it
var aux = document.createElement('input');
aux.setAttribute('value', a.download);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);

document.body.insertBefore(a, document.body.firstElementChild);
a.dispatchEvent(new MouseEvent('click'));
//Optionally you can remove the link as well (uncomment line bellow)
//document.body.removeChild(a);

Answer 3

Perhaps using an Auto Increment (AI) field in the DB which you are saving the file names to would do the trick.

1. Create a field for the file names <filename> in your DB table.
2. Define it as Not Null (NN) and as Auto Increment (AI) - this will give each new record a value in this field as a running number.
3. In your PHP file, right before saving, create a new record in the DB table and then pull out the auto-created field <filename> to a variable <$newname> .
4. Save the file with PHP as you would, with <$newname> followed by the file extension.

• You mentioned this is closed system, though if you could set a local MySQL server and then this would work. (Also this might help others who don't happen to use a closed system, heh...)