$('#upForm').on('submit', function (e){
  //$('#upload-input').click();
  
  $('.progress-bar').text('0%');
  $('.progress-bar').width('0%');
  $('.progress-bar').fadeIn('fast');
  $(this).closest('.progress').fadeIn('fast');
  e.preventDefault();
  console.log('uploadaClicked.'+this);
  var ele = document.getElementsByName('photo');
  var dpath=document.getElementById('dpath');
var files = ele[0].files;
  //console.log('FP: '+this.form.attributes.aid.value+'/'+this.form.attributes.vid.value);
  var aid=this.attributes.aid.value;
  var wid=this.attributes.wid.value;
  if (files.length > 0){
    // create a FormData object which will be sent as the data payload in the
    // AJAX request
    
    var formData = new FormData();

    // loop through all the selected files and add them to the formData object
    for (var i = 0; i < files.length; i++) {
      var file = files[i];

      // add the files to formData object for the data payload
      formData.append('photo', file, file.name);
    }
    formData.append('destPath',dpath.value);
    $.ajax({
      url: '/articles/upload/'+aid+'/'+wid,
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data){
          console.log('upload successful!\n' + data);
      },
      xhr: function() {
        // create an XMLHttpRequest
        var xhr = new XMLHttpRequest();

        // listen to the 'progress' event
        xhr.upload.addEventListener('progress', function(evt) {

          if (evt.lengthComputable) {
            // calculate the percentage of upload completed
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);

            // update the Bootstrap progress bar with the new percentage
            $('.progress-bar').text(percentComplete + '%');
            $('.progress-bar').width(percentComplete + '%');

            // once the upload reaches 100%, set the progress bar text to done
            if (percentComplete === 100) {
              $('.progress-bar').html('Done');
              setTimeout(function () {
                $('.progress-bar').fadeOut('slow');
            }, 2000);

            }

          }

        }, false);

        return xhr;
      }
    });

  }
});

/*$('.upload-btn').on('click', function (){
    $('#upload-input').click();
    $('.progress-bar').text('0%');
    $('.progress-bar').width('0%');
    
    console.log('uploadaClicked.'+this.value);
});

$('#imageUpload').on('change', function(){

  var files = $(this).get(0).files;
  //console.log('FP: '+this.form.attributes.aid.value+'/'+this.form.attributes.vid.value);
  var aid=this.form.attributes.aid.value;
  var wid=this.form.attributes.wid.value;
  if (files.length > 0){
    // create a FormData object which will be sent as the data payload in the
    // AJAX request
    
    var formData = new FormData();

    // loop through all the selected files and add them to the formData object
    for (var i = 0; i < files.length; i++) {
      var file = files[i];

      // add the files to formData object for the data payload
      formData.append('uploads[]', file, file.name);
    }

    $.ajax({
      url: '/articles/upload/'+aid+'/'+wid,
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data){
          console.log('upload successful!\n' + data);
      },
      xhr: function() {
        // create an XMLHttpRequest
        var xhr = new XMLHttpRequest();

        // listen to the 'progress' event
        xhr.upload.addEventListener('progress', function(evt) {

          if (evt.lengthComputable) {
            // calculate the percentage of upload completed
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);

            // update the Bootstrap progress bar with the new percentage
            $('.progress-bar').text(percentComplete + '%');
            $('.progress-bar').width(percentComplete + '%');

            // once the upload reaches 100%, set the progress bar text to done
            if (percentComplete === 100) {
              $('.progress-bar').html('Done');
            }

          }

        }, false);

        return xhr;
      }
    });

  }
});
*/