Add files to an existing zip archive via JSZip - javascript

I have a zip file which is a Visual Basic project. What I'm trying to see is if I can add my web app as a directory inside this zip archive so I can easily export my web apps as native windows apps
I tried the Ajax method from the documentation and it worked fine on my hard drive when loaded in Firefox, but it's not calling when from my website!
$(document).ready(function() {
$(".download").on("click", function() {
JSZipUtils.getBinaryContent('YourWinApp.zip', function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
zip.file("Hello.txt", "Hello World\n");
var folder = zip.folder("images");
folder.file("folder.txt", "I'm a file in a new folder");
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "example.zip");
});
});
});

I tried the Ajax method from the documentation and it worked perfectly! (I didn't link to the right file lol)
$(document).ready(function() {
$(".download").on("click", function() {
JSZipUtils.getBinaryContent('YourWindowsApp.zip', function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
zip.file("Hello.txt", "Hello World\n");
var folder = zip.folder("images");
folder.file("folder.txt", "I'm a file in a new folder");
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "example.zip");
});
});
});

Related

AWS Polly Text to Downloadable Audio PCM File Not Working

I have a page that has jquery and the amazon SDK. There is text in an area box that the user can change. I successfully make the request to Amazon. I get back the PCM AudioStream (Int16Array). How do I then convert this stream to a downloadable PCM file? When the file downloads, the file is useless and can't be played. The file does have a size greater than 0, so that makes me believe there is data there.
<script>
AWS.config.region = 'us-east-1';
AWS.config.accessKeyId = 'CANDY';
AWS.config.secretAccessKey = 'CANES';
var polly = new AWS.Polly({apiVersion: '2016-06-10'});
var params = {
OutputFormat: 'pcm',
Text: 'Text from the textbox',
VoiceId: 'Joey',
SampleRate: '16000',
TextType: 'text'
};
polly.synthesizeSpeech(params, function(err, data) {
if (err){
console.log(err, err.stack); // an error occurred
} else {
var stream = new Int16Array(audioStream);
var arrayBuffer = stream.buffer;
var blob = new Blob([arrayBuffer], {type: 'audio/pcm'});
var url = URL.createObjectURL(blob);
.....set href for link to url.......
}
});
</script>
If you are sure the url object is correct (can you download it from a separate browser tab?), I would use JQuery to dynamically change your DOM, as per this answer How to change the href for a hyperlink using jQuery

Pass file path to javascript input android

I understand that providing a physical file path to javascript is not possible due to security reasons. However, when I look at Mozilla's pdf.js and mupdf android pdf viewer I see this is very much possible. There is a mechanism by which I can pass a file path to javascript. I explored into PDF.js but it seemed little difficult to make use of when I needed a simple solution.
I want to pass android internal storage file location onto the following code instead of using input id="files" type="file" which requires me to browse and select file. In my case I want to just pass file location from sdcard.
The following code actually loads ms word (docx) file as html which I then will show in webview in my project. In the case of pdf.js we were using it to display pdf in the similar way.
<script>
$(document).ready(function(){
//Input File
var $files = $('#files');
//File Change Event
$files.on('change', function (e) {
//File Object Information
var files = e.target.files;
//Create DocxJS
var docxJS = new DocxJS();
//File Parsing
docxJS.parse(
files[0],
function () {
//After Rendering
docxJS.render($('#loaded-layout')[0], function (result) {
if (result.isError) {
console.log(result.msg);
} else {
console.log("Success Render");
}
});
}, function (e) {
console.log("Error!", e);
}
);
});
});
</script>
<input id="files" type="file" name="files[]" multiple="false" />
<div id="loaded-layout" style="width:100%;height:800px;">
</div>
You can check code of PDF.JS based pdfviewer in android here.
What I found on the PDF.js code which was used to input file :
In pdffile.js included in index.html file, url variable was mentioned pointing to real location of the file i.e. in assets folder which then was used in pdf.js but at that point the usage seems confusing. Is there any way by which I can use real path of file or pass real path somehow in android for my purpose of viewing docx?
UPDATE :
I find that PDF.js by Mozilla actually treats file location as a url and so the file in the url is converted to javascript file object or blob. Hence I create a blob of the url from server using Ajax :
var myObject;
var xhr = new XMLHttpRequest();
xhr.open("GET","10143.docx",true); // adding true will make it work asynchronously
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200){
//do some stuff
myObject = this.response;
}
};
xhr.send();
$(document).ready(function(){
//Input File
var $files = $('#files');
//File Change Event
$files.on('change', function (e) {
//File Object Information
var files = myObject.files;
//Create DocxJS
var docxJS = new DocxJS();
//File Parsing
docxJS.parse(
blobToFile(myObject, "10143.docx"),
function () {
//After Rendering
docxJS.render($('#loaded-layout')[0], function (result) {
if (result.isError) {
console.log(result.msg);
} else {
console.log("Success Render");
}
});
}, function (e) {
console.log("Error!", e);
}
);
});
});
function blobToFile(theBlob, fileName){
//A Blob() is almost a File() - it's just missing the two properties below which we will add
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
However now that I do that I get Parsing error from DocxJS like : {isError: true, msg: "Parse Error."}

Connect-busboy: When piping file to write steam, file is empty or incorrect depending on type

I am testing a simple file upload using connect-busboy. I noticed that when I upload a PNG formatted file, the file is uploaded however the content isn't correct - I am unable to open it. I've done md5sum on the source and destination file and they are different. When I upload a text file containing a mere 15 bytes, I see the file being uploaded in the ./public/ directory however it's empty.
Client side code of interest:
<form method="post" enctype="multipart/form-data" action="/api/upload">
<input type="file" name="thumbnail"/>
<input type="submit"/>
</form>
Server side
//includes omitted for readability
var Busboy = require("connect-busboy");
app.use(Busboy());
//Add entires to places
app.post("/api/upload", function (req, res, next) {
req.pipe(req.busboy);
var filesNames = [];
req.busboy.on('file', function(fieldname, file, filename) {
file.on("data", function(data) {
var fstream = FS.createWriteStream('./public/' + filename,{flags: "a"});
file.pipe(fstream);
filesNames.push(filename);
fstream.on("close", function() {
console.log("Closing fstream");
});
});
});
req.busboy.on("finish", function () {
res.writeHead(200, {'Connection': 'close'});
for (var i = 0; i < filesNames.length; i++)
{
res.write(filesNames[i] + "\n");
}
console.log("busboy done");
res.end("Done..");
});
});
I've already looked at multiple posts regarding busboy, so I've done my research prior to asking this question.
Also as a note: If I were to log the data, I can see the bytes coming in as expected, however they are not being written to the file (at least in the .txt files).
What am I doing wrong?
You should not create new writable stream everytime you get a piece of file data. Probably thats enough
req.busboy.on('file', function(fieldname, file, filename) {
var ws = FS.createWriteStream('./public/' + filename, {flags: "a"});
file.pipe(ws);
filesNames.push(filename);
});

How to Save As using Node-Webkit

Using Node-Webkit, The following page,
https://github.com/rogerwang/node-webkit/wiki/File-dialogs
Describes that you can use
[input type="file" nwsaveas="filename.txt" /]
to open a File Save dialog.
However it does not explain how would you write the data to the filesystem.
I expected/imagined something simple like,
var directory = FileOpen();
fs.writeFile(directory+"myfile.png", buffer);
Is there any explanation for this?
You are right, after you trigger the Save As dialog, you will be prompted a dialog, specify the name, and you could receive the file path by doing this.
Sample Code (using jQuery):
$("#save").trigger("click");
$("#save").on("change", function () {
var filePath = $(this).val();
if (filePath !== "") {
var fs = require("fs");
fs.writeFile(filePath, "Hello World", function (err) {
if (err)
alert("Unable to save file");
else
console.log("saved. ");
});
}
else {
// User cancelled
}
});

How to zip a pdf or ppt file using jszip?

I want zip a pdf or some other format like excel, ppt etc using jszip.
How to zip this format in jszip?
My code is as below
<BODY>
<a id ='file' href="data/some.pdf" type="application/pdf; length=432628">Some.pdf</a>
<input id="button" type="button" onclick="create_zip()" value="Create Zip"></input>
</BODY>
<SCRIPT>
function create_zip() {
var data = document.getElementById('file');
var zip = new JSZip();
zip.add(data, {base64: true});
content = zip.generate();
location.href = "data:application/zip;base64," + content;
}
</SCRIPT>
What I want is that I will get the path of the file from the a element in the html. I want to zip the pdf using jszip
jsfiddle
JSZipUtils may be useful for you. This is the example for the documentation:
JSZipUtils.getBinaryContent("path/to/picture.png", function (err, data) {
if(err) {
throw err; // or handle the error
}
var zip = new JSZip();
zip.file("picture.png", data, {binary:true});
}
Which can be easily adapted to your case:
function create_zip() {
var url = document.getElementById('file').href;
JSZipUtils.getBinaryContent(url, function (err, data) {
if(err) {
throw err; // or handle the error
}
var zip = new JSZip();
zip.file("Some.pdf", data, {binary:true});
content = zip.generate();
}
}

Categories

Resources