File upload issue when more than 1 file field

File upload issue when more than 1 file field

Hi,
I have a form with 5 <input type="file" .....> fields each with different names. I have the form in a bootstrap modal so am using jquery to post my form and on successfull uploading I will close modal and give a message saying files uploaded successfully.

As the user adds a file I want to add it to some sort of structure then when the user clicks the submit button I want to loop through this structure and upload the files, I have used the functionality at http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax and my code works fine for 1 file field. The issue is when I want to upload more than 1 file. I think the issue is to do with the following code.
=======
  1. // Variable to store your files
  2. var files;

  4. // Add events
  5. $('input[type=file]').on('change', prepareUpload);

  7. // Grab the files and set them to our variable
  8. function prepareUpload(event)
  9. {
  10. files = event.target.files; 

  12. }
=====
When I add a file it goes into the files structure fine but then I add another it overwrites the previous one.
I have tried using push to add the file to the files variable but then uploader doesn't seem to get the file to upload ie. contents of the file dont get included in the upload.

If I have selected 3 files to be uploaded I would expect the files variable to have 3 items.
My whole block of code is as follows.
=====
  1. <script>

  3. $(document).ready(function(){
  4. $("input[type=file]").nicefileinput();

  6. // Variable to store your files
  7. var files;

  9. // Add events
  10. $('input[type=file]').on('change', prepareUpload);

  12. // Grab the files and set them to our variable
  13. function prepareUpload(event)
  14. {
  15. files = event.target.files; 
  16. alert(files);
  17. }

  19. $('#sub_button').off().on('click', uploadFiles);

  21. // Catch the form submit and upload the files
  22. function uploadFiles(event)
  23. {
  24. event.stopPropagation(); // Stop stuff happening
  25. event.preventDefault(); // Totally stop stuff happening

  27. // START A LOADING SPINNER HERE

  29. // Create a formdata object and add the files
  30. var filedata = new FormData();

  32. if(typeof files != 'undefined'){
  33. $.each(files, function(key, value)
  34. {
  35. filedata.append(key, value);
  36. });
  37. }

  39. if(typeof files != 'undefined')
  40. {
  41. var cpCompanyComplianceRequirementID = $('#cpCompanyComplianceRequirementID').val();

  43. $.post('cfdiv/reroute.cfm?nolayout&type=87&cpCompanyComplianceRequirementID=' + cpCompanyComplianceRequirementID)
  44. .done(function(data) {

  46. if (data > 0)
  47. {
  48. var all_good = 1;

  50. $.each(files, function(key, value)
  51. {
  52. $.ajax({
  53. url: 'cfdiv/reroute.cfm?nolayout&type=86&cpCompanyComplianceRequirementResponseID=' + data,
  54. type: 'POST',
  55. data: filedata,
  56. cache: false,
  57. dataType: 'json',
  58. processData: false, // Don't process the files
  59. contentType: false, // Set content type to false as jQuery will tell the server its a query string request
  60. success: function(data, textStatus, jqXHR)
  61. {
  62. if(data == 0)

  64. {
  65. all_good = 0; 
  66. }
  67. },
  68. error: function(jqXHR, textStatus, errorThrown)
  69. {
  70. all_good = 0; 
  71. }
  72. });
  73. });

  75. if (all_good == 1){
  76. // Success
  77. $('#modal_compliance_upload').modal('hide'); 
  78. toastr.success('Files uploaded successfully','Success');

  80. }
  81. else
  82. {
  83. // Handle errors here
  84. console.log('ERRORS: ' + data);
  85. toastr.error('Your files were not uploaded successfully. Please try again.','Error');
  86. }


  89. }
  90. else
  91. {
  92. toastr.error('Documents were not saved. Please try again.','Error');
  93. }


  96. });


  99. }
  100. else
  101. {
  102. toastr.error('No files selected for upload. Please select some files and try again.','Error');
  103. }

  105. }
  106. });
  107. </script>
=====
I have left in all the extra stuff there but as I say it works perfectly with 1 file but any time I add 2 or more only 1 file gets uploaded.

Anyone have any ideas? I've tried various things all day but to no avail.

Thanks,
Paul