Teknikode
/
Teknik
3
17
Fork 5
Code Issues 39 Pull Requests 1 Releases 2 Wiki Activity
Browse Source

Modified UI and dropzone to be more custom and per file. 

Modified how encoding worked (still not working)
pull/29/head
Teknikode 7 years ago
parent
59e213690e
commit
cb6aaee0dc
4 changed files with 133 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      Teknik/Areas/Upload/Scripts/EncryptionWorker.js
  2. 178
      Teknik/Areas/Upload/Scripts/Upload.js
  3. 3
      Teknik/Areas/Upload/Views/Upload/Index.cshtml
  4. 7
      Teknik/Web.config

44
Teknik/Areas/Upload/Scripts/EncryptionWorker.js
Unescape View File

@ -4,18 +4,48 @@ @@ -4,18 +4,48 @@
switch (data.cmd) {
case 'encrypt':
var wordArray = CryptoJS.lib.WordArray.create(new Uint8Array(data.file))
//var startByte = 0;
//var endByte = 0;
//var prog = [];
//var dataStr = ab2str(data.file);
//var bytes = new Uint8Array(data.file);
// encrypt the passed in file data
var encrypted = CryptoJS.AES.encrypt(wordArray, data.key, { iv: data.iv });
var encByteArray = wordToByteArray(encrypted);
//// Create aes encryptor object
//var aesEncryptor = CryptoJS.algo.AES.createEncryptor(data.key, { iv: data.iv });
//while (startByte <= (bytes.length - 1)) {
// // Set the end byte
// endByte = startByte + data.chunkSize;
// if (endByte > bytes.length - 1)
// {
// endByte = bytes.length - 1;
// }
// // Grab current set of bytes
// var curBytes = bytes.subarray(startByte, endByte);
// var wordArray = CryptoJS.lib.WordArray.create(curBytes)
// // encrypt the passed in file data and add it to bits[]
// prog.push(aesEncryptor.process(wordArray));
// // Set the next start as the current end
// startByte = endByte + 1;
//}//then finalize
//prog.push(aesEncryptor.finalize());
//throw JSON.stringify({ data: prog, start: startByte, end: endByte, len: bytes.length })
var wordArray = CryptoJS.lib.WordArray.create(new Uint8Array(data.file));
var encWords = CryptoJS.AES.encrypt(wordArray, data.key, { iv: data.iv, mode: CryptoJS.mode.CBC });
//throw JSON.stringify({ data: wordArray });
var dcBase64String = encWords.toString(); // to Base64-String
//var encByteArray = wordToByteArray(encWords.words);
// patch it all back together for the trip home
var objData =
{
encrypted: encByteArray.buffer
encrypted: str2ab(dcBase64String)
};
self.postMessage(objData, [objData.encrypted]);
@ -58,7 +88,7 @@ function ab2str(buf) { @@ -58,7 +88,7 @@ function ab2str(buf) {
function str2ab(str) {
var buf = new ArrayBuffer(str.length); // 2 bytes for each char
var bufView = new Uint8Array(buf);
var bufView = new Uint16Array(buf);
for (var i = 0, strLen = str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}

178
Teknik/Areas/Upload/Scripts/Upload.js
Unescape View File

@ -34,29 +34,30 @@ Dropzone.options.TeknikUpload = { @@ -34,29 +34,30 @@ Dropzone.options.TeknikUpload = {
addRemoveLinks: true,
autoProcessQueue: false,
clickable: true,
init: function() {
this.on("addedfile", function (file, responseText) {
// Create the UI element for the new item
var short_name = file.name.split(".")[0].hashCode();
$("#upload-links").css('display', 'inline', 'important');
$("#upload-links").prepend(' \
<div class="row link_'+short_name+'"> \
previewTemplate: function () { },
addedfile: function (file) {
// Create the UI element for the new item
var short_name = file.name.hashCode();
$("#upload-links").css('display', 'inline', 'important');
$("#upload-links").prepend(' \
<div class="row link-' + short_name + '" id="link-' + short_name + '"> \
<div class="col-sm-12 text-center"> \
'+file.name+' \
'+ file.name + ' \
</div> \
<div class="progress col-sm-12"> \
<div class="progress-' + short_name + '"> \
<div class="progress-bar progress-bar-success" id="progressBar-' + short_name + '" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div> \
</div> \
</div> \
');
// Encrypt the file
encryptFile(file, uploadFile);
$("#upload_message").css('display', 'none', 'important');
});
// Encrypt the file
encryptFile(file, uploadFile);
$("#upload_message").css('display', 'none', 'important');
},
init: function() {
this.on("removedfile", function(file) {
var name = file.name.split(".")[0].hashCode();
$('.link_'+name).remove();
var name = file.name.hashCode();
$('.link-'+name).remove();
});
this.on("reset", function(file, responseText) {
$("#upload_message").css('display', 'inline', 'important');
@ -78,72 +79,11 @@ Dropzone.options.TeknikUpload = { @@ -78,72 +79,11 @@ Dropzone.options.TeknikUpload = {
}
};
function uploadFile(data, key, iv, filetype, filename)
{
$("#key").val(key);
$("#iv").val(iv);
var blob = new Blob([data]);
// Now we need to upload the file
var fd = new FormData();
fd.append('fileType', filetype);
fd.append('iv', iv);
fd.append('data', blob);
fd.append('__RequestVerificationToken', $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val());
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete.bind(null, filename), false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", uploadFileURL);
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$(".progress").children('.progress-bar').css('width', (percentComplete * (3 / 5)) + 40 + '%');
$(".progress").children('.progress-bar').html(percentComplete + '% Uploaded');
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(filename, evt) {
obj = JSON.parse(evt.target.responseText);
var name = obj.result.name;
var fullName = obj.result.url;
var short_name = filename.split(".")[0].hashCode();
$("#upload-links").css('display', 'inline', 'important');
$("#upload-links").prepend(' \
<div class="row link_'+ short_name + '"> \
<div class="col-sm-6"> \
' + filename + ' \
</div> \
<div class="col-sm-3"> \
<a href="' + fullName + '" target="_blank" class="alert-link">' + fullName + '</a> \
</div> \
<div class="col-sm-3"> \
<button type="button" class="btn btn-default btn-xs generate-delete-link-' + name + '" id="' + name + '">Generate Deletion URL</button> \
</div> \
</div> \
');
linkUploadDelete('.generate-delete-link-' + name + '');
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
// Function to encrypt a file, overide the file's data attribute with the encrypted value, and then call a callback function if supplied
function encryptFile(file, callback) {
var filetype = file.type;
var filename = file.name;
var shortName = file.name.hashCode();
// Start the file reader
var reader = new FileReader();
@ -158,8 +98,8 @@ function encryptFile(file, callback) { @@ -158,8 +98,8 @@ function encryptFile(file, callback) {
var iv = CryptoJS.enc.Utf8.parse(ivStr);
// Display encryption message
$(".progress").children('.progress-bar').css('width', '20%');
$(".progress").children('.progress-bar').html('Encrypting...');
$(".progress-" + shortName).children('.progress-bar').css('width', '20%');
$(".progress-" + shortName).children('.progress-bar').html('Encrypting...');
var worker = new Worker(encScriptSrc);
@ -170,6 +110,14 @@ function encryptFile(file, callback) { @@ -170,6 +110,14 @@ function encryptFile(file, callback) {
}
});
worker.onerror = function (err) {
alert(err);
// An error occured
$(".progress-" + shortName).children('.progress-bar').css('width', '100%');
$(".progress-" + shortName).children('.progress-bar').html('Error Occured');
}
// Execute worker with data
var objData =
{
@ -177,22 +125,76 @@ function encryptFile(file, callback) { @@ -177,22 +125,76 @@ function encryptFile(file, callback) {
script: aesScriptSrc,
key: key,
iv: iv,
chunkSize: 1024,
file: e.target.result
};
worker.postMessage(objData, [objData.file]);
};
})(callback);
// While reading, display the current progress
reader.onprogress = function (data) {
if (data.lengthComputable) {
var progress = parseInt(((data.loaded / data.total) * 100), 10);
$(".progress").children('.progress-bar').css('width', (progress.toFixed(2) / 5) + '%');
$(".progress").children('.progress-bar').html(progress.toFixed(2) + '% Loaded');
}
}
// Start async read
var blob = file.slice(0, file.size);
reader.readAsArrayBuffer(blob);
}
function uploadFile(data, key, iv, filetype, filename)
{
$("#key").val(key);
$("#iv").val(iv);
var blob = new Blob([data]);
// Now we need to upload the file
var fd = new FormData();
fd.append('fileType', filetype);
fd.append('iv', iv);
fd.append('data', blob);
fd.append('__RequestVerificationToken', $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val());
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress.bind(null, filename), false);
xhr.addEventListener("load", uploadComplete.bind(null, filename), false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", uploadFileURL);
xhr.send(fd);
}
function uploadProgress(filename, evt) {
var shortName = filename.hashCode();
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$(".progress-" + shortName).children('.progress-bar').css('width', (percentComplete * (3 / 5)) + 40 + '%');
$(".progress-" + shortName).children('.progress-bar').html(percentComplete + '% Uploaded');
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(filename, evt) {
obj = JSON.parse(evt.target.responseText);
var name = obj.result.name;
var fullName = obj.result.url;
var shortName = filename.hashCode();
$('.progress-' + shortName).children('.progress-bar').css('width', '100%');
$('.progress-' + shortName).children('.progress-bar').html('Complete');
$('.links-' + shortName).append(' \
<div class="col-sm-6"> \
' + filename + ' \
</div> \
<div class="col-sm-3"> \
<a href="' + fullName + '" target="_blank" class="alert-link">' + fullName + '</a> \
</div> \
<div class="col-sm-3"> \
<button type="button" class="btn btn-default btn-xs generate-delete-link-' + name + '" id="' + name + '">Generate Deletion URL</button> \
</div> \
');
linkUploadDelete('.generate-delete-link-' + name + '');
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}

3
Teknik/Areas/Upload/Views/Upload/Index.cshtml
Unescape View File

@ -44,9 +44,6 @@ @@ -44,9 +44,6 @@
</form>
</div>
<br />
<div class="progress">
<div class="progress-bar progress-bar-success" id="progressBar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>
</div>
<div class="container" id="upload-links">
</div>
<br />

7
Teknik/Web.config
Unescape View File

@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
<customErrors mode="Off" />
<authentication mode="Forms" />
<compilation debug="true" targetFramework="4.5.2" />
<httpRuntime targetFramework="4.5.2" />
<httpRuntime targetFramework="4.5.2" maxRequestLength="1048576" />
<pages buffer="true" enableViewState="false" />
</system.web>
<system.webServer>
@ -35,6 +35,11 @@ @@ -35,6 +35,11 @@
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" cacheControlCustom="public" />
</staticContent>
<urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true" />
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
</system.webServer>
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

Write Preview
Loading…
Cancel
Save