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.
Related
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?
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.
I have a form that includes a file upload.
I need to extract some meta information using javascript from the file before saving the contents of the form to my database.
What would be the best way, if any, of achieving this?
To clarify: The issue isn't the with extracting the file meta but rather how to access the $_FILES array and execute a js file with this data before finally allowing the form to submit to the server.
How I am achieving this currently:
I submit the form to the controller action
It saves the data and then it sets a view variable with the location of
the uploaded file before re-rendering the initial view upon successful form submission
The view checks if the variable is set, and if it is, executes the
javascript which basically extracts the meta now that it can access where the file is, and updates the db
with an ajax call.
The above method is not ideal in that the meta belongs to the same row of data that is saved when the form first submits so ideally I would like to include it initial form submission and not when the page is rendered again after the form has been submitted. Seems like a bit of a dirty hack to me but I can't as of yet see another way this can be achieved.
I would suggest uploading using ajax (SWFUpload/Uploadify) and then sending data back to the view with the processed file data.
You can upload the file, issue a number of callbacks, and finally return the rendered filedata back to the waiting javascript function that issued the request.
Just my two cents
What sort of metadata? To answer your question, yes, this is possible, but only if the browser supports the File API. This excludes IE9 and older. For more information, see this MDN article on FileReader. There are various libraries that will extract specific types of metadata from files. For example, if you are interested in parsing EXIF metadata from an image file, you should look into something like jQuery-fileExif.
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.
I'm afraid I might know the answer to this already. I'm hoping to present an HTML5 form offline in which a user can select an Image to upload. Once the user gets back on line the image will be uploaded. I can extract all the data from the file input, but is there a way to send the data via post to save the blob on the server?
I'm using jQuery and have a Rails backend (typical fileuploads are handled through CarrierWave).
You can create online event and call submit() on form that has your file image.
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
http://api.jquery.com/submit/