ajaxSubmit uploadprogress always return 100

Question

I am trying to make a progress bar to show the user how much of the file is uploaded, I am using ajaxSubmit and uploadprogress function, however this function doesn't update it just gives me 100 and that is 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>

Chefoo

Anyone could answer this? – Hopscotch

Surprise no one responded to this thread yet. – Shannonshanny

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

Inward

Answer 2

I found the solution for this problem, i had to deploy my code to the server, i was trying it on my localhost that is way it always gave me 100%

Chefoo

Answer 3

try this

$.ajax({
        xhr : function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e){
                if(e.lengthComputable){
                    //you can get percent here
                    var percent_total = Math.round((e.loaded / e.total) * 100);
                    //then do with your progress bar, i used bootstrap here
                    $('#theProgressBar').attr('aria-valuenow', percent_total).css('width', percent_total + '%').text(percent_total + '%');
                }
            });
            return xhr;
        },
        url: url,
        data: formdata,
        processData: false,
        contentType: false,
        type: 'POST',
        dataType: "json",
        success: function (response) {

        },
        err: function(err){

        }
});

Havildar

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes – Dale