title: File encryption using CryptoJS - Client side
body: <p>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.</p>
  
  <p><strong>ERROR:</strong> <em>Uncaught TypeError: Cannot read property 'length' of undefined(…)</em> at line 16 in html.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
      &lt;title&gt;Get Directory&lt;/title&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/aes.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt; 
      $(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 + "&lt;br /&gt;");;
              });
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="file" id="file-input" webkitdirectory="" directory=""&gt;
      &lt;div id="thelist"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>