Extract Sketch file using JavaScript

Question

The purpose is to extract the contents of a .sketch file.

I have a file with the name myfile.sketch. On renaming the file extension to myfile.zip and extracting the same in Finder, I'm able view the files within. I tried doing the same on the server using Node.js by renaming the file extension to .zip. I wasn't able to extract the files, rather I got some ZIP files within the files.

var oldPath = __dirname+'/uploads/myfile.sketch',
newPath = __dirname+'/uploads/myfile.zip';

fs.rename(oldPath, newPath, function (err) {
console.log('rename callback ', err);
});

Is it possible to extract a non-ZIP file using frameworks like JSzip?

Just to confirm I understand right, you're asking about how to read the contents that are inside of a .sketch file? Isn't a .sketch file an image-based format? — Jeffrey
– Jeffrey, Commented Dec 27, 2017 at 7:27
.sketch file has a package of contents in it.. folders, images and json files within it — Redmond Seyer
– Redmond Seyer, Commented Dec 27, 2017 at 7:33

herrbischoff · Accepted Answer · 2017-12-27 07:50:12Z

2

As a .sketch file is essentially a ZIP file, the extension does not matter. Any tool that is capable of unpacking a ZIP file will work.

You can verify this with the file command:

$ file myfile.sketch
myfile.sketch: Zip archive data, at least v1.0 to extract

As you are working on the server already, there is nothing stopping you from just using the OS's command line tools like unzip.

Like this:

const util = require('util');
const exec = util.promisify(require('child_process').exec);

async function unzip() {
  const filename = 'myfile.sketch'
  const { stdout, stderr } = await exec('unzip ' + filename);
  console.log('stdout:', stdout);
  console.log('stderr:', stderr);
}

unzip();

Doing it with JSZip is straight-forward as well:

var fs = require('fs');
var JSZip = require('jszip');

new JSZip.external.Promise(function (resolve, reject) {
  fs.readFile('myfile.sketch', function(err, data) {
    if (err) {
      reject(e);
    } else {
      resolve(data);
    }
  });
}).then(function (data) {
  return JSZip.loadAsync(data);
})

edited Dec 27, 2017 at 7:50

answered Dec 27, 2017 at 7:29

herrbischoff

3,3561 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Redmond Seyer Over a year ago

Thanks this works.. where should I mention the directory for the file to be extracted? Now I have the files extracted to the root folder :(

herrbischoff Over a year ago

You can get all command line options by either running unzip -h or man unzip. The argument you are looking for is -d.

herrbischoff Over a year ago

If you feel that my answer helped you, you could accept my answer.

Nah Over a year ago

@herrbischoff I am tyring your jsZip solution to extract the Sketch file, but I am not sure where to output it's unzipped/extracted content. I have see the jsZip official API but can't find how to finally output the final content. I can see the bugger output however in console when do console.log(), but don't know how to output it to any folder.

herrbischoff Over a year ago

@MuhammadHannan: fs.write() / fs.writeFile()?

Collectives™ on Stack Overflow

Extract Sketch file using JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related