How to encrypt a binary file with HTML5 File API and upload to server

Question

I need to encrypt and upload file to Apache/PHP server with HTML5 FileReader API and CryptoJS

I've done the following succesfully

• Read file with FileReader API
• Convert file to base64 with readAsDataURL() function

• Encrypt it with the following

  CryptoJS.AES.encrypt(e.target.result, password);

But I couldn't manage to send it to server as a File object because I already converted it to text object and I can't convert back it to a file. The following is my javascript file and server-side snippet.

---

app.js

  var reader = new FileReader(); // Read file callback! reader.onload = function (e) { // Use the CryptoJS library and the AES cypher to encrypt the // contents of the file, held in e.target.result, with the password var encrypted = CryptoJS.AES.encrypt(e.target.result, password); //SEND FORM DATA var data = new FormData($("#fileinfo")[0]); /*The following line doesn't work because I'm not adding a File object, * I'm adding file already converted to Base64 format */ data.append('file-0','data:application/octet-stream,' + encrypted); $.ajax({ url: 'upload.php', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function (data) { //alert(data); } }); }; 

---

upload.php

 <?php var_dump($_FILES); //prints empty array var_dump($_POST); //prints file as string ?> 

Answer 1

I found the answer the new Draft on w3 Here is a working code if anyone need

var reader = new FileReader();

// Read file callback!
reader.onload = function (e) {

var encrypted = CryptoJS.AES.encrypt(e.target.result, password);

var data = new FormData($("#fileinfo")[0]);

var encryptedFile = new File([encrypted], file.name + '.encrypted', {type: "text/plain", lastModified: new Date()});

data.append('file[0]', encryptedFile);

$.ajax({
     url: 'upload.php',
     data: data,
     cache: false,
     contentType: false,
     processData: false,
     type: 'POST',
     success: function (data) {
         //alert(data);
     }
 });

};

reader.readAsDataURL(file);