Problem with xhr multipart/form-data when uploading images!

Questions
1

Im trying to make a upload form, where you can select multiple(max5) images and then I scale them to be 600px wide before uploading, with load-image.js, exif.js,load-image-scale.js, load-image-orientation.js. Im using the Persits.Upload component on my server to save the images.

If I send images directly from the form(not with ajax in my js file) then it works as it should.
But if I select 5 images on the phone it takes about 18seconds to upload them, so therefor I would like to scale them down to 600px wide before I upload them. And that´s why I would like to send them with formData instead.

When You have selected the images I show a thumbnail preview that is 100px heigh.

Im trying to appen the scaled image to new FormData that Im sending to my server with ajax request.

My form looks like this.
<form action="#" id="sparauploads" ENCTYPE="multipart/form-data" autocomplete="off">

And my ajax request looks like this.
    var formElement;
    var formData;
    formElement = document.getElementById('sparauploads')
    console.log('formElement'+formElement)
    formData = new FormData(formElement)

        var data;
        app.request({
        	method: 'POST',
        	url: 'uploadimages/uploadimages2.asp',
        	data: formData,
        	//header: 'Content-Type', 'multipart/form-data',
        	cache: false,
        	dataType: 'application/json',
        	mimeType: 'multipart/form-data',
           contentType:'multipart/form-data',
        	processData: true,
        							  
        	beforeSend: function ( xhr ) {
        	xhr.setRequestHeader( 'Content-type', 'multipart/form-data');
                console.log(JSON.stringify(xhr), "BEFORE SEND");
                app.dialog.alert(JSON.stringify(xhr), "BEFORE SEND");
                 },  
        	success: function (data) { 
        	    console.log(data)
        	return false;
        }
        });

And the first problem I get is this error in my server page that are suppose to save the images.

Boundary not found in Content-Type. Make sure you have included the attribute ENCTYPE="multipart/form-data" in your form.

And when I look at the console.log(JSON.stringify(xhr), "BEFORE SEND"); I get this.

{"requestUrl":"uploadimages/uploadimages2.asp","requestParameters":{"url":"uploadimages/uploadimages2.asp","method":"POST","async":true,"cache":false,"user":"","password":"","headers":{},"xhrFields":{},"statusCode":{},"processData":true,"dataType":"application/json","contentType":"application/x-www-form-urlencoded","timeout":0,"mimeType":"multipart/form-data","crossDomain":false}} – "BEFORE SEND"

As I can tell I have set the enctype correctly with multipart/form-data?
So why is is saying that Im not sending the form with multipart/form-data?

Any input really appreciated, and also if anybody has done this before please share :wink: Thanks a lot!

2

im a bit lazy so i will paste my actual code, i upload n files (images) and some other params

html

<form class='list new-sale-frm'>
  ...
</form>

js:

      e.preventDefault()
      let frm = this.$f7.form.convertToData('.new-sale-frm')
      let errors = []
      frm['id_pantalla'] = 15
      frm['id_accion'] = 'nuevo'
      if (errors.length) {
        showErrors(this, errors).open()
      } else {
        this.showPreloader = true
        let fd = JSONtoFormData(frm)
        if (this.file.length) {
          this.file.forEach(f => {
            fd.append('upfile[]', f.file)
          })
        }
        let res = await this.$util.post(fd)
        this.showPreloader = false


// and the post:

Util.post = async (data, url, method, dataType, beforeOpen, beforeSend) => {
  try {
    result = await Framework7.request.promise({
      headers: {
        'Authorization': makeBaseAuth(username, password)
      },
      beforeOpen: xhr => {
        if (beforeOpen) beforeOpen(xhr)
      },
      beforeSend: xhr => {
        if (beforeSend) beforeSend(xhr)
      },
      url: url || urlBackend,
      method: method || 'POST',
      dataType: dataType || 'json',
      data: data
    })
  } catch (err) {
    return []
  }
  let backData = result.data
  if (dataType === 'html' || backData.status.id === 1 || backData.status === 1) {
    return backData
  } else {
    let msj = backData.status.mensaje || backData.mensaje || 'A ocurrido un error inesperado, codigo error: -1.'
    Util.showMessage(null, msj)
  }
}

ITs not the full code! just an example of what i do. you should rezise your images and post it.