JavaScript add file to form data via $_POST

Question

In the following use case I'm trying to accomplish only step 3 is not working so far, and I'm working in a Joomla 3.4 environment as I'm working on a module here.

1. I have an html form asking for some input and a file upload.
2. I process this file with JavaScript to pgp to encrypt it (with this: https://keybase.io/kbpgp)
3. Now I want to replace the original file in the form with the encrypted one, or at least add the encrypted one to the form data. This doesn't work so far, how can I accomplish that?
4. When everything is done in the JavaScript part form.submit(); is called
5. An email with the forms plain text encrypted as body text is sent and the file should be added as encrypted attachment.

Some details:

Sending the file unencrypted works quite well, so I thought I can just add the encrypted one, but apparently it doesn't work. The form submits the original content and nothing about the added file. I already searched for some solutions and this code snippet was the result of my research:

var data = new FormData();
data.append('upload_file' , result_buffer);
var xhr = new XMLHttpRequest();
xhr.open( 'POST', '', true );
xhr.setRequestHeader('Content-Type', 'multipart/form-data'); 
xhr.send(data);

var form = document.getElementById('formencryptmessage');
form.submit();

upload_file is the form input of the original unencrypted file; the $_POST request keeps the original file no matter what I do; result_buffer is a binary buffer with files content; lastly, formencryptmessage is the form id and name.

Edit

The git repo with the code is here: https://github.com/JamborJan/joomlaencryptedcontact

We are talking about this: https://github.com/JamborJan/joomlaencryptedcontact/blob/master/tmpl/default.php

My main intent is to use only the browser session / RAM / hidden input field to do the file encryption and sending. I didn't find a suitable solution so far.

Answer 1

Maybe you could try to, once the file is pgp encrypted, to encode the datas in base64, then putting the resulting string in an input type=hidden by editing the DOM through JavaScript.

Your script which process the submitted form could then attach the file to the mail in an easy way, as mail attachements are base64 encoded. It would only have to read the value of the hidden input field.

If you want some example Javascript code, let me know, I've got some snippets dealing with this.

-> I was wondering the same thing as Mave, but I guess there's some reason if you want it this way? A workaround could be to create a new page between the one with the form, and the one which tells you the mail was sended (you could do what you want with the file, one the server side, and show it available for download to the user who just uploaded it unencrypted).

Another thing, to deal with base64 encoded datas in JavaScript, you can use: - btoa() method to encode to base64, - atob() method to reverse it.