Because the handling of file uploads can vary, your files will submitted to your success function as a filelist. From there, you are free to handle them appropriately.
{
"name": "fileExample",
"id": "fileId",
"type": "file",
"label": "File Upload Example",
"formGroup": true,
"classname": "",
"disabled": false,
"autofocus": false,
"data": {
"field": 0,
"testing": 123,
},
"helpBlock": "Only image files are accepted",
"title": "File Upload Example",
"required": true,
"accept": "image/*",
"multiple": true
}
{
"name": "fileExample",
"type": "file",
"label": "File Upload Example",
"helpBlock": "Only image files are accepted",
"required": true,
"accept": "image/*",
"multiple": true
}
The easiest way to submit form fields and files simultaneously. Although you will have to delete any unnecessary fields (eg: buttons, honeypots, etc).
submit: function (formdata) {
var fd = new FormData($('form')[0]);
$.ajax({
url: './upload',
type: 'POST',
data: fd,
processData: false,
contentType: false,
cache: false
})
.done(function (res) {
console.log(res);
})
.fail(function (xhr, status, err) {
console.log(err);
});
}
Sometimes it’s just easier to manually append file names to a FormData object.
submit: function (formdata) {
var fd = new FormData();
fd.append('myfile', formdata.myfilefield[0]);
fd.append('sometextfield', formdata.textfield);
//... other text fields appended there
$.ajax({
url: './upload',
type: 'POST',
data: fd,
processData: false,
contentType: false,
cache: false
})
.done(function (res) {
console.log(res);
})
.fail(function (xhr, status, err) {
console.log(err);
});
}
submit: function (formdata) {
var fd = new FormData();
$.each(formdata.myfilefield, function (i) {
fd.append('myfile', formdata.myfilefield[i]);
});
// Lets say we have a lot of text fields to send with the files
// first delete the file object
delete formdata.myfilefield;
// loop through the fields and append them to the formData object
$.each(formdata, function (k, v) {
fd.append(k, v);
});
$.ajax({
url: './upload',
type: 'POST',
data: fd,
processData: false,
contentType: false,
cache: false
})
.done(function (res) {
console.log(res);
})
.fail(function (xhr, status, err) {
console.log(err);
});
}