XHR percent loaded

1

Hi guys, how to create a upload preloader using app.request to upload an image. I don’t want to use jQuery, but the XHR callback is not present on app.request. Any idea?

My code in jQuery that is working:

var fd = new FormData();
      fd.append('id', id);
      fd.append('image', $('#img-upload-'+position).prop('files')[0]);
      fd.append('position', position);

$.ajax({
      url: "my-upload-script.php",
      type: "POST",
      data: fd,
      timeout: 30000,
      cache: false,
      contentType: false,
      processData: false,
      xhr: function() {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(evt) {
              if (evt.lengthComputable) {
                  var percentComplete = evt.loaded / evt.total;
                  percentComplete = parseInt(percentComplete * 100);
                  $('.preloader-'+position+' div').animate({ height: percentComplete + '%' }, { duration: 1000 });
                  if(evt.loaded == evt.total){
                    $(".preloader-"+position).fadeOut('fast', function(){ $(this).remove(); });
                    blockEl("block", ".img-"+position, "0px", "Adjusting");
                  }
              }
          }, !1);
          return xhr
      },
      success: function(data, status, xhr) {

        var result = $.parseJSON(data);
        var status = result.status;

      }
  }).fail(function (jqXHR, textStatus, errorThrown) {
     show_errors_ajax(jqXHR.status);
  });
2

What is “the XHR callback” ?

3

You can get XHR reference in other callback like beforeSend https://framework7.io/docs/request.html#api

4

Hi, Shastox!

xhr (default: ActiveXObject when available (IE), the XMLHttpRequest otherwise )

Type: Function()

Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.

Reference:
https://api.jquery.com/jquery.ajax/

5

Thanks, nolimits4web!

6 
createCases() {
const app = this.$f7;
const self = this
let progress = 0
const dialog = app.dialog.progress(`Waiting...`, progress);
dialog.setText(`Process ${progress} %`);
this.$f7.request({
    url: 'https://api.xyz.com/cases',
    method: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    data: (this.state.form),
  beforeOpen(xhr) {
    xhr.upload.onprogress = (event) => {
      let progressUpload = parseInt((event.loaded / event.total)* 100)
      console.log(progressUpload);
      dialog.setText(`Process ${(progressUpload)} %`);
      dialog.setProgress(progressUpload);
  }
  },
  success(data, status, xhr) {
    self.$f7.dialog.close()
  }
})

}