By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,853 Members | 2,144 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,853 IT Pros & Developers. It's quick & easy.

blueimp jQuery upload plugin unresponsive in production

100+
P: 228
I have implemented blueimp jQuery upload with CodeIgniter three. It works great in my development server but not in production. I have used the default script.js provided. During upload, the file uploaded shows 100 with tick (to be it is uploaded at least to temporary folder or something) but it never goes anywhere. After upload is completed, it redirects but here, the done event doesn't get fired at all.

I confirmed that my form is never submitted (Controller never been called) and I see no error in the upload JS script. But here is the result of console.log and alerts I get from each method:

Expand|Select|Wrap|Line Numbers
  1. add: function (e, data) {
  2.  
  3.         //this seems to work fin
  4.  
  5.  
  6.         var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
  7.             ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
  8.  
  9.         // Append the file name and file size
  10.         tpl.find('p').text(data.files[0].name)
  11.                      .append('<i>' + formatFileSize(data.files[0].size) + '</i>');
  12.  
  13.         // Add the HTML to the UL element
  14.         data.context = tpl.appendTo(ul);
  15.  
  16.         // Initialize the knob plugin
  17.         tpl.find('input').knob();
  18.  
  19.         // Listen for clicks on the cancel icon
  20.         tpl.find('span').click(function(){
  21.  
  22.             if(tpl.hasClass('working')){
  23.                 jqXHR.abort();
  24.             }
  25.  
  26.             tpl.fadeOut(function(){
  27.                 tpl.remove();
  28.             });
  29.  
  30.         });
  31.  
  32.         // Automatically upload the file once it is added to the queue
  33.          console.log("submitting selected images");
  34.             //behaving as expected
  35.      var jqXHR = data.submit();
  36.  
  37.  
  38.     },
  39.  
  40.  
  41. done: function (e, data) {
  42.         console.log("done event reached");
  43.     //not entering this event AT ALL
  44.       //REDIRECT
  45.  
  46. },
  47.     progress: function(e, data){
  48.       //This one logs progress as 100, 95,3 etc for one file. I assume that is also expected behaviour tho I found it odd it starts with 100 and goes down. I am uploading only one file to try.
  49.  
  50.         var progress = parseInt(data.loaded / data.total * 100, 10);
  51.  
  52.  
  53.         data.context.find('input').val(progress).change();
  54.  
  55.         if(progress == 100){
  56.             data.context.removeClass('working');
  57.  
  58.  
  59.         }
  60.        console.log("progress");
  61.     },
  62.  
  63.     fail:function(e, data){
  64.         // This is logged if I refresh the page only (to try again).
  65.           console.log(data.context);
  66.           console.log('fail event fired');
  67.         data.context.addClass('uploadError');
  68.     },
  69.     success:function(e, data){
  70.         //file uploaded awesome
  71.         //this event never reached.
  72.  
  73.     },
  74.     always:function(e, data){
  75.         //file uploaded awesome
  76.         //this fires only if I hit the refresh button to reload the page again
  77.         alert(data);
  78.     }
Any clue where it is failing and why so much difference when the server and development envrions are identical? I have confirmed my filesystem rights on the server too.
Mar 3 '16 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.