cretueusebiu / vform

Handle Laravel-Vue forms and validation with ease.
https://vform.vercel.app
MIT License
607 stars 120 forks source link

My UploadPercentage only works when I Ctrl+F5 my page. #115

Closed EspetoRx closed 3 years ago

EspetoRx commented 3 years ago

When trying to upload a File using the same technique shown in FileUpload example, my progress bar only works when I do a full refresh of the page with Ctrl+F5. I use Laravel's Webpack Mix with versions.

My code as following

sendXMLToServer(){
                this.$Progress.start();
                this.showFPB = true;
                this.formImportXML.post(this.url+'/adicionarPeloXML', {
                    transformRequest: [function (data, headers) {
                        return objectToFormData(data)
                    }],
                    onUploadProgress: e => {
                        this.uploadPercentage = parseInt(Math.round((e.loaded/e.total)*100));
                    }
                })
                .then(({resp})=>{
                    Swal.fire({
                        icon: "success",
                        title: 'Importado',
                        text: 'Importado com sucesso'
                    });
                    this.$Progress.finish();
                    this.closeModalImportXML();
                    if(!this.calendariomode){
                        Fire.$emit('DepoisCriado');
                    }
                    else
                    {
                        Fire.$emit('Update');
                    }
                })
                .catch((data) => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erro',
                        text: (typeof data.response.data == 'string')?data.response.data:'Não foi possível importar o XML.'
                    });
                    this.showFPB = false;
                    this.$Progress.fail();
                });
            },

And the objectToFormData is this one:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define('objectToFormData', factory) :
    (global.objectToFormData = factory());
}(this, (function () { 'use strict';

function isUndefined (value) {
  return value === undefined
}

function isObject (value) {
  return value === Object(value)
}

function isArray (value) {
  return Array.isArray(value)
}

function isFile (value) {
  return value instanceof File
}

function isDate (value) {
  return value instanceof Date
}

function objectToFormData (obj, fd, pre) {
  fd = fd || new FormData();

  if (isUndefined(obj)) {
    return fd
  } else if (isArray(obj)) {
    obj.forEach(function (value) {
      var key = pre + '[]';

      objectToFormData(value, fd, key);
    });
  } else if (isObject(obj) && !isFile(obj) && !isDate(obj)) {
    Object.keys(obj).forEach(function (prop) {
      var value = obj[prop];

      if (isArray(value)) {
        while (prop.length > 2 && prop.lastIndexOf('[]') === prop.length - 2) {
          prop = prop.substring(0, prop.length - 2);
        }
      }

      var key = pre ? (pre + '[' + prop + ']') : prop;

      objectToFormData(value, fd, key);
    });
  } else {
    fd.append(pre, obj);
  }

  return fd
}

return objectToFormData;

})));

What do I do?

Obs: The objectToFormData.js is requested locally on the vue component. Even if I put globally, I still need to Ctrl+f5 my page...

Sorry for the broken english, I'm brazilian.

EspetoRx commented 3 years ago

It's important: I also use brotli, purge css and sourceMpas on my webpack.