API to create ZIP (or any other kind of) archives?

Hi everyone!

I was wondering if there’s any built-in API for compressing multiple files together (e.g. multiple asset renditions) into a single archive (ZIP, tarball, etc) in Adobe XD?
One common use case is uploading files to a web server which would otherwise require them to be uploaded one by one.

If there’s no such API, I guess it makes sense to file a Feature Request?

Thank you!

There’s no API for this yet, but you should be able use a JS-only zip compressor module like https://www.npmjs.com/package/jszip. (I haven’t tried this yet, though.)

Definitely worth a feature request though!

1 Like

Thank you @kerrishotts ! I’ll take a look at possible options in Node.js land.

Are there any updates on that? As I understand Xd relies on zip a lot as xd file format is a zip.

FYI I’ve changed this topic to a feature request since it’s come up multiple times.

1 Like

@gdreyv Thanks for following up with us. This is in our backlog but please note that we generally prioritize feature requests with more votes.

@kerrishotts, jszip is not working, node modules not working either. Any other ideas ?

Works fine for me, what exactly doesn’t work?

import zip from "jszip";
const archiver = new zip();
const content = await file.read({ format: uxp.storage.formats.utf8 });
archiver.file("file-name.json", content);
const content = await archiver.generateAsync({ type: "uint8array", compression: "DEFLATE", compressionOptions: { level: 9 } });
await archive.write(content, { format: uxp.storage.formats.binary });

where archive and file are the uxp File instances.

1 Like

It should be mentioned here that this approach (the import syntax and simply importing "jszip" without a path requires some sort of bundling system (like webpack) to be in place.

Otherwise, @samodostal, you’ll have to save the “corresponding” JS file of the library somewhere in your plugin and refer to it with something like

const jszip = require('./libs/jszip/jszip');

It could also be that jszip actually depends ons some sort of build tool (I currently don’t have the time to check this, sorry), meaning you could only use it with such a build system in place.

I hope this helps,
Happy coding,

Thanks for replying,
We already figured it out. Basically, the same way you did with JSZip.

1 Like