I need to use the formData parameter available in the jQuery File Upload control to send additional data to the server on submit. The default implementation for formData is to invoke a function that grabs all controls in the form and serializes them to an array (using the jQuery serializeArray() method).
I have controls in my form, but when the file is uploaded, I am not getting any additional data. When I inspect via Fiddler, there is nothing in the request that shows these form fields are being submitted.
Is there something additional that needs to be done to get these to submit?
Btw, these two links discuss formData...
https://github.com/blueimp/jQuery-File-Upload/wiki/Submit-files-asynchronously
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
...for this one search the page for formData.
For what its worth, the multipart option is set to true.
I also needed to pass an extra parameter and here is what i used :
$('#fileupload').fileupload({
formData: {
param1: 'test'
,param2: "value2"
,param3: "yasseshaikh"
}
});
The formData option can be used to set additional form data programmatically.
Complete code (I modified the answer provided by Yasser)
Add these code into jquery.fileupload.js
submit: function (e, data) {
$('#fileupload').fileupload({
formData: {
param1: 'test'
,param2: "value2"
,param3: "yasseshaikh"
}
});
},
If the blueimp plugin isn't a requirement I would really recommend the jquery malsup form.
You can use a regular multipart form and just create a regular file input field along with other input fields of your own choice and everything is submitted as usual.
Reference: http://www.malsup.com/jquery/form/
Code sample:
$('#myForm2').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
You have to bind Your data to fileupload. Look at this question
Blueimp jQuery file upload, passing extra form data
Related
I have a form on form-window, and inside form window I have a form with many fields and one upload button. When try to submit form using Ajax.request I have got textfield value but can not get file data. Except filename.
var fd = Ext.getCmp('users-form').form;
var fileInput = document.getElementById('company_logo');
console.log(fd.getEl().dom.files);
params = {
name : fd.findField('name').getValue(),
login : fd.findField('login').getValue(),
email : fd.findField('email').getValue(),
password : fd.findField('password').getValue(),
password_repeat : fd.findField('password_repeat').getValue(),
id : fd.findField('id').getValue()
company_logo : fd.findField('logo').getValue()
}
console.log(params);
Ext.Ajax.request({
url: Scada.reqUrl('users', 'save'),
method: 'post',
params: {
data: Ext.encode(params)
},
success: function() {
console.log('in success');
},
failure: function() {
console.log('in failure');
}
});
Here logo is input type file. I want to send logo data with ajax request. Please help me to figure out the problem. Thanks
Not sure why you started a new question instead of editing Encode form data while fileupload true in Extjs Form Submit as this seems to be the same problem.
Assuming logo is your file upload field you are trying to get the file data using getValue does not actually return the file content (if you use modern there is a getFiles method which returns the selected file objects).
General problems with your approach:
As I stated in my original answer it is not a good idea to send files in a standard ajax request. In your case those problems are:
If you expect getValue to return file contents, you are potentially encoding binary data into a JSON string. This will maybe work but create a large overhead and as the only available JSON datatype that could handle this content is string your parser would have to guess that property company_logo contains binary data and needs to be somehow converted into some sort of file reference.
You are sending files without metadata, so when just adding the raw content into your JSON string you would not be able to detect the expected file type without testing the file in multiple ways
As far as I know you would not be able to access the file content in classic toolkit at all
Submitting the data as a form: In your original question you explained that you submit the form instead of doing Ajax requests which is generally the preferred way.
When you submit a form that contains a file upload field the form will automatically be submitted as multipart/form-data the raw files are added to the request body with it's original content while preserving metadata collected by the browser.
If you look at https://docs.sencha.com/extjs/7.0.0/modern/Ext.Ajax.html#method-request you would have to set isUpload to true and use the form proeprty instead of params, passing a reference to the parent form.
I am using jQuery serialize() function to collect data in a form and submit to server using jQuery Ajax "post" method, like this: var params = jQuery('#mainContent form').serialize();.
The strange thing I saw is the serialized data from my form contains old data. It means, all of my changes in form (input to text-field, select on combo-box) is not stored to DOM, so when jQuery call serialize(), it collect the old data which appeared before I change the form. I tried to inspect to each element in that form and call .val(), it still showed the old values.
So how can I persist all my changes to form, that the serialize() method can build the string with newest data I entered?
Here is my snippet code, I called serialize() inside submit handler
jQuery('.myFormDiv input.submit').click(function() {
// Do something
// Collect data in form
var params = jQuery('#mainContent form').serialize();
// Submit to server
jQuery.post(url, params, successHandler);
}
Thank you so much.
When are you calling serialize? it should be $('form').submit( [here] ); It sounds like it's being called on page load, before you enter values into the fields, then being used after.
EDIT:
using the submit event instead of on click will catch someone hitting enter in a text field.
jQuery('#mainContent form').submit(function() {
// Collect data in form
var params = jQuery(this).serialize();
// Submit to server
jQuery.post(url, params, successHandler);
}
*the above code assume url is define and successHandler is a function.
I need to send a complete form via ajax to prevent the refresh of the complete page. Since the form has a huge number of inputfields, i dont want to build the querystring manually. I found some scripts collecting all elements in the form and building the querystring automatically. But is there any easier way to build the query string automatically?
using serialize() method of your jquery form wrapper object !
see : http://api.jquery.com/serialize/
http://api.jquery.com/serialize/
http://api.jquery.com/serializearray/
Try jQuery serialize.
Example from jQuery site
$('form').submit(function() {
alert($(this).serialize());
return false;
});
You can use jQuery .serialize to serialize all input fields in the form. Try below script and alert the value,
var formValues = $('form').serialize();
alert(formValues);
you need to have the info in your page and send it in a query string to another page right??
you could simply add the Previous page Type directive in the page you're redirecting to, and add properties in your first page to return the values in the controls and call it using previous page property
refer to this article
I'm working on a form upload element that can be used in the Zend Framework forms. I'm trying to make it so the programmer can use it in any project without having to manually configuring any settings.
The files are uploaded by an AJAX uploader which returns JSON data like:
[
{
"name":"image.png",
"size":42410,
"type":"image\/png",
"url":"http:\/\/example.com\/image.png",
"thumbnail_url":"http:\/\/example.com\/thumbnail\/image.png",
}
]
Since the uploader itself is a form element I'm trying to put that data in the form so on the submit the values can be retrieved from the $_POST.
I was adding hidden input fields with javascript named uploader-data[] (when submitting the form) but that only allows me to pass 1 variable at the time to the hidden field.
So I guess my question is: "How can I pass the whole array/object to the $_POST / form?". Even though I am using AJAX for the uploader itself I don't want to use it to submit the form. I want a regular form submit containing all the data from the JSON object/array. The files itself are already uploaded but I might want to use the JSON data in my database or at some other place.
Is it possible to do something like this?
Thanks in advance.
Put your javascript value into an input field using JSON.stringify
:
data = [
{
"name":"image.png",
"size":42410,
"type":"image\/png",
"url":"http:\/\/example.com\/image.png",
"thumbnail_url":"http:\/\/example.com\/thumbnail\/image.png",
}
]
document.getElementById('my_hidden_input').value = JSON.stringify(data);
This will turn your array in the following text value:
[{"name":"image.png","size":42410,"type":"image/png","url":"http://example.com/image.png","thumbnail_url":"http://example.com/thumbnail/image.png"}]
Zend can parse the JSON value into a php array.
I want to encrypt some data in a form using jQuery before it's sent to the server, it can be a MD5 hash. It is a small project, so I don't really need to use SSL.
I have the following JavaScript code where I use $.md5 in the password confirmation info:
$(document).ready(function() {
var dataToSend = {};
dataToSend['action'] = 'signup';
dataToSend['name'] = name.val();
dataToSend['email'] = email.val();
dataToSend['confsenha'] = $.md5(pass2.val());
var options = {
target: '#error',
url: 'insert.php',
beforeSubmit: validate,
data: dataToSend,
success: function(resposta) {
$('#message').html(resposta);
}
};
$('#customForm').ajaxForm(options);
});
The problem is that the data is being duplicated. I tought that overwriting the data being sent by using the var dataToSend would make ajaxForm send only data in that map. But besides sending data from dataToSend, it also sends data from the form, so what I wanted to encrypt using MD5 appears both encrypted and clean. This is an example of what goes in the request:
usuario=user&email=user%40email.com&senha=12345&confsenha=12345&send=&action=signup&name=user&email=user%40email.com&confsenha=d41d8cd98f00b204e9800998ecf8427e
I know I have to define the a function beforeSerialize, but I don't know how to manipulate form data. Can anyone tell me how to do that?
As per the documentation on the plugin site:
data
An object containing extra data that should be submitted
along with the form.
The word along is the crux.
So when you pass data as a part of the options object that data is serialized and is sent along with any data/input elements values that are part of a form.
A better approach would be to hash the password value and assign it to the same field or another hidden field in the beforeSubmit handler(in your case the validate function) and remove the dataToSend object totally.
Something like:
Without any hidden element:
function validate(){
//Other Code
pass2.val($.md5(pass2.val()));
}
With a hidden element in the form:
function validate(){
//Other Code
$("#hdnPass").val($.md5(pass2.val()));
pass2.val("");
}