Jquery Ajax file upload with percentage changer

Question

$(document).ready(function() {


  $('#upload-btn').on('click', function() {


    $('#upload-input').click();
    $('.progress-bar').text('0%');
    $('.progress-bar').width('0%');

    $('#upload-input').on('change', function() {
      var uploadInput = $('#upload-input').val(); 

      if (uploadInput != '') {
        var formData = new FormData();
        console.log(uploadInput[0]);
        formData.append('upload', uploadInput[0].files[0]).val();

        $.ajax({
          url: '/upload',
          type: 'POST',
          data: formData,
          processType: false,
          contentType: false,
          success: function(data) {
            $('#upload-input').val('');
          },
          xhr: function() {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {

              if (e.lengthComputable) {
                var uploadPercent = e.loaded / e.total;
                uploadpercent = (uploadpercent * 100);
                $('.progress-bar').text(uploadpercent + '%');
                $('.progress-bar').width(uploadpercent + '%');

                if (uploadpercent == 100) {
                  $('.progress-bar').text('Completed');
                }
              }
            }, false);

            return xhr;
          }
        })
      }
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" rel="stylesheet" type="text/css" > 
<form method="POST" action="/company/create">

  <div class="form-group ">
    <label for="">Company Name</label>
    <span id="errorMsg1"></span>
    <input id="name" class="form-control" name="name" type="text" style="margin-bottom:20px;">
  </div>

  <div class="form-group ">
    <label for="">Address</label>
    <span id="errorMsg2"></span>
    <input id="address" class="form-control" name="address" type="text" style="margin-bottom:20px;">
  </div>

  <div class="form-group ">
    <label for="">City</label>
    <span id="errorMsg3"></span>
    <input id="city" class="form-control" name="city" type="text" style="margin-bottom:20px;">
  </div>

  <div class="form-group ">
    <label for="">Country</label>
    <span id="errorMsg4"></span>
    <input id="country" class="form-control" name="country" type="text" style="margin-bottom:20px;">
  </div>

  <div class="form-group ">
    <label for="">Sector</label>
    <span id="errorMsg5"></span>
    <input id="sector" class="form-control" name="sector" type="text" style="margin-bottom:20px;">
  </div>

  <div class="form-group ">
    <label for="">Website</label>
    <span id="errorMsg6"></span>
    <input id="website" class="form-control" name="website" type="text" style="margin-bottom:20px;">
  </div>

  <div class="form-group ">
    <label for="">Company Image</label><br>

    <button class="btn btn-lg" type="button" data-toggle="modal" data-target="#file">Add File</button>
    <span id="completed"></span>

    <div id="file" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" id="close" class="close" data-dismiss="modal">&times;</button>
            <div class="modal-title">Upload Image</div>
          </div>

          <div class="modal-body">
            <div class="row">
              <div class="progress">
                <div class="progress-bar" role="progressbar"></div>
              </div>

              <button class="btn btn-lg upload-btn" id="upload-btn" " type="button ">Upload File</button>
                                            <input type="file " class="form-control " name="upload " id="upload-input " style="display:none ">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>


                    <div class="form-group ">
                        <input type="submit " id="register " value="Register " class="form-control btn btn-primary " name="register " style=" ">
                    </div>

                </form>

var uploadInput = $('#upload-input').val();

Here uploadInput only has file path nothing else so what happens is that when I try to access the file with uploadInput[0].files[0] I get the following error Cannot read property '0' of undefined

So why is this happening >?

  if (uploadInput != '') {
    var formData = new FormData();
    console.log(uploadInput[0]);
    formData.append('upload', uploadInput[0].files[0]);

Possible duplicate of [How to use FormData for ajax file upload](https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload) — t3__rry, Feb 23 '18 at 08:49
@t3__rry nope my issue is different I am only getting c\fakepath\filname as value of upload.So I cannot access the file as instead of file I am getting string which is its path — codefreaK, Feb 23 '18 at 09:10

plonknimbuzz · Answer 1 · 2018-02-23T10:38:45.750

you just miss this

var uploadInput = $('#upload-input').val(); to var uploadInput = $('#upload-input');

and

processType: false, to processData: false,

and the typo

uploadPercent to uploadpercent

the rest is works

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" rel="stylesheet" type="text/css" > 


<form method="POST" action="/company/create">

 <div class="progress">
  <div class="progress-bar" role="progressbar"></div>
 </div>
 <button class="btn btn-lg upload-btn" id="upload-btn" type="button">Upload File</button>
 <input type="file" class="form-control" name="upload" id="upload-input" >
 
</form>


<script>
$(document).ready(function() {

 $('#upload-input').change(function(){
  $('.progress-bar').text('0%');
  $('.progress-bar').width('0%');
 });
 $('#upload-btn').on('click', function() {
  $('.progress-bar').text('0%');
  $('.progress-bar').width('0%');
  var uploadInput = $('#upload-input'); 

  if (uploadInput[0].files[0] != undefined) {
   var formData = new FormData();
   formData.append('upload', uploadInput[0].files[0]);

   $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    //processType: false, WRONG syntax
    processData: false,
    contentType: false,
    success: function(data) {
     $('#upload-input').val('');
    },
    xhr: function() {
     var xhr = new XMLHttpRequest();
     xhr.upload.addEventListener("progress", function(e) {
      if (e.lengthComputable) {
       //var uploadPercent = e.loaded / e.total; typo uploadpercent (all lowercase)
       var uploadpercent = e.loaded / e.total; 
       uploadpercent = (uploadpercent * 100); //optional Math.round(uploadpercent * 100)
       $('.progress-bar').text(uploadpercent + '%');
       $('.progress-bar').width(uploadpercent + '%');
       if (uploadpercent == 100) {
        $('.progress-bar').text('Completed');
       }
      }
     }, false);
     
     return xhr;
    }
   })
  }
    });
});
</script>

sorry that was a typo on my part had commented out that part earlier before pasting here to check what was that I receive . — codefreaK, Feb 23 '18 at 09:22

Jquery Ajax file upload with percentage changer

1 Answers1