Rabu, 13 Maret 2019

JSZip compress image upload, encrypt, decrypt, display image

Initially I was using FileReader to convert an image upload into base64 on the client side and then encrypt. Would attach that result to a form field and then submit but this is taking up way too much time so I'm looking for an alternative.

I'm trying to use JSZip to first compress and then encrypt and then submit, retrieve, decrypt, and show the image but I'm stuck on how to do that. My attempt to compress looks like this.


$(document).on("change", "#chatImage", function() {
var rid = $(this).closest(".chat").data("id");
var tempSrc = $(this).val();
/* Make a zip file here */
var fi = $(this);
var fileInput = fi;
var files = [];
// get all selected file
$.each(fileInput.files, function(i, file) {
files.push(file);
});
//create a zip object
var zip = new JSZip();
//add all files to zip
function addFileToZip(n) {
if(n >= files.length) {
//here generate file to zip on client side
zip.generateAsync({type:"blob", compression:"default"}).then(function(content){
//generated zip content to file type
var files = new File([content], "default.zip");
console.log(files);
var eImgArray = {};
$.ajax({
url : ajax_object.ajax_url,
type : 'post',
data : {
action: 'get_room_member_keys',
rid : rid,
},
beforeSend: function() {
$(".fileBtn").hide();
$(".fileInput").append('<div class="loadingDots"><div class="loading-dot"></div><div class="loading-dot"></div><div class="loading-dot"></div><div class="loading-dot"></div></div>');
},
success: function(html) {
var pubKeys = $.parseJSON(html);
$.each( pubKeys, function( key, value ) {
var imgEncrypt = cryptico.encrypt(files, 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);
$(".loadingDots").remove();
},
});
});
return;
}
var file = files[n];
var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function() {
arrayBuffer = this.result;
zip.file(file.name, arrayBuffer);
addFileToZip(n + 1);
}
fileReader.readAsArrayBuffer(file);
}
addFileToZip(0);
});

This shows an encrypted string in the console and the result of compressing but when I decrypt and log the result to the console, I get nothing. What is the correct way to do this and or a better one?



from JSZip compress image upload, encrypt, decrypt, display image

JSZip compress image upload, encrypt, decrypt, display image Rating: 4.5 Diposkan Oleh: Admin

0 komentar:

Posting Komentar

Popular Posts