<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  .frame {
    border: 2px solid #607D8B;
    background: #CDDC39;
    border-radius: 10px;
    box-shadow: 2px 2px 20px 1px #607D8B, -2px -2px 20px 1px #607D8B;
    margin: 20px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: left;
    color: #2196F3;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
  }

  .frame-hidden {
    border: 2px solid #607D8B;
    background: #CDDC39;
    border-radius: 10px;
    box-shadow: 2px 2px 20px 1px #607D8B, -2px -2px 20px 1px #607D8B;
    margin: 20px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    color: #2196F3;
    font-weight: normal;
    display: none;
  }


  .imagebutton {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .centerimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .leftimage {
    display: none;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    float: left;
    position: absolute;
  }

  .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }

  input.visually-hidden:focus+label {
    outline: thin dotted;
  }

  input.visually-hidden:focus-within+label {
    outline: thin dotted;
  }

  .disabled-elem {
    pointer-events: none;
    opacity: 0.5;
  }

  .hr-gradient {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, #607D8B, transparent);
  }
</style>

<script type="text/javascript">
  var img_send="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0U4M0UwM0FBNzQ1MTFFMUEwRTZBRTg0REFDQ0I4OUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0U4M0UwM0JBNzQ1MTFFMUEwRTZBRTg0REFDQ0I4OUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3RTgzRTAzOEE3NDUxMUUxQTBFNkFFODREQUNDQjg5QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3RTgzRTAzOUE3NDUxMUUxQTBFNkFFODREQUNDQjg5QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg+04HAAAANsSURBVHja7FfNThRBEK6en90dfvTgiZgYUAwcxMSYKBIuetIAGsgmhofwBQggoPHqS3hRASMr8gKQqEdJjCYaNxgvJl4Ad2F3utuq7umZ2WEGidm4B+mk6KHprp+vvqpumJQSWjksaPE4dqDlDrBgdq/Pr74XwPqJlIwxFAt8IaDuSxC41gyuolqw8IdryY/rC6MXcanuKONzrzavXujtuzLQg4YE2JYNT9bewcTlLpgc6ml61E/flPsBSpvrC2MD5ECbAKvv2sWzUN2vqUhdh8GnrR8weW8IvlUBfN48444NcHewGx6vfugj2+RATkMsgKwzBZWGnUbNhyPBz1LW0o4JaWb1kXPMWYtpMd+hEpmhKWXYGJ2DtOYYiy/SzyWWWFgFNpLDCoS+Q4+PKBI1ORjOjalFaPNQH35Llr43jpgVesU0S43EETBCGxk07jNCilxEoNPLwc3pFego6HwndSTTGSGAuFtGbBZFLyMhvPI5ZE4eoL3QKB5KwcUZs0pO3JouQXue9OoA43pkDAIn9CSFA34AD3lNa8SY0dkX4OVdlaokCW20VsBNKpUeg5H7JSjNjcFORXNCBvv4AQTIgBUJAWA2Gg5SPulvbWi8AyPsTAiteXlHOUEousjGjgIh8RJcV1s2uniMAzEEWBiVmclrEcu/kH/XaxvSSHpjehxDQjslBTxOHqEbUrVWV1qSKVDKEKIcMpEQ8LEWf+3VYGX+DuxiMxMiKsEDDmRygEcI0FytATyfGVe1fuBWwzMekq744DUSz4LKfh0WZ3T+6zxiv0otT3MgqADdUJjChcsob8YhajJpbc8Oan4PWyftX5q9DTvVRuNmcJnCgYb6ZxFUIlm7GTwQeGYPs7OLMJUeFmG7km6cZacgIqHphJxHZfinQY4i6vBspqhyzkX6OZUCkYKAakQJDtQzuhdkXDwSGwdngdOH7KvLRCNiQZOpYQ3Tg8SxIjSYHWvgR3Ai82pM3D5Gv6N6jF8rr7390j0yeE6Vi4url853wdLGVxgf7tHEa8brnenbcnmjDIzvl4P+BidReoenlpbBLZzRbZepSqA7m3OpUGmSff3c86tb64+KE/jrZ1qjRnkK5TTKiX/wUCU8t1G+o/wMH6X0PKIXyuEZbMogMLGlQYX42OpXObDj/w3/ewd+CzAAVsh37ZsNoAAAAAAASUVORK5CYII=";
  var img_import="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFRUlEQVRYw62WWYhcVRrHf993z7236lZv6TGdjjMmGhQRCSh2FLI5MAsjAxo0MRoMGAIqDMM8KOKCBkOEyIAgg7gwQoYhY5SO3SMmLi+KD76pDxrEGUjHDtNhYmLa7q6qrr73nuPDrS2dWrrVAx/cqrP9v/+3/I/QGObo2Ng4In901uJYznCAoCKkaTp+9/btO4BkKTsFMLfv//fb6pnbEts84ZA2MFSVG64c5Mm7RzDGXDR39uxZPvr44xM7d+y4EYiXAqL3jmePOevcsmzbs8fcF1+ecBOnvnEnJ04555z75+HDzjnnzpw5494YHT0D+N0uN0Cu5vnE5/tZZ0eBeZ6Q/xACIlWeHDgLBYVHboQktSRJgqriXMaUqDI9/T3Dw8Ns2bhx+I3R0cmd27ev6cSEAuIcFIF1s69DOYCyUvChJ4DB2Zf55ekrGJx9mZ4AEgG7KBwiUo9nPspz/vx3rF69mq2bNg2/efToZCcmtLYxBijNQXGaCb2LngCiEPTcc1TSAfTcc0Q5iAKoVFNDROpWG2EQ0NPbU2fi1s2bh4+OjU21A2FqCecSeGHdaVSylT0CxZOPE6d5xAY4l8efeIz8VQeJ05r3gmotRnDN1Vdz+MiRWsSw1rJ71y6Ay4ACMN0SADgSC/0eeNW4ewampl7BC4YQTXDWUpp6lcFrDzYYqLKgqszMzLFhZIQNIyOXeGmzHAk6MABJCpEBdRkAVegdup9zU0cQk8clZX5x+f3kvGytZFmHiCICpXKJYrnU1BoylKuHV9W/2wJAhBgohFWvqixcd8vzaPg8k3tXsua1b7EVSBKIXbagOf7NeZDd75bUzKoMZC1n4uub8DQCvMxD9ZAgoHw24ORXt2EXyqTJLNff/ClS7Xy66OJGJ5N6eXYFAJAKFGdiPK/JG7GIVuDJ6yheqGDTlDSJSeXiKvgpwzQSBQb7bmfy9Ouoti5ba2PWXHEvtpaEKoj+DAA8BWNg04YDbL75AO2cci4zY7I93RiQJQJw5dnvPnn4r8c3WlvTNWmjeQ4hq5Bf9TlUPUS0u+J1AGmA+fcO7n4AuObpffvGtm7ZQrFY6nig53msvGwlhXyE8byWgF3VFQCjfkcAZWASsGvWrmX9+vXMzRW7eARRvkB/7wC5MGjNdeN+Cn6hI4AEmAXO9/f3MzQ0RFToDEBFCf0cB97ax7HP30HFaxtxFcE3Ab/f/5v/50x44e0njq9qVkez3JjVst8zwrHP3uHvf3qKrIFXvW5Blwj4nvLwob+tWKwJph3qjjkgCgIqhvlknhc/2EtqE1KbLEIheGowavjzHw7hMh0PWvaBi0F7bdypzWvdu1I8g6rhHw+1T9w9r/ZRimdoVd8/LgT1B4hQiWcRNR3XB35EZaHYMk9aA/CkEwEXdb/5uIjvX6q0u17xKYQryJkCUa6fSlpsWa7aOsYNoWlndQaSIsaEl5zxrwdjjAkJgx5CP6KSFNs/yVpR3M3qDNgSxjQY2HNooP790n2nie08osq8LS2BgerBqtrRaFLDhbSIb3L1I/qiVfzlzWvrv1+4579YcVSSue4MqOqSWGiUq0ds58mFjU7Xm1/BQGGIR8dvaErCkNiWWya3WaRec2+Nj/fYmuy164TqEZkCxhgSYgphP8+892sAotwAnniEfsQz794KIkRhH7Fb6PweABbu3LZtK7BiiUrq/27/b99Vk1KICkQuairR7F3smv4TL+nKQBGYAP63xLfEQKBm9v0Pk17nuuNVAcXN/Zg3Q1sAwFXLYMwBF6pOTv8cAPyqsATL2LNQZbquhj8AANbr+kzXq/oAAAAASUVORK5CYII=";
  var img_tickdone="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzVBMDRFREE1OThCMTFFMkE3Q0NFOUI1MTU2RjcwRDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzVBMDRFREI1OThCMTFFMkE3Q0NFOUI1MTU2RjcwRDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNUEwNEVEODU5OEIxMUUyQTdDQ0U5QjUxNTZGNzBENSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNUEwNEVEOTU5OEIxMUUyQTdDQ0U5QjUxNTZGNzBENSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlqW6egAAAYHSURBVHjaxFdrbBRVFD6zO7OPvrAFClRiqWgaUVOJVSxtYohJTd2ltGJikfBDRAVDBMGo0FaBFjBG8ZFGwKL+QF4ibSm7SnykiWktVQTxQSCKpQZaHmVL26Xb3Znd8Zw7d7rT6ba08INNTnvnzp3zfec5ZwRVVeFW/kT6IwjCaM5ackvrXokIFlcYrHOIuM6dHicdVgg3WNSIt2lj0fu4HRmNUoEUXYeAmFt2aK/dbpufn5UGj9+fBg9MS4l58MRZHxz+ox2+OtIGdqt6oKlibgluKzdKQJj92h6XIiUeerngHliYeyfb7A4D+GWAkEmtDX2ZKAEkWbXrXU2t8NE3J0GUe+f+9M4CL26pYyFgzSur2zY+OWnJJ8/nQGqiA84HAIKydpM0mZ8w7tmRyO1OgEu9/fBCdTNc6erZ0VhZtBRvhUdDwJpbWrs9I23CcztfyoMefORyH7B4C6NMLJXnxcQ4zSOLPm6E1vbOT5s2Fr9oJmEmIMxa+fm8yVPTa+tWz4ErIYCuwM1leTJ6YrwNoOi9Brhwrq245YNnDxrDYTGdd6gJE2urFueAD93tC2gnxyp6ZZDLfP3AdJFO0k0Yg0rLmO2z19TsXZY/A1KTHdDJ3T5WYTFEtzvQaieKaNEMIZ2kmzD08jcTcCoWW2FJXgac93OFY7UcLRZRdQK6fe76eia0JkId1wAWoG7CICwzAcsjq3eucGdPgzBqCio3ZjlZG28HcK/zQJLTzoTWtKeomhAGYenYOgE7SM6CR2dMge5g1Ppol4tm90iWx6Ndheu9EG+TwCZZmDglCQrerAcJvdCLSU0YhMUwTQRmZ2WkQF/IEEuLFksSKz85kuXzEDwOO5KEGxZTb4ngWdJNGIRlJiBROcZjAwmphlhiHT9ZWc+E1rRH92JZXrQhCk5lTfoUJQL9sgye9YWscwbx7UAY/AUoGQkwumHuZytexSG/4g0eSHTYmdCarBQNaatbXhwDXEbwPkStKXdDL1aUjAQikUFdSBjSBxQeexG5zVtXDw4pGss4jOv8Ci+zVhI1oTXtxQIPIPiBchdgN4ZQWAuByjGG6wPsEJ1SI1GKJBRPAnAi0FOVXkiiFotCa+cw4PvLXMzykKxZrudMRI0xDwAH8SNbi0VjXPNWITxd6UHF0gCA9l+Eks2H2TNkuWgdCv4lgWPzkcPRRGVgWAkMw5CgugfUSH/P0WOtPkBvs3j5kf2+UjdTSIr1d4aIWmxcaG0G31fKLVcGW05iQ92EQVh6HusEZPnqxR+bT7WDXdTukBfIij2oMCAbSHBvkQgAUXA8Q2fpGWPMjRVDuptPdQBhEaaRQPBY9crqI0ggHNaym9iHuCd2rxlMYuC1awCnM/5hLCchnaT7+9/OAmER5iACNOz4fRca6lr+xU6m5QI9SHG8FhhKwgx+LUbMB+JM5Yo6D7a0Yje60kBYOgHjPJCIMj2n3HP83SWPQTJOQQGZDyJ4m1opld3Ctz2sPOlHTWbXG+4RwelZJx7vwnp8dccP0FzhnonbZ1B6zWVIo8dF3+/frd68v5nF1yZpsaN4Ulz9eOKL192YyUEmbD1MzPW4kw7SRTpJN2FwrJgTEb0mp2Yv37Zleua97vJn8pgimgUj3BMUS4kXL1WLEhnG7YI2G5Lmit2NcOb0X56jVUtX4eW5kQjQIgkl/aHlWzdNTs90rZqfA5NSMBwhnlyG4dP41hxoXIIWcxpGLuI4tOVAM1xoO+39pWrZWrzdhtJjHMliDqUo48gTdz+xzDXhQdem4twZkJ+dwfKA3K0oQ2ds0kAvJptVy4dvj7ZCbdNJ6PzVu/bvr7d6ueXd1xtKjSQSUFJRpjy84rON1qTUvLz70mHmXWmQeUcKOO3GARB9ijl9+j8fHP+nHRr/bINwz6XGnz9cXIp3O1AuofhHO5YbjaIB8jaUSTTgZi2qLHFMTJ8lJqRksVIc5HoBFL/vRP/ltpYTO8to7uviCXeVCmasHybm94WTe2Qcz5E47iXjj6zr4zHu5hYHbubTbEhi8ynGzoeJWB9HMm8wwdF+nMKt/jz/X4ABADwmWgD5Tmp4AAAAAElFTkSuQmCC";
  var img_error="data:image/png;base64,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";
  var sending = false;
  function Send() {
    document.getElementById("select-file").classList.add("disabled-elem");
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
      }
    }

    xmlhttp.upload.onloadstart = function (pe) {
      try {

        document.getElementById("select-file").classList.add("disabled-elem");
        document.getElementById("info-left-icon-img").src = img_send;
        document.getElementById("info-text").style.display = "none";

        document.getElementById("info-progress").style.display = "block";
        document.getElementById("info-progress").style.verticalAlign = "middle";
        var progressBar = document.getElementById("progress-bar");
        progressBar.style.width = "100%";
        progressBar.style.display = "block";
        progressBar.style.margin = "auto";
        progressBar.value = 0;
        document.getElementById("info-progress-text").innerHTML = "Başlıyor...";
      }
      catch (err) {
        alert(err);
      }
    }

    xmlhttp.upload.onprogress = function (pe) {
      try {
        var progressBar = document.getElementById("progress-bar");
        if (pe.lengthComputable) {
          progressBar.value = (pe.loaded / pe.total) * 100;
          document.getElementById("info-progress-text").innerHTML = "Gönderiyor... %" + parseInt((pe.loaded / pe.total) * 100);
        }
      }
      catch (err) {
        alert(err);
      }
    }

    xmlhttp.upload.onload = function (pe) {
      try {
        document.getElementById("select-file").classList.remove("disabled-elem");
        document.getElementById("info-left-icon-img").src = img_tickdone;

        var infoText = document.getElementById("info-text");
        infoText.style.display = "block";
        infoText.style.verticalAlign = "middle";
        infoText.innerHTML = "Dosya gönderildi...";

        document.getElementById("progress-bar").value = 100;
        document.getElementById("info-progress").style.display = "none";
        document.getElementById("info-progress").style.verticalAlign = "middle";

        document.getElementById("info-progress-text").innerHTML = "%100";
      }
      catch (err) {
        alert(err);
      }
    }

    xmlhttp.upload.onerror = function (pe) {
      try {
        document.getElementById("select-file").classList.remove("disabled-elem");
        document.getElementById("info-progress").style.display = "none";

        var infoIcon = document.getElementById("info-left-icon-img");
        infoIcon.src = img_error;

        var infoText = document.getElementById("info-text");
        infoText.style.display = "block";
        infoText.style.verticalAlign = "middle";
        infoText.innerHTML = "Hata oluştu. Tekrar göndermek için dokunun...";
      }
      catch (err) {
        alert(err);
      }
    }

    try {
      var formData = new FormData();
      var fileCount = document.getElementById("file-input").files.length;
      for (var x = 0; x < fileCount; x++) {
        formData.append("files", document.getElementById('file-input').files[x]);
      }

      xmlhttp.open("POST", "http://[#-ipport-#]/ft", true);
      xmlhttp.send(formData);

    } catch (error) {
      alert(error);
    }
  }
</script>
<body>
  <div class="frame" id="select-file">
    <table width="100%">
      <tr>
        <td class="vertical-align:top;" id="input-left-icon-cell" width="32px"><img class="imagebutton" id="input-left-icon-img" alt="file_import"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFRUlEQVRYw62WWYhcVRrHf993z7236lZv6TGdjjMmGhQRCSh2FLI5MAsjAxo0MRoMGAIqDMM8KOKCBkOEyIAgg7gwQoYhY5SO3SMmLi+KD76pDxrEGUjHDtNhYmLa7q6qrr73nuPDrS2dWrrVAx/cqrP9v/+3/I/QGObo2Ng4In901uJYznCAoCKkaTp+9/btO4BkKTsFMLfv//fb6pnbEts84ZA2MFSVG64c5Mm7RzDGXDR39uxZPvr44xM7d+y4EYiXAqL3jmePOevcsmzbs8fcF1+ecBOnvnEnJ04555z75+HDzjnnzpw5494YHT0D+N0uN0Cu5vnE5/tZZ0eBeZ6Q/xACIlWeHDgLBYVHboQktSRJgqriXMaUqDI9/T3Dw8Ns2bhx+I3R0cmd27ev6cSEAuIcFIF1s69DOYCyUvChJ4DB2Zf55ekrGJx9mZ4AEgG7KBwiUo9nPspz/vx3rF69mq2bNg2/efToZCcmtLYxBijNQXGaCb2LngCiEPTcc1TSAfTcc0Q5iAKoVFNDROpWG2EQ0NPbU2fi1s2bh4+OjU21A2FqCecSeGHdaVSylT0CxZOPE6d5xAY4l8efeIz8VQeJ05r3gmotRnDN1Vdz+MiRWsSw1rJ71y6Ay4ACMN0SADgSC/0eeNW4ewampl7BC4YQTXDWUpp6lcFrDzYYqLKgqszMzLFhZIQNIyOXeGmzHAk6MABJCpEBdRkAVegdup9zU0cQk8clZX5x+f3kvGytZFmHiCICpXKJYrnU1BoylKuHV9W/2wJAhBgohFWvqixcd8vzaPg8k3tXsua1b7EVSBKIXbagOf7NeZDd75bUzKoMZC1n4uub8DQCvMxD9ZAgoHw24ORXt2EXyqTJLNff/ClS7Xy66OJGJ5N6eXYFAJAKFGdiPK/JG7GIVuDJ6yheqGDTlDSJSeXiKvgpwzQSBQb7bmfy9Ouoti5ba2PWXHEvtpaEKoj+DAA8BWNg04YDbL75AO2cci4zY7I93RiQJQJw5dnvPnn4r8c3WlvTNWmjeQ4hq5Bf9TlUPUS0u+J1AGmA+fcO7n4AuObpffvGtm7ZQrFY6nig53msvGwlhXyE8byWgF3VFQCjfkcAZWASsGvWrmX9+vXMzRW7eARRvkB/7wC5MGjNdeN+Cn6hI4AEmAXO9/f3MzQ0RFToDEBFCf0cB97ax7HP30HFaxtxFcE3Ab/f/5v/50x44e0njq9qVkez3JjVst8zwrHP3uHvf3qKrIFXvW5Blwj4nvLwob+tWKwJph3qjjkgCgIqhvlknhc/2EtqE1KbLEIheGowavjzHw7hMh0PWvaBi0F7bdypzWvdu1I8g6rhHw+1T9w9r/ZRimdoVd8/LgT1B4hQiWcRNR3XB35EZaHYMk9aA/CkEwEXdb/5uIjvX6q0u17xKYQryJkCUa6fSlpsWa7aOsYNoWlndQaSIsaEl5zxrwdjjAkJgx5CP6KSFNs/yVpR3M3qDNgSxjQY2HNooP790n2nie08osq8LS2BgerBqtrRaFLDhbSIb3L1I/qiVfzlzWvrv1+4579YcVSSue4MqOqSWGiUq0ds58mFjU7Xm1/BQGGIR8dvaErCkNiWWya3WaRec2+Nj/fYmuy164TqEZkCxhgSYgphP8+892sAotwAnniEfsQz794KIkRhH7Fb6PweABbu3LZtK7BiiUrq/27/b99Vk1KICkQuairR7F3smv4TL+nKQBGYAP63xLfEQKBm9v0Pk17nuuNVAcXN/Zg3Q1sAwFXLYMwBF6pOTv8cAPyqsATL2LNQZbquhj8AANbr+kzXq/oAAAAASUVORK5CYII=">
        </td>
        <td id="input-text">
          <input class="visually-hidden" type="file" id="file-input" multiple/>
          <label id="file-input-label" for="file-input">Dosya veya resim seçiniz...</label>
        </td>
      </tr>
    </table>
  </div>
  <div class="frame-hidden" width="100%" id="fileinfo" onclick="Send();">
    <table width="100%">
      <tr>
        <td id="info-left-icon-cell" width="32px"><img class="imagebutton" id="info-left-icon-img" alt="send" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0U4M0UwM0FBNzQ1MTFFMUEwRTZBRTg0REFDQ0I4OUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0U4M0UwM0JBNzQ1MTFFMUEwRTZBRTg0REFDQ0I4OUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3RTgzRTAzOEE3NDUxMUUxQTBFNkFFODREQUNDQjg5QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3RTgzRTAzOUE3NDUxMUUxQTBFNkFFODREQUNDQjg5QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg+04HAAAANsSURBVHja7FfNThRBEK6en90dfvTgiZgYUAwcxMSYKBIuetIAGsgmhofwBQggoPHqS3hRASMr8gKQqEdJjCYaNxgvJl4Ad2F3utuq7umZ2WEGidm4B+mk6KHprp+vvqpumJQSWjksaPE4dqDlDrBgdq/Pr74XwPqJlIwxFAt8IaDuSxC41gyuolqw8IdryY/rC6MXcanuKONzrzavXujtuzLQg4YE2JYNT9bewcTlLpgc6ml61E/flPsBSpvrC2MD5ECbAKvv2sWzUN2vqUhdh8GnrR8weW8IvlUBfN48444NcHewGx6vfugj2+RATkMsgKwzBZWGnUbNhyPBz1LW0o4JaWb1kXPMWYtpMd+hEpmhKWXYGJ2DtOYYiy/SzyWWWFgFNpLDCoS+Q4+PKBI1ORjOjalFaPNQH35Llr43jpgVesU0S43EETBCGxk07jNCilxEoNPLwc3pFego6HwndSTTGSGAuFtGbBZFLyMhvPI5ZE4eoL3QKB5KwcUZs0pO3JouQXue9OoA43pkDAIn9CSFA34AD3lNa8SY0dkX4OVdlaokCW20VsBNKpUeg5H7JSjNjcFORXNCBvv4AQTIgBUJAWA2Gg5SPulvbWi8AyPsTAiteXlHOUEousjGjgIh8RJcV1s2uniMAzEEWBiVmclrEcu/kH/XaxvSSHpjehxDQjslBTxOHqEbUrVWV1qSKVDKEKIcMpEQ8LEWf+3VYGX+DuxiMxMiKsEDDmRygEcI0FytATyfGVe1fuBWwzMekq744DUSz4LKfh0WZ3T+6zxiv0otT3MgqADdUJjChcsob8YhajJpbc8Oan4PWyftX5q9DTvVRuNmcJnCgYb6ZxFUIlm7GTwQeGYPs7OLMJUeFmG7km6cZacgIqHphJxHZfinQY4i6vBspqhyzkX6OZUCkYKAakQJDtQzuhdkXDwSGwdngdOH7KvLRCNiQZOpYQ3Tg8SxIjSYHWvgR3Ai82pM3D5Gv6N6jF8rr7390j0yeE6Vi4url853wdLGVxgf7tHEa8brnenbcnmjDIzvl4P+BidReoenlpbBLZzRbZepSqA7m3OpUGmSff3c86tb64+KE/jrZ1qjRnkK5TTKiX/wUCU8t1G+o/wMH6X0PKIXyuEZbMogMLGlQYX42OpXObDj/w3/ewd+CzAAVsh37ZsNoAAAAAAASUVORK5CYII="></td>
        <td id="info-text" width="100%">Göndermek için dokunun...</td>
        <td id="info-progress" style="width:100%; margin:auto; display:none; vertical-align:middle;">
          <progress id="progress-bar" value="0" max="100" style="width:100%; margin:auto; display:block;">0%</progress>
          <label for="progress-bar" id="info-progress-text"
            style="font-size: 0.75em; text-align: left;">Gönderiyor...</label>
        </td>
      </tr>
    </table>
  </div>
<script type="text/javascript">
document.getElementById('file-input').onchange = function () {
    if (this.files.length <= 0) {
      return;
    }

    document.getElementById("fileinfo").style.display = "block";
    var fil = document.getElementById("file-input-label");
    for(var i=0; i < this.files.length; i++){
      var fsize = this.files[i].size;
      var ix = Math.floor(Math.log(fsize) / Math.log(1024));
      if(i==0){
        fil.innerHTML = '';
      }
      fil.innerHTML += (this.files[i].name + '<br>(' + (fsize / Math.pow(1024, ix)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][ix] + ')');
      if(i<this.files.length-1){
        fil.innerHTML+='<hr class="hr-gradient"/>';
      }
    }
    

    document.getElementById("info-left-icon-img").src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0U4M0UwM0FBNzQ1MTFFMUEwRTZBRTg0REFDQ0I4OUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0U4M0UwM0JBNzQ1MTFFMUEwRTZBRTg0REFDQ0I4OUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3RTgzRTAzOEE3NDUxMUUxQTBFNkFFODREQUNDQjg5QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3RTgzRTAzOUE3NDUxMUUxQTBFNkFFODREQUNDQjg5QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg+04HAAAANsSURBVHja7FfNThRBEK6en90dfvTgiZgYUAwcxMSYKBIuetIAGsgmhofwBQggoPHqS3hRASMr8gKQqEdJjCYaNxgvJl4Ad2F3utuq7umZ2WEGidm4B+mk6KHprp+vvqpumJQSWjksaPE4dqDlDrBgdq/Pr74XwPqJlIwxFAt8IaDuSxC41gyuolqw8IdryY/rC6MXcanuKONzrzavXujtuzLQg4YE2JYNT9bewcTlLpgc6ml61E/flPsBSpvrC2MD5ECbAKvv2sWzUN2vqUhdh8GnrR8weW8IvlUBfN48444NcHewGx6vfugj2+RATkMsgKwzBZWGnUbNhyPBz1LW0o4JaWb1kXPMWYtpMd+hEpmhKWXYGJ2DtOYYiy/SzyWWWFgFNpLDCoS+Q4+PKBI1ORjOjalFaPNQH35Llr43jpgVesU0S43EETBCGxk07jNCilxEoNPLwc3pFego6HwndSTTGSGAuFtGbBZFLyMhvPI5ZE4eoL3QKB5KwcUZs0pO3JouQXue9OoA43pkDAIn9CSFA34AD3lNa8SY0dkX4OVdlaokCW20VsBNKpUeg5H7JSjNjcFORXNCBvv4AQTIgBUJAWA2Gg5SPulvbWi8AyPsTAiteXlHOUEousjGjgIh8RJcV1s2uniMAzEEWBiVmclrEcu/kH/XaxvSSHpjehxDQjslBTxOHqEbUrVWV1qSKVDKEKIcMpEQ8LEWf+3VYGX+DuxiMxMiKsEDDmRygEcI0FytATyfGVe1fuBWwzMekq744DUSz4LKfh0WZ3T+6zxiv0otT3MgqADdUJjChcsob8YhajJpbc8Oan4PWyftX5q9DTvVRuNmcJnCgYb6ZxFUIlm7GTwQeGYPs7OLMJUeFmG7km6cZacgIqHphJxHZfinQY4i6vBspqhyzkX6OZUCkYKAakQJDtQzuhdkXDwSGwdngdOH7KvLRCNiQZOpYQ3Tg8SxIjSYHWvgR3Ai82pM3D5Gv6N6jF8rr7390j0yeE6Vi4url853wdLGVxgf7tHEa8brnenbcnmjDIzvl4P+BidReoenlpbBLZzRbZepSqA7m3OpUGmSff3c86tb64+KE/jrZ1qjRnkK5TTKiX/wUCU8t1G+o/wMH6X0PKIXyuEZbMogMLGlQYX42OpXObDj/w3/ewd+CzAAVsh37ZsNoAAAAAAASUVORK5CYII=";
    var infoText = document.getElementById("info-text");
    infoText.innerHTML = "Göndermek için dokunun...";
  }
</script>
</body>
</html>