I am trying to encrypt all files within a folder located on client side. I have the below code, but getting an error. I am not entirely sure about the error.
ERROR: Uncaught TypeError: Cannot read property 'length' of undefined(…) at line 16 in html.
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Get Directory</title>
<script src=".10.2/jquery.min.js"></script>
<script src="assets/js/aes.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#file-input").on("change", function(e){
var thefiles = e.target.files;
var reader = new FileReader();
$.each(thefiles, function(i, item){
var thefile = item;
reader.onload = function(){
var encrypted = CryptoJS.AES.encrypt(thefile, '12334');
};
reader.readAsDataURL(thefile);
$("#thelist").append("FILES: " + thefile.name + "<br />");;
});
});
});
</script>
</head>
<body>
<input type="file" id="file-input" webkitdirectory="" directory="">
<div id="thelist"></div>
</body>
</html>
I am trying to encrypt all files within a folder located on client side. I have the below code, but getting an error. I am not entirely sure about the error.
ERROR: Uncaught TypeError: Cannot read property 'length' of undefined(…) at line 16 in html.
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Get Directory</title>
<script src="http://cdnjs.cloudflare./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/js/aes.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#file-input").on("change", function(e){
var thefiles = e.target.files;
var reader = new FileReader();
$.each(thefiles, function(i, item){
var thefile = item;
reader.onload = function(){
var encrypted = CryptoJS.AES.encrypt(thefile, '12334');
};
reader.readAsDataURL(thefile);
$("#thelist").append("FILES: " + thefile.name + "<br />");;
});
});
});
</script>
</head>
<body>
<input type="file" id="file-input" webkitdirectory="" directory="">
<div id="thelist"></div>
</body>
</html>
- Think of what you're doing in the $.each – Adam Wolski Commented Nov 7, 2016 at 20:46
- Looping through the files in selected folder. – Noob Commented Nov 7, 2016 at 20:58
1 Answer
Reset to default 2Read all ments
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Get Directory</title>
<!-- Update your jQuery version??? -->
<script src="http://cdnjs.cloudflare./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/js/aes.js"></script>
<script> // type="text/javascript" is unnecessary in html5
// Short version of doing `$(document).ready(function(){`
// and safer naming conflicts with $
jQuery(function($) {
$('#file-input').on('change', function() {
// You can't use the same reader for all the files
// var reader = new FileReader
$.each(this.files, function(i, file) {
// Uses different reader for all files
var reader = new FileReader
reader.onload = function() {
// reader.result refer to dataUrl
// theFile is the blob... CryptoJS wants a string...
var encrypted = CryptoJS.AES.encrypt(reader.result, '12334')
}
reader.readAsDataURL(file)
$('#thelist').append('FILES: ' + file.name + '<br>')
})
})
})
</script>
</head>
<body>
<input type="file" id="file-input" webkitdirectory="" directory="">
<div id="thelist"></div>
</body>
</html>
btw, browsers has a modern standard Crypto lib built in... Maybe try using that instead? and if necessary use a polyfill?