I'm trying to use the blueimp/jQuery-File-Upload plugin to programmatically send more than one file input field though the same form.
When user select form files, it just append them in a JS variable to further send them with $('#form').fileupload('send') method on form submission. My goal is to use the exactly same synchronous form I was using before in an asynchronous way. So when user click on form submit button, it prevents default action and them let the plugin to do the task, sending all form data and displaying overall upload progress.
I'm mainly following these guides:
https://github.com/blueimp/jQuery-File-Upload/wiki/API
https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form
Actually it's almost working, but it does not send more than one input file to the server end. In fileuploadadd event I'm pushing data.files[0] (my file inputs are single file only, but each of them use different accept attributes) to a "global" uploadable array and then on form submission I use something like $('#form').fileupload('send', {files: uploadable}).
I guess I'm not doing it the right way, since only one file is being sent along with form data. What is the correct way to programmatically send more than one file input file using a single form?
I'm also not too confident about overall upload progress... If I use fileuploadprogressall event to read the upload progress will it be reporting the progress of all uploaded files?
JS (simplified)
$(function () {
var uploadable = [];
$('#form').fileupload({
autoUpload: false,
singleFileUploads: false,
add: function (event, data) {
uploadable.push(data.files[0]);
return false;
},
// other event callbacks
})
.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
$('#form').submit(function (event) {
event.preventDefault();
$('#form').fileupload('send', {files: uploadable});
});
});
HTML
<form id="form" action="upload" method="post" enctype="multipart/form-data">
<!-- other text/hidden inputs that will also be sent -->
<input type="file" name="image" id="image" accept="image/*" />
<input type="file" name="video" id="video" accept="video/*" />
</form>
uploadable.push(data.files[0])
You vividly told the compiler to only push the first file.
Have you tried using foreach and push all files?
Thank you,
Related
I am trying to make it so when a file is submitted, a form gets submitted. Currently the form is submitting (the page refreshes), however the form data isn't being sent.
Javascript:
$(function () {
$("#moreHomepageImages").change(function () {
//I tried all of the following, all don't work
$("#imageHomepageForm").submit();
//$("#imageHomepageForm")[0].submit();
//document.getElementById("imageHomepageForm").submit();
});
)};
Html:
<form id="imageHomepageForm" name="imageHomepageForm" enctype="multipart/form-data" action="add" method="post">
<input type="hidden" name="object" value="homepage">
<input type="hidden" name="object_id" value="0">
<label>Add More Images</label>
<input id="moreHomepageImages" type="file" name="images[]" multiple="multiple"/>
</form>
On the add page, I have
print_r($_POST);
print_r($_GET);
print_r($_FILES);
and they print 3 empty arrays. I can't figure out why the form data isn't being sent along with the request? When I add a submit button into the form and click it, the data is sent as it is supposed to,
If it matters, the form is inside a jQuery Tab (http://jqueryui.com/tabs/)
EDIT: The action attribute is not the issue since it works if I use a normal input button and click it, I am using codeigniter so I do not need .php
The issue had nothing to do with jQuery or my code, for some reason the MAX_FILE_UPLOAD in my local php config wasn't reading properly and the images I tried uploaded where > 2MB (the default) breaking the request payload...
As to why submitting the form via clicking a submit button works and submitting over jQuery didn't is beyond me...
I have some server side restriction.
I want to read file to server one by one using javascript, in such a way that second file will post only after the response from previous file is received.
I have a multiple file upload in my webform as below:
<form id="frmSearchByC2V" method="post" enctype="multipart/form-data">
<input class="file" style="width:50px" type="file" name="c2vFile" id="txtSearchC2V" disabled onchange="locateFiles();" />
</form>
In my javascript i have code something like
<script>
function locateFiles()
{
var fileChooserControl = document.getElementById("txtSearchC2V");
var selectedFileLength = fileChooserControl.files!=null?fileChooserControl.files.length:1;
for(var i=0; i < selectedFileLength; i++)
{
document.forms["frmSearchByC2V"].action="locateFiles.html;
//Ajax call to submit the form
AIM.submit(document.getElementById("frmSearchByC2V"), {'onStart' : function(){return true;}, 'onComplete' : function(response){
loadSearchTargetGrid(response);
}});
document.getElementById("frmSearchByC2V").submit();
}
}
function loadSearchTargetGrid(response)
{
alert(response);
}
</script>
My problem is that whenever i post multiple file using window browser button. Everytime a received the same file to server. eg i choose file.txt,file2.txt,file3.txt and submit the form via javascript, i receive file3.txt in every request i made to the server.
Please provide the solution to fix this issue
If you're using YUI, you can use the Uploader utility. Uploader will upload each file in its own POST request and additionally you can set its simLimit attribute to 1 so that it only makes one request at a time. See: http://yuilibrary.com/yui/docs/uploader/.
Well, I have a lot of input fields in a form, some of them are like this:
<input name="agents[]" type="file" />
Moreover suppose there is a plus button besides this field like this:
<img src="plus.jpg" id="some_id" />
A user can add more agents field in addition to the one field present already.
So I was wondering how would I handle these kind of input fields when submitting form data through Ajax? Using JavaScript objects perhaps?
What's the main problem?
For Ajax uploading i'm using https://github.com/blueimp/jQuery-File-Upload
For handling dinamic form contents i use jquery .serialize()
Like this
var info = $("#additem").serialize();
$.post('/url.php', info, function(data) {
// response
}, 'json');
"additem" is the id of the form
<form id="additem">
I have a page file-upload.jsp with the code snippet below:
<form action="" id="frmupload" name="frmupload" method="post" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upload_file" multiple="" />
<input type="submit" value="Update" />
</form>
I have 2 questions:
The moment I select some files, i.e the onchange event of the input type file, the file(s) should get uploaded.
I have a Java page that receives multipart request parameter and uploads the file to the said location. My problem is the form submission onchange, so that the Java file can proceed with further operations.
I googled and went through lot of articles. Some say it's not possible to upload files directly via Ajax, some say submit the form to an iframe via Ajax/jQuery.
I tried a lot of code from internet, such as this:
$(document).ready(function(){
$('upload_file').change(function(){
var data = new FormData();
data.append('file', $(this[0].files[0]));
$.ajax({
url: 'photo.jsp',
type: 'post',
contentType: attr('enctype', "multipart/form-data"),
data: data,
success: function(data){
alert(data);
}
})
});
});
but could not get the expected results.
I also need a progress bar for the upload operation.
Look at this example using an IFrame, is in PHP but changing the action should do the trick
Ajax Style File Uploading Using Hidden IFrame
Since you're already using jQuery, I would definitely go for the jQuery Form Plugin, which allows you to do form uploads via AJAX, even if the form contains a file input.
There is an example on its website available that shows how to display a progress bar.
Look at this example it is exact as you want
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/asyncfileupload/asyncfileupload.aspx
I have a form which I'm using to upload files. In current situation if a user choose an image from his computer he have to click button upload to upload the image. I'm trying to find a way to skip the step with a button pressing.
How to call a javascript function when the file is selected from user ?
The onchange event is fired when a user specify a file for the upload filed. You could go about something like this:
<input type="file" name="someName" id="uploadID" />
Javascript:
var el = document.getElementById('#uploadID');
el.onchange = function(){
// your code...
};
However, javascript validation is good idea but make sure that you do the actual validation on the server-side :)
Using the example above...
<input type="file" name="someName" id="uploadID" />
JavaScript
document.getElementById('uploadID').addEventListener('change', () => {
//Your code...
});