Javascript: How to encrypt a zip file with RSA - javascript

I'm using Cryptico to handle RSA encryption for chat but I'm running into trouble trying to encrypt a zip file after construction. I see the constructed file in the console. The console shows an encrypted string of the file but returns blank after decryption in the console.
Note: my decryption method works properly with text and base64
$(document).on("change", "#chatImage", function() {
var rid = $(this).closest(".chat").data("id");
var files = this.files;
var zip = new JSZip();
for (var i = 0; i < files.length; i += 1) {
var file = files[i];
zip.file(file.name, file);
console.log("added", file.name);
// console.log(file);
}
var eImgArray = {};
$.ajax({
url : ajax_object.ajax_url,
type : 'post',
data : {
action: 'get_room_member_keys',
rid : rid,
},
beforeSend: function() {
},
success: function(html) {
var pubKeys = $.parseJSON(html);
$.each( pubKeys, function( key, value ) {
var imgEncrypt = cryptico.encrypt(file, value);
var imgSrc = imgEncrypt.cipher;
eImgArray[key] = imgSrc;
});
var strImgArray = JSON.stringify(eImgArray);
$("#chatFormCont input[name=image_data]").val(strImgArray);
var foo = $("#chatFormCont input[name=image_data]").val();
// console.log(foo);
},
});
zip.generateAsync({type: "blob"}).then(function(content) {
function show_all_images(relpath, file) {
if (file.dir) {
return file.forEach(show_all_images);
}
var img = $("#chatImagePreview");
file.async("blob").then(function(blob) {
var src = window.URL.createObjectURL(blob);
img.attr("src", src);
});
}
new JSZip.loadAsync(content).then(zip => zip.forEach(show_all_images));
});
});

Related

How to download multiple audio filles in JsZip

I want to download all audio files from folder but this code only download last file in folder.
var element = document.getElementById("songs");
var audionum = element.getElementsByTagName('audio').length;
var zipcounter = 0;
var zip = new JSZip();
var zipName = 'Test.zip';
for(var i = 0; i < audionum; i++){
var audiosrc = document.getElementsByTagName('source')[i].getAttribute("src");
var audiosrcsplit = audiosrc.split('/')[1];
// loading a file and add it in a zip file
JSZipUtils.getBinaryContent(audiosrc, function (err, data) {
if(err) {
throw err; // or handle the error
}
zip.file(audiosrcsplit, data, {binary:true});
zipcounter++;
if (zipcounter == audionum) {
zip.generateAsync({type:'blob'}).then(function(content) {
saveAs(content, zipName);
});
}
});
}
For ES6 , you can try replacing var with let (block scope).
If you are making use of ES5 then, try something like below.
var element = document.getElementById("songs");
var audionum = element.getElementsByTagName('audio').length;
var zipcounter = 0;
var zip = new JSZip();
var zipName = 'Test.zip';
function addToZip(audiosrc, audiosrcsplit) {
JSZipUtils.getBinaryContent(audiosrc, function (err, data) {
if (err) {
throw err; // or handle the error
}
zip.file(audiosrcsplit, data, {
binary: true
});
zipcounter++;
if (zipcounter == audionum) {
zip.generateAsync({
type: 'blob'
}).then(function (content) {
saveAs(content, zipName);
});
}
});
}
for (var i = 0; i < audionum; i++) {
var audiosrc = document.getElementsByTagName('source')[i].getAttribute("src");
var audiosrcsplit = audiosrc.split('/')[1]; // loading a file and add it in a zip file
addToZip(audiosrc, audiosrcsplit);
}

How to add an attachement to an email (not stored in file disk)

I want to open outlook with an attachement (zip) using Javascript.
It's working fine if the file in in some directory in the computer client.
this.sendEmail = function (zip) {
try {
var theApp = new ActiveXObject("Outlook.Application");
var objNS = theApp.GetNameSpace('MAPI');
var theMailItem = theApp.CreateItem(0); // value 0 = MailItem
theMailItem.to = ('test#gmail.com');
theMailItem.Subject = ('test');
theMailItem.Body = ('test');
theMailItem.Attachments.Add(zip);
theMailItem.display();
}
catch (err) {
alert(err.message);
}
};
But What I want to do is to add the file that I have alredy in memory
this.SenddZip = function (docDescription, fileName) {
var zip = new JSZip();
for (var i = 0; i < docDescription.length; i++) {
var doc = docDescription[i];
zip.file(doc.core_documenttitle + doc.core_fileextension, doc.fileBase64, { base64: true });
}
Utils.sendEmail(zip);
// Generate the zip file asynchronously
zip.generateAsync({ type: "blob" })
.then(function (content) {
// Force down of the Zip file
var name = "documents";
if (fileName) {
name = fileName;
}
// location.href = "data:application/zip;base64," + content;
saveAs(content, name + ".zip");
Utils.sendEmail(xxxxxxxx);
});
};
If their is no solution for this :
Is their a way to download the document without the confirmation dialog ?
saveAs ask always for confirmation before to store the file.
Thank you

How to write a callback for FileReader?

I'm trying to upload multiple attachments.
First I'm getting attachments from user interface, then I'm converting them into JSON , then I need to make a server call.
In this I'm using FileReader.
//showing ajax loader
component.set("v.showLoadingSpinner", true);
//getting attached files
var files = component.find("fileId").get("v.files");
var details = {}; //JS Object need to send server
details.files = [];
for (var i = 0; i < files.length; i++)
{
(function(file) {
var name = file.name;
var reader = new FileReader();
reader.fName = files[i]['name'];
reader.fType = files[i]['type'];
reader.i = i;
reader.onload = function(e) {
var fileContents = reader.result;
var base64 = 'base64,';
var dataStart = fileContents.indexOf(base64) + base64.length;
fileContents = fileContents.substring(dataStart);
var startPosition = 0;
var endPosition = Math.min(fileContents.length, startPosition + 750000);
var getchunk = fileContents.substring(startPosition, endPosition);
var fDetails = {};
fDetails.fileName = reader.fName;
fDetails.base64Data = encodeURIComponent(getchunk);
fDetails.contentType = reader.fType;
details.files.push(fDetails);
}
reader.readAsDataURL(file);
})(files[i]);
// I want to make a server call here with data in "details" object.
console.log(details);
But I'm not getting data in above console log.
Please help me to achieve this.
You can use promises :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://davidwalsh.name/promises
https://developers.google.com/web/fundamentals/primers/promises
Also jQuery provide $.when() function :
https://api.jquery.com/jquery.when/
And with promisejs you can do something like this :
function readJSON(filename){
return new Promise(function (fulfill, reject){
readFile(filename, 'utf8').done(function (res){
try {
fulfill(JSON.parse(res));
} catch (ex) {
reject(ex);
}
}, reject);
});
}

base64 encoded image is corrupted when saved to disk

I am posting the base64 clipboard image to server (node) and I am saving the base64 to disk. For some reason the image is corrupted.
Client side logic of posting:
function sendData($http, clipboardImage) {
// $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
// var imgData = JSON.stringify(clipboardImage);
//var data = {"imgdata" : clipboardImage};
var url = "http://localhost:3000/pad/img/";
$http({
method: 'POST',
url: url,
data: "data=" + clipboardImage
});
}
$("[ng-model='html']").delegate("p", "paste", function(event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(e) {
sendData($http, e.target.result);
};
reader.readAsDataURL(blob);
}
});
Server logic:
app.post("/pad/img/", function(req, res) {
var imgB64Data = req.body.data;
var decodedImg = decodeBase64Image(imgB64Data);
var imageBuffer = decodedImg.data;
var type = decodedImg.type;
var extension = mime.extension(type);
var fileName = "image." + extension;
try {
fs.writeFile(fileName, imageBuffer, function(err) {
console.log(err);
});
} catch (err) {
console.error(err);
}
});
function decodeBase64Image(dataString) {
var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),
response = {};
if (matches.length !== 3) {
return new Error('Invalid input string');
}
response.type = matches[1];
response.data = new Buffer(matches[2], 'base64');
return response;
}
The image is being saved successfully but it seems to be corrupted. Can you please point out what may be missing?
Have you tried explicitly setting the file encoding when calling fs.writeFile?
try {
fs.writeFile(fileName, imageBuffer, {encoding:'utf8'}, function(err) {
console.log(err);
});
} catch (err) {
console.error(err);
}
NodeJS Docs: fs.writeFile(filename, data\[, options\], callback)

Why does Chrome and Firefox crash while uploading a file larger than 30 MB?

I am trying to upload a file on the server in my angularjs app. The file is upload in base64 string format. The things work fine when the file size is less than 30 MB but the browsers (both chrome and firefox) crash when he file size is more than 30 MB. The browsers crash before the post request is made.
Here is the code of my controller for uploading the file:
$scope.addMyFile = function(t,pid,id,week,day) {
$("#upload"+t+pid+id).each(function() {
var $input = $(this);
var inputFiles = this.files;
if(inputFiles == undefined || inputFiles.length == 0) return;
var inputFile = inputFiles[0];
var inputFileSize = inputFile.size;
var reader = new FileReader();
reader.onload = function(event) {
var dataString = event.target.result;
var firstPart = dataString.split(',')[0];
var secondPart = dataString.split(',')[1];
dataString = secondPart;
var fileName = inputFile.name;
var fileExtension = firstPart.split('/')[1].split(';')[0];
reader.readAsDataURL(inputFile);
});
};
UploadMyFile Function:
$scope.uploadFile = function(type,week,day,fileName,fileExtension,dataString) {
$scope.loading = true;
$scope.uploadBar = true;
var fileUploadUrl = serverURL;
var request = $http({
method: "POST",
url: fileUploadUrl,
headers: { 'Accept' :'application/json','Content-Type' :'application/json', authToken:userauthToken, 'Accept-Language': 'en'},
data: { name : fileName, documentString:dataString, extension: fileExtension}
});
request.success(
function(data) {
$scope.uploadStatus = data.status;
$scope.getWeekList(type);
$scope.uploadBar = false;
alert('The file has been successfully uploaded.');
});
$scope.loading = false;
request.error(
function(data, status) {
console.log(status);
$scope.uploadStatus = data.status || "Request failed";
alert('The file could not be uploaded. Please try again.');
});
};

Categories