XHR percent loaded

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

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

What is “the XHR callback” ?

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

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.


Thanks, nolimits4web!

createCases() {
const app = this.$f7;
const self = this
let progress = 0
const dialog = app.dialog.progress(`Waiting...`, progress);
dialog.setText(`Process ${progress} %`);
    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)
      dialog.setText(`Process ${(progressUpload)} %`);
  success(data, status, xhr) {