View HTML file in zip acrhive from an iframe - javascript

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);

Related

How to upload a zip to firebase storage

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);

Extract a non ZIP file to files on disk?

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.

Programmatically download and insert README.md with photos into HTML

I have a personal website written in AngularJS and NodeJS, and in the tech projects section I would like to embed README.md from a project on GitHub my account (the same way github.com) does it. I don't think iframe<> works for md files. So I have tried converting to HTML and PDF.
The second part of the README.md I want looks like this:
In particular, I would like to import the README.md files into my HTML. I have found two ways to do it:
Download the file, and convert to HTML.
var md_to_html = function(src, dest) {
// Get the markdown
var md = fs.readFileSync(src, "utf8");
var converter = new Remarkable();
var html = converter.render(md);
fs.writeFile(dest, html, function(err) {
if (err) {
return console.log(err);
}
console.log(dest + " was saved!");
});
}
Or Download the file, and convert to PDF.
var md_to_pdf = function(src, dest) {
fs.createReadStream(src)
.pipe(markdownpdf())
.pipe(fs.createWriteStream(dest));
}
Both work, however the photo disappears. That is because the dependencies let's say doc/img/photo.jpg does not get downloaded with the README. I have also written scripts to download the dependencies. But neither insert the photo into the README.pdf or README.html.
Has anyone done something like this? Embedded markdown in HTML with photos, or converted them to PDF or HTML with photos? If I could just import it kind of like a PDF with iframe<> that would be ideal, but if not, I will program it myself. But how?

Adding mp3s into zip using jszip

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

Upload file using NodeJS and node-formidable

I succeed uploading file using node.js and the formidable module yet,
the file that got save on the disk is in some kind of a bad format ( bad encoding)
e.g. if I upload an image I can't view it, if I upload a txt file gedit provide the following msg:
"gedit has not been able to detect the character encoding.
Please check that you are not trying to open a binary file.
Select a character encoding from the menu and try again."
here is the code:
form.encoding = 'utf-8';
form.parse(req, function(err, fields, files) {
fs.writeFile('test.js', files.upload,'utf8', function (err) {
if (err) throw err;
console.log('It\'s saved!');
});
});
The problem is the that files.upload is not the content of the file, it is an instance of the File class from node-formidable.
Look at:
https://github.com/felixge/node-formidable/blob/master/lib/file.js
Instead of trying to write the file to disk again, you can just access the path to uploaded file like this and use fs.rename() to move it where you want:
fs.rename(files.upload.path, 'yournewfilename', function (err) { throw err; });
Is the form set to enctype="multipart/form-data"?
I've only used formidable with Express - the Express example works fine:
https://github.com/visionmedia/express/tree/master/examples/multipart

Categories