title: Jquery Ajax file upload with percentage changer
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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;
            }
          })
        }
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" rel="stylesheet" type="text/css" &gt; 
  &lt;form method="POST" action="/company/create"&gt;
  
    &lt;div class="form-group "&gt;
      &lt;label for=""&gt;Company Name&lt;/label&gt;
      &lt;span id="errorMsg1"&gt;&lt;/span&gt;
      &lt;input id="name" class="form-control" name="name" type="text" style="margin-bottom:20px;"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group "&gt;
      &lt;label for=""&gt;Address&lt;/label&gt;
      &lt;span id="errorMsg2"&gt;&lt;/span&gt;
      &lt;input id="address" class="form-control" name="address" type="text" style="margin-bottom:20px;"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group "&gt;
      &lt;label for=""&gt;City&lt;/label&gt;
      &lt;span id="errorMsg3"&gt;&lt;/span&gt;
      &lt;input id="city" class="form-control" name="city" type="text" style="margin-bottom:20px;"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group "&gt;
      &lt;label for=""&gt;Country&lt;/label&gt;
      &lt;span id="errorMsg4"&gt;&lt;/span&gt;
      &lt;input id="country" class="form-control" name="country" type="text" style="margin-bottom:20px;"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group "&gt;
      &lt;label for=""&gt;Sector&lt;/label&gt;
      &lt;span id="errorMsg5"&gt;&lt;/span&gt;
      &lt;input id="sector" class="form-control" name="sector" type="text" style="margin-bottom:20px;"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group "&gt;
      &lt;label for=""&gt;Website&lt;/label&gt;
      &lt;span id="errorMsg6"&gt;&lt;/span&gt;
      &lt;input id="website" class="form-control" name="website" type="text" style="margin-bottom:20px;"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group "&gt;
      &lt;label for=""&gt;Company Image&lt;/label&gt;&lt;br&gt;
  
      &lt;button class="btn btn-lg" type="button" data-toggle="modal" data-target="#file"&gt;Add File&lt;/button&gt;
      &lt;span id="completed"&gt;&lt;/span&gt;
  
      &lt;div id="file" class="modal" tabindex="-1" role="dialog"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" id="close" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;div class="modal-title"&gt;Upload Image&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="modal-body"&gt;
              &lt;div class="row"&gt;
                &lt;div class="progress"&gt;
                  &lt;div class="progress-bar" role="progressbar"&gt;&lt;/div&gt;
                &lt;/div&gt;
  
                &lt;button class="btn btn-lg upload-btn" id="upload-btn" " type="button "&gt;Upload File&lt;/button&gt;
                                              &lt;input type="file " class="form-control " name="upload " id="upload-input " style="display:none "&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          
                      &lt;/div&gt;
  
  
                      &lt;div class="form-group "&gt;
                          &lt;input type="submit " id="register " value="Register " class="form-control btn btn-primary " name="register " style=" "&gt;
                      &lt;/div&gt;
  
                  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>var uploadInput = $('#upload-input').val(); </p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p>So why is this happening >?</p>
  
  <pre><code>  if (uploadInput != '') {
      var formData = new FormData();
      console.log(uploadInput[0]);
      formData.append('upload', uploadInput[0].files[0]);
  </code></pre>