0

I have been stuck at this for so long, I finally gave up and decided to ask help from here

I have researched multiple topics on blueimp here but none of the solutions have worked for me

materials that I've tried

Uploading multiple files from multiple input fields programatically - blueimp jquery fileupload

including topics covered in there, also

jQuery File Upload not working when file input dynamically created

etc

My problem is that project that I'm working on uses MultiFile.js (https://github.com/fyneworks/multifile) alongside with blueimp file uploader

What multifile.js does is it dynamically creates new inputs for files and hides those where input has been added.

I've been at it for days now but Blueimp file uploader only takes the initial input, uploads only that one file and add method ignores all other input fields. Here is my code so far

$(function() {
 'use strict';
 $(window).on('change', function(e) {
     var form = $("form");

         var multiPartAttribute = 'multipart/form-data';
         form.attr('enctype', multiPartAttribute).attr('encoding', multiPartAttribute);

         var barContainer = $('#container-upload-prg');
         var bar = barContainer.find('#inner-upload-prg');

         var pushButton = $("#saveMat");

         form.fileupload({
             dataType: 'json',
             replaceFileInput: false,
             autoUpload: false,
             add: function(e, data) {
                 pushButton.off('click').on('click', function() {
                     barContainer.css("display", "inline-block");
                     data.submit();
                 });
             },
             done: function(e, data) {
                 barContainer.css("display", "none");
                 var result = data.result;
                 if (result.ok == true) {

                     $('#MaterialSuccessText').html(result.message);
                     $(".close").click();
                 } else if (result.ok == false) {
                     $('#MaterialErrorText').html(result.message);
                 }
             },
             progressall: function(e, data) {
                 var percent = parseInt(data.loaded / data.total * 100, 10);
                 bar.css('width', percent + '%');
                 bar.text(percent + '%');
             },
             submit: function (e, data) {
                 var formData = $("form").find(':hidden, :text, textarea').serializeArray();
                 formData.push({ name: '__EVENTTARGET', value: 'do_save_files' });

                 data.formData = formData;
             }
         });
     };
 }).trigger('change');
 });
2
  • Hard to tell witout seeing any relevant HTML markup. But just looks like you are using duplicate IDs. IDs must be unique on document context Commented Feb 2, 2016 at 15:00
  • Html is a massive asp.net webforms markup thought it wouldn't be wise to include it. Input fields aren't with duplicate ID-s, they are generated as follows : 1. Input : Id = "FileUpload", 2nd input Id = FileUpload_F1 and so on. and it is all wrapped in div with Id of "fileupload_wrap" Or did i miss something, where did you read about duplicate Id-s Commented Feb 2, 2016 at 15:42

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.