AjaxSubmit uploadprogress always returns 100

Question

I'm trying to make a progress bar to show the user how much of the file is downloaded, I use the ajaxSubmit and uploadprogress functions, however this function does not update it, it just gives me 100 , and that’s it:

Here is my JS code:

  function UploadImage(){ $('#new-post-upload-images').ajaxSubmit({ dataType: "json", beforeSend: function(a,f,o) { $('input.images').unwrap().css('display','none'); $('#new_post_overlay,#upload_plus,#upload_wrapper .edit-menu-post').remove(); $(".new_post_btn").attr('disabled', true); $(".load_new_post").show(); }, uploadProgress: function(event, position, total, percentComplete) { console.log(percentComplete + '%'); }, complete: function(XMLHttpRequest, textStatus) { var data= XMLHttpRequest.responseText; var jsonResponse = JSON.parse(data); $(".load_new_post").hide(); $('#new_post_wrapper').append('<div class="edit-menu-post"><a class="delete dismiss_image dismiss icon-cancel" title="Remove"><span>Delete</span></a><a class="repos-drag icon-drag" title="Reposition"><span>Reposition</span></a></div><div style="width:100%;height:100%;background-repeat: no-repeat;background-size: cover;position: relative;" id="preview"></div>').parent().find('.bg-port').val('0px 0px'); $('#preview').css('background-position', '0 0').css('background-image', 'url(' + jsonResponse[0]["path"] + ')'); var ids = $.map(jsonResponse, function(n){ return n["id"]; }); $('#uploaded_images_ids').val(ids.join("#")); $(".new_post_btn").attr('disabled', false); } }); 

}

Here is my Ruby and HTML code:

  <div id="upload_wrapper"> <%= form_tag(upload_images_path, :multipart => true, method: :post ,id: "new-post-upload-images") do %> <div class="new_photo_viewport"> <div class="load_new_post" style="340px"> <div><h2>Uploading <%= image_tag("ajax-loader2.gif") %></h2></div> </div> <div class="new_post_error edit-menu-post" style="background-color: #fff;"> <span><b>Recommendation:</b> Picture dimensions should be at least 800 x 600 for better quality and the size doesn't exceed 12MB</span> </div> <div id="new_post_wrapper" class="new_post_viewport" style="display:block;width:100%;height:100%;"> <div class="add_image_button" id="new_post_overlay"> <span class="icon-camera" id="upload_plus"><br><span>Upload</span></span> <%= file_field_tag "images[]", type: :file, accept: "image/*" ,class: "images" %> </div> </div> </div> <% end %> </div> 

Answer 1

Inside beforeSend: function(a,f,o) { add:

 a.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { console.log(evt.loaded / evt.total); } }, false); 

Source: jQuery ajax progress - HTML5

Answer 2

I found a solution to this problem, I had to deploy my code on the server, I tried to use it on my local host, which always gave me 100%