How to send multiple base64 images stored in array to Java using ajax call in JavaScript

Question

I allow the user to upload multiple images at once.

I store all image sources in an array and send with ajax.

The ajax call returns an error message that the size is too long.

My code snippet :

function save_domain_images(base64ImageSrc){
  var datastring = "&token="+domainImgSaveSession+"&imgSrc="+base64ImageSrc+"&action=saveDomainImg";
  $.ajax({
    type : "POST",
    url : base+"/AppUserListServiceProvider",
    data : datastring,
    cache : false,
    success : function(data){
      data                      = JSON.parse(data);
      domainImgSaveSession      = data["randomNew"];
      if(data["error"] == null && data["croppedImg"] != null){
        console.log("data : "+data["croppedImg"]);
      }
    },
    error : function(){}
  });
}

Answer 1

const match = /^\s*data:([\w/]+)(?:;base64)?,/.exec(base64Str);
const type = match[1];
const blob = b64toBlob(url.slice(match[0].length), type);
const formData = new FormData();
formData.append('image', blob, name);

function b64toBlob(base64) {
  const code = window.atob(base64.split(",")[1])
  const aBuffer = new window.ArrayBuffer(code.length)
  const uBuffer = new window.Uint8Array(aBuffer)

  for (let i = 0; i < code.length; i++) {
    uBuffer[i] = code.charCodeAt(i)
  }

  const Builder = window.WebKitBlobBuilder || window.MozBlobBuilder
  if (Builder) {
    const builder = new Builder()
    builder.append(buffer)

    return builder.getBlob(format)
  } else {
    return new window.Blob([buffer], {
      type: format
    })
  }
}

then you can post the formData