Jqueryfileupload BlueImp Multiple file uploads with sendAPI

Vote count:

0

I am trying to send multiple files with one ajax call . THe problem is i cant get my progress work out getting this line

TypeError: data.context is undefined
data.context.find('input').val(progress).change();

Cant figure out how to manage progress for each tpl with sendAPI >?I searched a lot try out different thing the basic reason for doing this is i want one ajax request and to have control after that request completes .

MYHTML


 <form  id="upload" method="post" action="upload.php"    enctype="multipart/form-data">
      <div>

            <div id="drop">
               Drop Here <span style="color:white;text-transform:none;font-size: 13px">     OR    <span>

                     <a>Browse</a>
                     <input type="file" name="upl[]" multiple/>


                     </div>

                     <ul>
                        <!-- The file uploads will be shown here -->
                     </ul>
                     </div>
                     </form>



MY JQUERY 

// Initialize the jQuery File Upload plugin
       $('#upload').fileupload({
          disableImageResize: /Android(?!.*Chrome)|Opera/
                  .test(window.navigator && navigator.userAgent),
           imageMaxWidth: 100,


          imageMaxHeight: 100,
          maxFileSize: 5000000,
          acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
          dropZone: $('#drop'),
          add: function(e, data) {

                     var type = data.files[0].type;
             var size = data.files[0].size;
             if ( type == 'image/jpeg' || type == 'image/png' || type == 'image/gif' ) {

                if(size<=350000000)
                {
                //   var preview = '<img src="' + URL.createObjectURL(data.files[0]) + '"/>';
                var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' +
                        ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><div class="preview"></div><p></p><span></span></li>');
                tpl.find('p').text(data.files[0].name).append('<i>' + formatFileSize(data.files[0].size) + '</i>');
                loadImage(data.files[0],
                        function(img) {
                           tpl.find('.preview').html(img);
                        },
                        {
                           minWidth: 80,
                           minHeight: 60, maxWidth: 80, maxHeight: 60, contain: true} // Options
                );


                // Add the HTML to the UL element
                data.context = tpl.appendTo(ul);

                // Initialize the knob plugin
                tpl.find('input').knob();

                // Listen for clicks on the cancel icon
                tpl.find('span').click(function() {

                   if (tpl.hasClass('working')) {
                      jqXHR.abort();
                   }

                   tpl.fadeOut(function() {
                      tpl.remove();
                   });

                });

               myfiles.push(data.files[0]);

             } else{ 
              noty({type:'error',text: 'file exceeds limit of 350Kb'}); 
             }//check for file type

          } else 
             {
                 noty({type:'error',text: 'Invalid file type.Please make sure image has valid extension jpeg|gif|jpg'});  
             }


    //         $('#post_picture').on('click',function(){
    //            
    //          
    //             
    //            var jqXHR = data.submit().success(function (result, textStatus, jqXHR) {ar.push(result)});
    //            
    //            
    //             tpl.fadeOut(function() {
    //                  tpl.remove();
    //               });
    //            $('#post_picture').off('click');
    //           
    //            
    //            
    //         });






          },
          complete:function(e,data)
          {


          },
           progress: function(e, data) {

             // Calculate the completion percentage of the upload
             var progress = parseInt(data.loaded / data.total * 100, 10);

             // Update the hidden input field and trigger a change
             // so that the jQuery knob plugin knows to update the dial
             data.context.find('input').val(progress).change();

             if (progress == 100) {
                data.context.removeClass('working');
             }
          },
          fail: function(e, data) {
             // Something has gone wrong!
             data.context.addClass('error');
          }




       });

       $(document).on('click','#post_picture',function(){
          alert('asdas');
     $('#upload').fileupload('send', {files: myfiles});
       });

asked 2 mins ago

Abdul Basit

85