<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Testfile</title>
  </head>
  <body>
      <h1>Prueba de envio de $_FILES para servicios UPDATE</h1>
      <form>
          <label for="sessionid">sessionid:</label>
          <input type="text" id="sessionid"/><br><br>
          <label>Archivo de prueba 1:</label><input type="file" id="01" class="useruploads" accept="image/*"/><br><br>
          <label>Archivo de prueba 2:</label><input type="file" id="02" class="useruploads" accept="image/*"/><br><br>
          <label>Archivo de prueba 3:</label><input type="file" id="03" class="useruploads" accept="image/*"/><br><br>
          <label>Archivo de prueba 4:</label><input type="file" id="04" class="useruploads" accept="image/*"/><br><br>
      </form>
    <button type="button" onclick="getJson()">Prueba para envio de archivos/imagenes</button>
  </body>
  <script type="text/javascript">
  function callWS(type, service, params, response){
    var url = service+".php";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
            if (this.readyState === 4) {
                response(this.status, this.responseText);
            }
        };
    switch (type){
        case "GET":
            var parsedPars = Object.keys(params).map(function(k) {
                return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]);
            }).join('&');
            xhttp.open(type.toUpperCase(), url + "?" + parsedPars, true);
            xhttp.send();
        break;
        case "POST":
            xhttp.open("POST", url, true);
            var formdata = new FormData();
            for(var key in params){
                formdata.append(key,params[key]);
            }
            xhttp.send(formdata);
        break;
    }
}

  function getJson(){
      let params = {
        //companytype: 3,
        sname: "nombre de prueba",
        fname: "primer nombre",
        step: 2
    };
    
    let filearr = document.getElementsByClassName("useruploads");
    let uploadids = "";
    for (const file of filearr) {
        if(file.files[0] != undefined){
            params[`${file.id}`] = file.files[0];
            uploadids += `${file.id}-`;
        }
    }
    uploadids = uploadids.slice(0, -1);
    
    if(document.getElementById("sessionid").value == null || document.getElementById("sessionid").value == ""){
        alert("sessionid requerido");
        return 0;
    }
    
    params.sessionid = document.getElementById("sessionid").value;
    params.uploadids = uploadids;
    console.log(params);
    callWS("POST","updateperson", params, respx);

    function respx(status, respText){
      console.log(status);
      console.log(JSON.parse(respText));
    }
  }
  </script>
</html>
