Save As... dialog box in HTA

Question

I have an HTA file and I would like to make a function that saves a file. Is there any way in HTML, JavaScript or VBScript to open a Save As... dialog box so that the user can choose where and under what name they want to save the file?

Proably helpful: http://stackoverflow.com/questions/21559775/vbscript-to-open-a-dialog-to-select-a-filepath and http://stackoverflow.com/questions/4386124/how-can-i-use-the-common-save-as-dialog-from-vbscript, especially http://stackoverflow.com/a/4464323/18771 — Tomalak, May 23 '15 at 12:14

score 2 · Accepted Answer · edited Aug 21 '17 at 19:57

You can use GetSaveAsFileName method of Microsoft Excel Application object to open a Save As... dialog box.
The example below shows how to do this:

<html>
    <head>
        <title>Create text file</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="author" content="Javad">
        <script language="javascript">
            var excel = new ActiveXObject("Excel.Application");
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            var shell = new ActiveXObject("Shell.Application");

            function createTextFile(content)
            {
                event.returnValue = false;
                shell.MinimizeAll();
                var path = excel.GetSaveAsFileName(fso.GetAbsolutePathName("My text file"), "Text files (*.txt;*.log),*.txt;*.log,All files (*.*),*.*", 1, "Save As...");
                window.focus();

                if (!path) return;

                var ts = fso.OpenTextFile(path,2,true);
                ts.WriteLine(content);
                ts.Close();
            }
        </script>
        <HTA:Application windowstate="maximize">
    </head>
    <body>
        <form onsubmit="createTextFile(this.cnt.value)">
            Content of the text file: <input type="text" name="cnt" value="Hello."><br>
            <button type="submit">Create text file</button>
        </form>
    </body>
</html>

In the example above, there are a text field and a submit button in a form. The user should type something in the text field and click on the button. When the user clicks on the button, this program opens a Save As... dialog box and lets the user choose where he/she wants to save the text file.
Then this program creates a text file at the specified location, and writes the value of the field in the text file.

Note: When the Save As... dialog box is opened, it doesn't receive the focus. I don't know why. Maybe it's one of the bugs of Excel 2007. So the code shell.MinimizeAll() is written at Line 14, in order to remove the focus from all windows so the Save As... dialog box can receive the focus. As I said, there's this problem in Excel 2007. Maybe this bug is fixed in later versions of Excel.

"_Maybe this bug is fixed in later versions of Excel._" No, it's not, I have Excel 2016 and there is still the same bug. Anyway, other than that, it woks perfectly, thanks for the answer. — Donald Duck, Aug 21 '17 at 19:51

omegastripes · Answer 2 · 2015-10-19T18:25:20.077

Below is an example of HTA file that shows how to open choose file dialog using both JS and VBS with small "sandbox":

<html>
    <head>
        <script language="javascript">
            function OpenDialogJs() {
                output.innerText = d.object.openFileDlg(i.value, null, f.value, t.value);
            }
        </script>
        <script language="vbscript">
            Sub OpenDialogVbs()
                output.innerText = d.object.openFileDlg(i.value, , f.value, t.value)
            End Sub
        </script>
    </head>
    <body>
        <object id="d" classid="clsid:3050f4e1-98b5-11cf-bb82-00aa00bdce0b" width=0 height=0></object>
        Initial dir <input id="i" type="text" value="C:\*"></input><br>
        Filter <input id="f" type="text" value="All files (*.*)|*.*|Microsoft Word (*.doc;*.docx)|*.doc;*.docx"></input><br>
        Title <input id="t" type="text" value="Save As..."></input><br>
        <input type="button" value="Open / js" onclick="OpenDialogJs()"></input>
        <input type="button" value="Open / vbs" onclick="OpenDialogVbs()"></input>
        <div id="output"></div>
    </body>
</html>

This doesn't save the file, it opens an existing file. – Donald Duck Oct 19 '15 at 18:01 — Donald Duck, Oct 19 '15 at 18:01

score 0 · Answer 3 · edited May 23 '17 at 12:07

Assuming you are able to do the open and copy parts, here is an (untried in quite a while I'm afraid) routine demonstrating the use of the save as common dialogue in VBScript that should work in an HTA.

Sub SaveAs
    Dim oDLG
    Set oDLG=CreateObject("MSComDlg.CommonDialog") 
    With oDLG
        .DialogTitle="SaveAs"
        .Filter="Scripts|*.vbs;*.hta;*.wsf;*.js|Text Files|*.txt|All files|*.*"
        .MaxFileSize=255
        .ShowSave
        If .FileName<>"" Then
            FileName=.FileName
            Save
        End If
    End With
    Set oDLG=Nothing
    DisplayTitle
End Sub

Note however the comments from How can I use the common Save As dialog from VBScript? that indicate you may need to install either a license into the registry or track down and install Visual Studio or HTML Help. VS is now available in a number of free versions so this is much less of an issue that it used to be.

That doesn't work (see [here](http://stackoverflow.com/questions/4386124/how-can-i-use-the-common-save-as-dialog-from-vbscript/4464323#comment48917954_4464323) for more details). Is there any other solution which doesn't use MSComDlg.CommonDialog? — Donald Duck, May 23 '15 at 18:07
It does work as I tried it on my Windows 8.1 tablet as I answered. The trick is to satisfy the prerequisites I think. I have Visual Studio installed so that might be why it is working for me. — Julian Knight, May 24 '15 at 20:31

Donald Duck · Answer 4 · 2017-08-21T19:55:50.823

Here's a way to make an own Save As dialog box in hta:

var folder = new ActiveXObject("WScript.Shell").SpecialFolders("mydocuments");    //The default folder in which the file is saved, in this case My Documents
function saveAs(ext){    //ext is the file extension without a dot, for exampe: html, NOT .html
    var s = window.showModalDialog("saveas.hta?" + ext, window, "dialogWidth:609px; dialogHeight:386px");
    return s;
}

saveas.hta:

<html>
<head>
    <title>Save as</title>
    <meta http-equiv="MSThemeCompatible" content="yes" />
    <style type="text/css">
        body, td {
            margin: 8px;
            font-family: tahoma;
            font-size: 10pt;
        }

        button.normal {
            position: absolute;
            left: 11px;
            border: none;
            padding: 2px;
            background: none;
            width: 100%;
            font-size: 8pt;
        }

        button.hover {
            position: absolute;
            left: 11px;
            width: 100%;
            font-size: 8pt;
        }
    </style>
    <script type="text/javascript">
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var ws = new ActiveXObject("WScript.Shell");
        var span = new Array();

        window.onload = function(){
                document.body.getElementsByTagName("select")[0].innerHTML = "<option value='." + location.href.split("?")[1] + "' selected>" + location.href.split("?")[1] + " file (*." + location.href.split("?")[1] + ")</option>"
                if(!fso.FolderExists(window.dialogArguments.folder)){window.dialogArguments.folder = window.dialogArguments.defaultFolder}
                path.value = window.dialogArguments.folder;
                lit_fold(path.value);
                path.blur();
                namn.focus();
        }

        function spara(){
                if(!new ActiveXObject("Scripting.FileSystemObject").FileExists(((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "")) || confirmYesNo("The file " + ((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "") + " already exists.\nDo you want to replace it?")){
                        var retourne = new Object();
                        window.returnValue = ((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "");
                        window.close();
                }
        }
        function kolla(){
                if(new ActiveXObject("Scripting.FileSystemObject").FolderExists(path.value) || path.value == "file://"){
                        window.dialogArguments.folder = path.value;
                        lit_fold(path.value);
                }
                else{
                        alert("Could not find this folder");
                        path.value = window.dialogArguments.folder;
                }
        }

        function lit_fold(chemin){
                if(chemin == "file://"){
                        ok.disabled = !fso.FolderExists(ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts");
                        list.innerHTML = "";
                        span = new Array();
                        var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
                        for(i = 0; i < 26; i++){
                                if(fso.DriveExists(alphabet[i] + ":\\")){
                                        var l = span.length;
                                        span[l] = document.createElement("span");
                                        span[l].onclick = function(){
                                                var wse = window.event.srcElement;
                                                if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
                                                for(i = 0; i < span.length; i++){
                                                        span[i].style.background = "none";
                                                        span[i].style.color = "black";
                                                }
                                                wse.style.background = "rgb(1,153,255)";
                                                wse.style.color = "white";
                                        }
                                        span[l].ondblclick = function(){
                                                path.value = window.event.srcElement.value;
                                                kolla();
                                                lit_fold(path.value);
                                        }
                                        span[l].style.width = "100%";
                                        span[l].innerHTML = "<img src='drive" + (fso.GetDriveName(fso.GetSpecialFolder(0)) == alphabet[i] + ":" ? fso.GetDrive(alphabet[i] + ":").DriveType + "bis" : fso.GetDrive(alphabet[i] + ":").DriveType) + ".png' width='16' height='16' value='" + alphabet[i] + ":\\'/>&nbsp;" + fso.GetDrive(alphabet[i] + ":").VolumeName + " (" + alphabet[i] + ":)<br/>";
                                        span[l].value = alphabet[i] + ":\\";
                                        list.appendChild(span[l]);
                                }
                        }
                        if(fso.FolderExists(ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts")){
                                chemin = ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts";
                                var ff = new Enumerator(fso.GetFolder(chemin).subfolders);
                                for(; !ff.atEnd(); ff.moveNext()){
                                        var l = span.length;
                                        span[l] = document.createElement("span");
                                        span[l].onclick = function(){
                                                var wse = window.event.srcElement;
                                                if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
                                                for(i = 0; i < span.length; i++){
                                                        span[i].style.background = "none";
                                                        span[i].style.color = "black";
                                                }
                                                wse.style.background = "rgb(1,153,255)";
                                                wse.style.color = "white";
                                        }
                                        span[l].ondblclick = function(){
                                                path.value = window.event.srcElement.value;
                                                kolla();
                                                lit_fold(path.value);
                                        }
                                        span[l].style.width = "100%";
                                        span[l].innerHTML = "<img src='folder.png' width='16' height='16' value='" + ff.item() + "'/>&nbsp;" + fso.GetFolder(ff.item()).Name + "<br/>";
                                        span[l].value = new String(ff.item());
                                        list.appendChild(span[l]);
                                }
                                ff = new Enumerator(fso.GetFolder(chemin).files);
                                for(; !ff.atEnd(); ff.moveNext()){
                                        if(fso.getExtensionName(ff.item()) == location.href.split("?")[1]){
                                                var l = span.length;
                                                span[l] = document.createElement("span");
                                                span[l].onclick = function(){
                                                        var wse = window.event.srcElement;
                                                        if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
                                                        for(i = 0; i < span.length; i++){
                                                                span[i].style.background = "none";
                                                                span[i].style.color = "black";
                                                        }
                                                        wse.style.background = "rgb(1,153,255)";
                                                        wse.style.color = "white";
                                                        namn.value = wse.value.slice(0,-4);
                                                }
                                                span[l].ondblclick = spara;
                                                span[l].style.width = "100%";
                                                span[l].innerHTML = "<img src='file.png' width='16' height='16'/>&nbsp;" + fso.getBaseName(ff.item()) + "<br/>";
                                                span[l].value = new String(ff.item() + " ").slice(chemin.length,-1).replace("\\","");
                                                list.appendChild(span[l]);
                                        }
                                }
                        }
                }
                else{
                        ok.disabled = false;
                        list.innerHTML = "";
                        span = new Array();
                        var ff = new Enumerator(fso.GetFolder(chemin).subfolders);
                        for(; !ff.atEnd(); ff.moveNext()){
                                var l = span.length;
                                span[l] = document.createElement("span");
                                span[l].onclick = function(){
                                        var wse = window.event.srcElement;
                                        if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
                                        for(i = 0; i < span.length; i++){
                                                span[i].style.background = "none";
                                                span[i].style.color = "black";
                                        }
                                        wse.style.background = "rgb(1,153,255)";
                                        wse.style.color = "white";
                                }
                                span[l].ondblclick = function(){
                                        path.value = window.event.srcElement.value;
                                        kolla();
                                        lit_fold(path.value);
                                }
                                span[l].style.width = "100%";
                                span[l].innerHTML = "<img src='folder.png' width='16' height='16' value='" + ff.item() + "'/>&nbsp;" + fso.GetFolder(ff.item()).Name + "<br/>";
                                span[l].value = new String(ff.item());
                                list.appendChild(span[l]);
                        }
                        ff = new Enumerator(fso.GetFolder(chemin).files);
                        for(; !ff.atEnd(); ff.moveNext()){
                                if(fso.getExtensionName(ff.item()) == location.href.split("?")[1]){
                                        var l = span.length;
                                        span[l] = document.createElement("span");
                                        span[l].onclick = function(){
                                                var wse = window.event.srcElement;
                                                if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
                                                for(i = 0; i < span.length; i++){
                                                        span[i].style.background = "none";
                                                        span[i].style.color = "black";
                                                }
                                                wse.style.background = "rgb(1,153,255)";
                                                wse.style.color = "white";
                                                namn.value = wse.value.slice(0,-4);
                                        }
                                        span[l].ondblclick = spara;
                                        span[l].style.width = "100%";
                                        span[l].innerHTML = "<img src='file.png' width='16' height='16'/>&nbsp;" + fso.getBaseName(ff.item()) + "<br/>";
                                        span[l].value = new String(ff.item() + " ").slice(chemin.length,-1).replace("\\","");
                                        list.appendChild(span[l]);
                                }
                        }
                }
        }

        document.onkeydown = function(){
                if(window.event.keyCode == 13){
                        spara();
                }
                if(window.event.keyCode == 27){
                        window.close();
                }
                if(window.event.keyCode == 116){
                        lit_fold(path.value);
                }
        }
    </script>
</head>
<body bgcolor="buttonface" ondragstart="return false">
    <table width="100%">
        <tr>
            <td width="15%">Folder:</td>
            <td width="85%"><input type="text" id="path" onchange="kolla()" style="width:100%" />
        </tr>
        <tr height="258px">
            <td valign="top">
                <button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = ws.SpecialFolders('Desktop'); kolla()" title="Desktop" style="top:40px"><img src="desktop.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[0].className='hover'" onmouseout="document.body.getElementsByTagName('button')[0].className='normal'" /><br />Dektop</button><br />
                <button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = ws.SpecialFolders('MyDocuments'); kolla()" title="My documents" style="top:90px"><img src="mydocs.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[1].className='hover'" onmouseout="document.body.getElementsByTagName('button')[1].className='normal'" /><br />My documents</button><br />
                <button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = 'file://'; kolla()" title="Computer" style="top:140px"><img src="computer.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[2].className='hover'" onmouseout="document.body.getElementsByTagName('button')[2].className='normal'" /><br />Computer</button>
            </td>
            <td><div id="list" style="width:100%; height:100%; background:white; overflow:scroll; padding:4px"></div></td>
        </tr>
        <tr>
            <td>File name:</td>
            <td><input type="text" id="namn" style="width:100%" onfocus="for(i = 0; i < span.length; i++){span[i].style.background = 'none'; span[i].style.color = 'black'}" /></td>
        </tr>
        <tr>
            <td>Type:</td>
            <td>
                <select id="type" style="width:100%"></select>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td style="text-align:right">
                <button id="ok" onclick="spara()" style="width:94px">Save</button>&nbsp;&nbsp;&nbsp;
                <button onclick="window.close()" style="width:86px">Cancel</button>
            </td>
        </tr>
    </table>
</body>
</html>

You can make your own icons or download these:

computer.png:

desktop.png:

drive0.png:

drive1.png:

drive2.png:

drive2bis.png:

drive3.png:

drive4.png:

drive5.png:

file.png:

folder.png:

mydocs.png:

Save As... dialog box in HTA

4 Answers4