UWP Save zip file to disk
I have a UWP app written in HTML / Javascript and they are unable to save a zip file made from JSZip. In particular, writing to disk is where I hung up.
In the Microsoft docs, I see there are WriteBufferAsync, WriteBytesAsync, WriteLinesAsync, and WriteTextAsync. I'm not sure which one I need. Also JSZip can generate various types such as base64, binarystring, uint8array, arraybuffer and blob. I just don't know what combination I need to write this zip file to the user's drive.
Below is my code:
savePNGButton.addEventListener('click', function (e) {
var zip = new JSZip();
if (WatermarkText === ""){
ZipFolder = zip.folder("ImageFolder");
} else {
ZipFolder = zip.folder(WatermarkText);
}
$(".WatermarkPhoto").each(function(index) {
imgsrc = this.src;
var DataURL = imgsrc.replace('data:image/png;base64,', '');
ZipFolder.file(WatermarkText + index + ".png", DataURL, { base64: true });
});
zip.generateAsync({ type:"blob"})
.then(function (content) {
console.log(content);
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
savePicker.fileTypeChoices.insert("ZIP archive", [".zip"]);
savePicker.suggestedFileName = WatermarkText+".zip";
savePicker.pickSaveFileAsync().then(function (file) {
if (file) {
Windows.Storage.CachedFileManager.deferUpdates(file);
Windows.Storage.FileIO.writeTextAsync(file, content).done(function () {
Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
console.log("File " + file.name + " was saved.");
} else {
console.log("File " + file.name + " couldn't be saved.");
}
});
});
} else {
console.log("Operation cancelled.");
}
});
});
});
source to share
If anyone comes across this, I found this link which sent me in the right direction https://blog.appliedis.com/2013/09/18/zipping-and-unzipping-files-in-a-winjs-application/ I used the uint8array from JSZip along with file streaming and WriteBytesAsync from the FileIO class. Below is the last block of code I used for zip and presented the save file dialog.
savePNGButton.addEventListener('click', function (e) {
var zip = new JSZip();
if (WatermarkText === ""){
ZipFolder = zip.folder("Images");
} else {
ZipFolder = zip.folder(WatermarkText);
}
$(".WatermarkPhoto").each(function(index) {
imgsrc = this.src;
var DataURL = imgsrc.replace('data:image/png;base64,', '');
ZipFolder.file(WatermarkText + index + ".png", DataURL, { base64: true });
});
zip.generateAsync({ type: "uint8array", streamFiles:"true"})
.then(function (content) {
console.log(content);
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
savePicker.fileTypeChoices.insert("ZIP archive", [".zip"]);
savePicker.suggestedFileName = WatermarkText + ".zip";
savePicker.pickSaveFileAsync().then(function (file) {
if (file) {
Windows.Storage.CachedFileManager.deferUpdates(file);
Windows.Storage.FileIO.writeBytesAsync(file, content).done(function () {
Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
console.log("File " + file.name + " was saved.");
} else {
console.log("File " + file.name + " couldn't be saved.");
}
});
});
} else {
console.log("Operation cancelled.");
}
});
});
});
source to share