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.
I have an html form asking for some input and a file upload.
I process this file with JavaScript to pgp to encrypt it (with this: https://keybase.io/kbpgp)
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?
When everything is done in the JavaScript part form.submit(); is called
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.
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.
Related
In my frontend PHP page I have a simple upload file input object:
<input type="file" v-on:change="fileAdded">
My fileAdded function within my JS file simply takes the event object (e) and grabs the file in order to obtain other information regarding the file itself:
if (e.target.files !== undefined) {
v.data_file = e.target.files[0]
}
I then put the data file and a request code into a fetch statement to my backend:
fetch("pages/gp/gpBackend.php", {
method: "POST",
body: v.form_data_obj
})
Within my backend php page I use the $_FILES array to grab information like the filename and extension of the file to then pass along to a python script that I have which will unpack the data in the file itself.
During this phase of operation of my webpage, everything works fine, I send the response back to my frontend, handle the data accordingly and move on.
The rest of my frontend requires the user to input certain data before submitting a second post back to my backend with a different request code.
In that instance I send another FormObject with all the needed data to my backend in the same manner I did with my file upload POST. However this time my $_FILES is now empty and I cannot access the file name or extension of the file I uploaded earlier.
I cannot seem to find out why this is the case? I have a near identical set up on another frontend/backend php page I have for the same site that through both POSTS maintains the files in $_FILES to be used however often it is needed. But for this page, without me being able to tell the difference, when I POST another request to my backend the second time $_FILES is empty.
I can provide any additional details that would be needed to answer this question so please let me know. I do know it is not a file size issue as not only do I have the .ini configured for an admin (me) set file size limit, but the file I'm currently using as an example during development is significantly smaller than the max file size on my web server.
Thank you for any help anyone can provide!
PHP $_FILE must serve with a with enctype as this way.
<form action="upload.php" method="post" enctype="multipart/form-data">
Hope this help: https://www.w3schools.com/php/php_file_upload.asp
I have a ext form with textfield and one filefield. Without filefield form is working fine, and when submit the form data sending with encoded format. But When set fileupload = true, form data sending with different format.
with fileupload data sending like..
form data
name: abc,
email: abc#gmail.com
When not set fileupload data sending like..
data="%5Bobject%20Object%5D"
But I want to send data encoded format with fileupload also.
How can I do this, please share some idea.Thanks in advance.
You did not post any code sample so it's hard to follow your description.
I guess what you are describing here is that your form is being submitted as multipart/form-data because you are uploading a file. You can disable detection in extjs https://docs.sencha.com/extjs/7.0.0/modern/Ext.form.Panel.html#cfg-multipartDetection
However if you want to transfer files you should keep the current configuration. You would have to encode the uploaded file yourself and
sending files as part of your request body will most likely be slow(er), especially if the files are very large.
Please see e.g. https://stackoverflow.com/a/4526286/836086
The problem you are dealing with is most likely the request parser you use, not the form using multipart/form-data as both encodings should be handled equally by higher level code.
I'm looking for a way to add a string as a file inside a html form using JavaScript.
Now I know about the security issues the browsers have when it comes to files, but I'm not looking for adding a file path (as happens when you click the browse of a file input)!!
I want to add a string as a file (The server I'm hitting expects the post to include a file and not a simple form entry).
I know how to perform the action using the FormData object, but I don't want to generate a xhr(ajax) post. I need the post to be a simple form post since the server responds with a redirection.
Does anyone have an idea about this?
I'm working on a job board site which submits user applications to a third party site. The users have to provide following information while applying: name, contact details and resume. Since these fields are also available on user profile on the site, we want to pre populate the form fields, allowing users to change the information as they like.
Now, all other fields can be populated without an issue. However, file input field can't be populated due to security violations. Is there a work around possible using FILE API and BLOB objects?
What I'm planning to do is the following:
Create a blob object from file URL on server
Read the blob as an array buffer using FileReader.
Attach this file to file input field <- this is what I'm not able to figure out and need help with.
Also, if there is any alternate way to achieve this, please let me know. I'm using PHP and JavaScript to generate the form, so I can do the preprocessing in PHP.
Attach this file to file input field <- this is what I'm not able to figure out and need help with.
It is not possible to set a value at FileList object of <input type="file"> element.
You can create and append a File object to a FormData object and submit FormData using XMLHttpRequest()
var data = new FormData();
data.append("file", /* Blob | File */, "filename.ext")
Creating an answer just to give a little more insights into how I solved this issue, and why there was an issue in the first place.
Background: I've created a custom WordPress plugin for a client, which fetches the job applications from various sites, and displays them inline. We also allowed application submission, where the users could attach their resume, and the same was submitted to the original job posting. Since, a lot of users access the website on their mobile, they do not have the resume available on the same. In such a case, we wanted to offer them a facility to use a resume stored on their profile.
Potential Solution: The simplest way to do this would've been to fetch the file contents via ajax from user's profile, and attach it to the form before submission. However, for whatever reason, this didn't work.
Applied Solution: The solution that worked is pretty old school. Instead of submitting the application directly, we submitted it to an intermediate page, which fetched the file contents from user's profile, modified the form data and submitted via curl. This also saved the double data exchange on user's end (file download and re-upload).
I want to upload a binary file using json.
I choose Json because with the file I would also like to send additional information.
I am going to do this by -
Select a file in the file input tag.
Use the HTML5 File Reader Api to read a file first.
Convert the file content into base64.
Add the base64 content to a JS object in a data uri format.
Convert the JS object to json and post it to the server.
I wonder if this is the only legitimate way to achieve my goal? Also, if there is a plugin already available somewhere which give me this ability?
No, this is not the only way - one of the other ways is just to submit a form with a file in it. Such form uses multipart/form-data content type.
See W3C documentation on the subject:
The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters.
The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data.
So, there is no need to reinvent the wheel - browsers already support sending the files along with additional information, in a simple way. You just create a form where the user can enter data and select files, then all of them are sent to the server with multipart/form-data content type, and your web framework should be able to understand that it deals with both files and textual data.