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>

Surprise no one responded to this thread yet. – Ryan Fung May 27 '15 at 09:18 — Ryan Fung, May 27 '15 at 09:18

score 0 · Answer 1 · answered May 28 '15 at 07:32

0

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

answered May 28 '15 at 07:32

Ethan

87
7

score 0 · Answer 2 · answered Jun 01 '15 at 03:05

0

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%

answered Jun 01 '15 at 03:05

Seif El Deen Khaled

263
2
8

score 0 · Answer 3 · answered Mar 24 '21 at 06:25

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){

        }
});

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 — Ran Marciano, Mar 24 '21 at 07:13

ajaxSubmit uploadprogress always return 100

3 Answers3