Ask user where to save file with Node.js

filedialog, javascript, node-webkit, save-dialog

Solution

The File Dialog page in the Wiki mentions a save dialog file input

nwsaveas will open a save as dialog which let user enter the path of a file, and it's possible to select a non-exist file which is different with the default file input tag:

You could use that in an custom dialog like a modal or so to query the user for that input.

Very basic example based on your provided code:

<script>
  var fs = require('fs');

  var buildFile = function(name, value) {
    var img = new Buffer(value, 'base64');
    fs.writeFile(name, img, function(err) {
      if(err) {
        console.log(err);
      } else {
        console.log("The file was saved!");
      }
    });
  }

  function wait() {
    $('#close-popup').click();
    setTimeout(function() {screen_shot()}, 10);
  }

  function screen_shot() {
    html2canvas($('body'), {
      onrendered: function(canvas) {
        var img = canvas.toDataURL("image/png").split(',')[1];
        var decodedImg = window.atob(img);
        query_for_save_path(function (save_path) {
          buildFile(save_path, img);
          alert('Screenshot saved to: ' + save_path);
        });
      }
    });
  }

  function query_for_save_path(cb) {
    $('#dialog').show();
    $('#dialog input').one('change', function (event) {
      cb($(this).val());
    });
  }
</script>

<a href="#" onclick="wait();" data-role="button" data-theme="j">Screen shot</a>

<div id="dialog" style="display:none;">
    Choose a path to save your shot:
    <input type="file" nwsaveas />
</div>

Problem

I'm creating an app using node-webkit, so there's a lot of javascript. I have written a node.js function that will take a screen shot and save it to the disk, however, it saves it to the project root dir and I would like to prompt the user to choose a save location, but I cannot find a way to create a save file dialog. Current code: screen_shot.js: ``` var fs = require('fs'); exports.buildFile = function(name, value) { var img = new Buffer(value, encoding='base64'); fs.writeFile(name, img, function(err) { if(err) { console.log(err); } else { console.log("The file was saved!"); } }); }; ``` index.html: ``` ... <script> var sc= require('screen_shot'); function wait() { $('#close-popup').click(); setTimeout(function() {screen_shot()}, 10); } function screen_shot() { html2canvas($('body'), { onrendered: function(canvas) { var img = canvas.toDataURL("image/png").split(',')[1]; var decodedImg = window.atob(img); sc.buildFile("sc.png", img); } }); } </script> ... <a href="#" onclick="wait();" data-role="button" data-theme="j">Screen shot</a> ``` The wait function is just to give the popup I'm using time to close before the screenshot is taken. I have been reading the node-webkit file dialog doc but it is either not what I'm looking for or I cannot make it work properly.

Original source