<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-upload"></i> <?php echo $lang['SideBar_2']?></h1>
        </div>
    </div>
    <form method="post" enctype="multipart/form-data">
        <div class="page-error tile">


            <table>
            <tr>
            <td><input class="btn btn-primary" type="button" value="<?php echo $lang['file_upload']?>" onclick="changeUpload('1')"></td>
            <td><input class="btn btn-primary" type="button" value="<?php echo $lang['remote_url_upload']?>" onclick="changeUpload('2')"></td>
            </tr>
            </table>

            <br>

            
              <div style="margin:auto;width:60%;" id="upload_1">
                  <div class="row">
                      <div class="col-sm-12">
                          <input type="file" id="input-file-max-fs" name="file1" class="dropify" data-max-file-size="<?php echo $max_upload_size?>M" />
                      </div>
                  </div>
              </div>

              <div style="margin:auto;width:60%;display:none" id="upload_2">
                  <div class="row">
                      <div class="col-sm-12">
                          <textarea class="form-control" id="input_file_url" name="input_file_url" rows="8" style="height:200px;"></textarea>
                      </div>
                  </div>
              </div>

              <br>
              
              <div style="margin:auto;width:60%;">
              <div class="row">
                <span id="status_final" style="margin:auto;width:672px;"></span>
                <div id="info_upload" style="margin:auto;width:100%;display:none"> 

                  <div style="margin:auto;width:100%;">
                      <div class="bs-component">
                          <div class="progress mb-2" style="height:20px;">
                              
                              <div class="progress-bar progress-bar-striped progress-bar-animated active" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;height:20px;">
                                  <span id="status"></span>
                              </div>
                          </div>
                      </div>
                  </div>
                </div>
              </div>
              </div>
              
          

              <br>
              <input class="btn btn-primary" id="btn_1" type="button" value="<?php echo $lang['upload']?>" onclick="uploadFile()">
              <input class="btn btn-primary" id="btn_2" type="button" value="<?php echo $lang['upload']?>" onclick="uploadFile_URL()" style="display:none">
              <br>
              <h6>(<?php echo $lang['Max_Upload_size']?>: <?php echo $max_upload_size . " MB"?> )</h6>
            
              

        </div>
        
    </form>
    <?php $ads->showBannerMember($banner);?>

      
  

</main>
<script>
function _(el) {
  return document.getElementById(el);
}

function uploadFile() {
  _("info_upload").style.display="inline-block";
  var file = _("input-file-max-fs").files[0];
  var formdata = new FormData();
  formdata.append("input-file-max-fs", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "../ajax.php");
  ajax.send(formdata);

}

function uploadFile_URL() {
  _("info_upload").style.display="inline-block";
  var file = _("input_file_url").value;
  var formdata = new FormData();
  formdata.append("input_file_url", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "../ajax.php");
  ajax.send(formdata);

}

function progressHandler(event) {
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").style.width = Math.round(percent) + '%';
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status_final").innerHTML = event.target.responseText;
  _("progressBar").value = 0;
  _("info_upload").style.display="none";
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
  _("info_upload").style.display="none";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
  _("info_upload").style.display="none";
}

function changeUpload(id){
  _("upload_1").style.display="none";
  _("upload_2").style.display="none";
  _("btn_1").style.display="none";
  _("btn_2").style.display="none";

  _("upload_"+id).style.display="inline";
  _("btn_"+id).style.display="inline";
}
</script>

