title: javascript : download file from server : open file dialog to choose folder to save file
body: <p>Want to download a file , the "save folder dialog' should pop up to chose the folder where to save the file.</p>
  
  <p>I tried with <code>window.location</code>, <code>window.location.assign</code>, <code>widow.open</code> functions.
  Everything leads to opening a fresh page! and cant see any "save folder dialog" popped up!</p>
  
  <p>downloading  file name is with extension .cfg, the file can be either binary or Json(text file). Will there be any difference if the file being binary or text?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
  
    $("#DownloadFile").click(function() {
      // // hope the server sets Content-Disposition: attachment!
      var  urlData= window.location.protocol + "//" +       window.location.host + "/" + "download/testdown.cfg";
      alert("download file: " + urlData);
      retval = fileExists(urlData);
      if(retval) {
        alert("file exists !!");
        window.location = 'download/testdown.cfg';
        // window.location.assign(urlData);
        // window.open(urlData, 'Download');  
  
      }else{
        alert("File not exists !");
      }
    });
  
  
  
  
  
    function fileExists(url) {
      alert(" url : " + url);
      if(url){
        alert(" url : " + url);
        var req = new XMLHttpRequest();
        req.open('HEAD', url, false);
        req.send();
        // return req.status==200;
        return true;
      } else {
        return false;
      }
    }
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table table-condensed table-bordered table-striped volumes tabcenter" 
         style="align:center; margin:5px; width:98%"&gt;
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div class="row"&gt;
            &lt;h1&gt;Choose File Type&lt;/h1&gt;
            &lt;label class="radio-inline"&gt;
              &lt;input name="radioGroup" id="radio1" value="option1" type="radio"&gt; Binary Data
            &lt;/label&gt;
            &lt;label class="radio-inline"&gt;
              &lt;input name="radioGroup" id="radio2" value="option2" checked="" type="radio"&gt; Json Data
            &lt;/label&gt;
  
          &lt;/div&gt;  
        &lt;/td&gt;
  
        &lt;td &gt; 
          &lt;button type="submit" id="DownloadFile" &gt;Download!&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>