everyone. Trying to unsuccesfully add mp3s into my zip file using the wonderful JSZIP lib. Right now, it only created the zip file with the correct file name, but the mp3 is always blank.
This is the code I have so far:
//init
var zip = new JSZip();
//add an mp3 titled "any other way" and decode binary to base64
zip.file("any other way.mp3", btoa("absolutepath/to/my/file/any_other_way.mp3"), {base64: true});
//generate zip
var content = zip.generate();
//download zip
location.href="data:application/zip;base64,"+content;
So, I ended up including another js file with the JSZIP utils in my project and called the following method and it downloaded fine on Chrome. However, if you want to make it work on IE and safari you will have to implement Downloadify (http://stuk.github.io/jszip/documentation/howto/write_zip.html#toc_3):
// loading a file and add it in a zip file
JSZipUtils.getBinaryContent("path/to/audio.mp3", function (err, data) {
if(err) {
throw err; // or handle the error
}
var zip = new JSZip();
zip.file("audio.mp3", data, {binary:true});
});
http://stuk.github.io/jszip-utils/documentation/api/getbinarycontent.html
Also, here is a link to the issue: https://github.com/Stuk/jszip/issues/176#issuecomment-57266207
Related
I am trying to upload a zip file that contains an HTML file inside to firebase storage. I am using JSzip to zip the file. Here is how my code looks right now:
DownloadHandler = () => {
var zip = new JSZip();
zip.file("story.html", `<body>${this.state.html}</body>`);
zip.generateAsync({ type: "blob" }).then(function (blob) {
storage.ref("story").put(blob);
});
};
When I run the current code it uploads the zip but inside the zip, I am getting a document file and not an HTML file. Also, when I click this document file it says it is encoded. How can I modify my code so that when the file zips it zips an HTML file inside?
Figured it out. In my storage.ref("story").put(blob); I just need to specify the extension of the file so it needed to be storage.ref("story.zip").put(blob);
I got a App File which is structured like a zip file.
Now I would like to extract all of the files in the app file.
I tried to convert the app to a zip file in the code (just copy and paste as zip file), but then it's a "SFX ZIP Archive", which most of the unzipper in node.js can't read.
For example AdmZip (error message):
rejected promise not handled within 1 second: Error: Invalid CEN
header (bad signature)
var AdmZip = require('adm-zip');
var admZip2 = new AdmZip("C:\\temp\\Test\\Microsoft_System.zip");
admZip2.extractAllTo("C:\\temp\\Test\\System", true)
So now i don't know how to deal with it, because I need to extract the files with all subfolder/subfiles to a specific folder on the computer.
How would you do this?
You can download the .app file here:
https://drive.google.com/file/d/1i7v_SsRwJdykhxu_rJzRCAOmam5dAt-9/view?usp=sharing
If you open it, you should see something like this:
Thanks for your help :)
EDIT:
I'm already using JSZip for resaving the zip file as a normal ZIP Archive. But this is a extra step which costs some time.
Maybe someone knows how to extract files to a path with JSZip :)
EDIT 2:
Just for you information: It's a VS Code Extension Project
EDIT 3:
I got something which worked for me.
For my solution I did it with Workers (Because parallel)
var zip = new JSZip();
zip.loadAsync(data).then(async function (contents) {
zip.remove('SymbolReference.json');
zip.remove('[Content_Types].xml');
zip.remove('MediaIdListing.xml');
zip.remove('navigation.xml');
zip.remove('NavxManifest.xml');
zip.remove('Translations');
zip.remove('layout');
zip.remove('ProfileSymbolReferences');
zip.remove('addin');
zip.remove('logo');
//workerdata.files = Object.keys(contents.files)
//so you loop through contents.files and foreach file you get the dirname
//then check if the dir exists (create if not)
//after this you create the file with its content
//you have to rewrite some code to fit your code, because this whole code are
//from 2 files, hope it helps someone :)
Object.keys(workerData.files.slice(workerData.startIndex, workerData.endIndex)).forEach(function (filename, index) {
workerData.zip.file(filename).async('nodebuffer').then(async function (content) {
var destPath = path.join(workerData.baseAppFolderApp, filename);
var dirname = path.dirname(destPath);
// Create Directory if is doesn't exists
await createOnNotExist(dirname);
files[index] = false;
fs.writeFile(destPath, content, async function (err) {
// This is code for my logic
files[index] = true;
if (!files.includes(false)) {
parentPort.postMessage(workerData);
};
});
});
});
jsZip is A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API.
link (https://www.npmjs.com/package/jszip)
example (extraction)
var JSZip = require('JSZip');
fs.readFile(filePath, function(err, data) {
if (!err) {
var zip = new JSZip();
zip.loadAsync(data).then(function(contents) {
Object.keys(contents.files).forEach(function(filename) {
zip.file(filename).async('nodebuffer').then(function(content) {
var dest = path + filename;
fs.writeFileSync(dest, content);
});
});
});
}
});
The file is a valid zip file appended to some sort of executable.
The easiest way is to extract it calling an unzipper such as unzipada.exe - free, open-source software available here. Pre-built Windows executables available in the Files section.
I'm using node.js and angular.js for my app and I'm trying to download files through the browser using Blob and fileSaver.js.
I've used these in other sections of my app to download text files and pdf files specifying the correct type when creating the Blob object without any problem, but in the current section I need to support any type of file and I don't know if it's possible.
For example, I've tried downloading an image file with and without type:image/png and the result was a corrupted image - inspecting it in a text editor and comparing it with the original file shows that many of the bytes were changed.
Here are the code snippets I use:
Server:
fs.readFile(/* snipped file path */, function(err, data){
if(err){
/* handle error */
}
else{
res.send(data);
}
});
Client:
$http.get(/* endPoint URL */)
.success(function(result){
var data = new Blob([result], {type: 'image/png'});
FileSaver.saveAs(data, filename);
});
A few questions:
Do I need to specify type for Blob? If so, do I need to specify it at server, too (it's a pain to determine it)? Can't I just skip it on both ends?
What causes the image test to result in corrupted file? Am I missing some content-type header or something?
Try adding {contentType: 'arraybuffer'} to your GET request and remove type from Blob definition, like so:
$http.get(/* endPoint URL */, {contentType: 'arraybuffer'})
.success(function(result){
var data = new Blob([result]);
FileSaver.saveAs(data, filename);
});
(Edit: deleted redundant type definition from Blob)
Is it possible to view the index.html file from a .zip archive using an iframe in HTML? Or does it exist some JS library that can do this?
Thanks in advance.
I just wanted to elaborate further the #Vohuman's comment because I think it's important.
From what I understand by the documentation of jszip library it can be done.
Read the zip file (by using JSZipUtils)
JSZipUtils.getBinaryContent('path/to/content.zip', function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
});
Source: https://stuk.github.io/jszip/documentation/howto/read_zip.html
Read it using:
var new_zip = new JSZip();
// more files !
new_zip.load(content);
// you now have every files contained in the loaded zip
new_zip.file("hello.txt").asText(); // "Hello World\n"
Source: https://stuk.github.io/jszip/documentation/examples.html (Scroll the bottom of the page (Read a zip file section))
Finally, create an iframe and put the html content into it.
$('#your_iframe').contents().find('html').html(htmlZipContent);
I have some problems with a Javascript zip lib. We are using the following lin in our project: https://github.com/nodeca/pako
Now I try the following zip a text from a string and put it iin a blob, so that the user may download it to disk. Sounds pretty simple but just do not get around it
binaryString = Zip.deflate(text, {to:'string'});
blob = new Blob([binaryString], {type:'application/zip'});
if(window.webkitURL) { // Chrome
window.open(window.webkitURL.createObjectURL(blob));
} else {
window.open(window.URL.createObjectURL(blob));
}
Has somebody an idea what I am doing wrong?