<?php  session_start(); ?>

<html lang='gr'>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/>

 
<?php 

$folder="/";
if (isset($_GET['myF'])) {$folder = $_GET['myF']; }
if (isset($_GET['f'])) {$MasterForm = $_GET['f']; }

?>  
<div id="upload_div" class="CenterDiv" style="text-align:center;padding:0px;" >	

	<h1>UPLOAD FILES</h1> 
	<input hidden type="text" id="telos" name="telos"  style="width:100%;"   />
	<form id="myForm" style="padding:10px;">
	<div style="padding:opx;" > 
		<input style="display: none;"  value="myForm" id="btnSelectFile" name="<?php echo ini_get(option: 'session.upload_progress.name'); ?>">  
		<input type="file" id="file" name="file" multiple />
		<input style="display: none;" type="text" id="folder" name="folder" value="<?php echo $folder ?>" > </input>
	</div>
	<table style="width:100%;padding:-5px 0 -5px 0;border:0px solid red">
		<tr>
			<td style="padding-right:20px; border:0px solid red;" >
				<input type="text" id="filename" name="filename" class="filename" style="text-wrap: wrap;width:100%;" required />
			</td>
		</tr>
 
		<tr>
			<td style="width:80%;padding:10px;" >
				<div class="progress" style="height: 32px; background:none">
					 <div id="progressbar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
				</div>			
			</td>
		</tr>
	
	</table>	
		
	<table style="width:100%;padding:-5px 0 -5px 0;border:0px solid red">		
		<tr>
			<td colspan=2 >	<hr> </td>
		<tr>	
	<tr>
			<td style="width:80%" >
			   <a class='button folderOpen' style="width:120px;" href="javascript:btnSelectFilesClicked();">Select File</a>
			   <a class='button upload' style="width:100px;" href="javascript:uploadFile();"> Upload </a>
			</td>
			<td style="width:19%; text-align:right;" >			
				<a  class='button exit' style="width:100px;" href="javascript:goBack();">  Έξοδος  </a> 	
			</td>
		</tr>
		
	</table>	
	
		<input hidden type="text" id="FileExt" name="FileExt" />
   			
	</form>
</div>


<script language="JavaScript" type="text/JavaScript">
var btn=document.getElementById('file');
	btn.style.display='none';	
	document.getElementById('filename').value="Παρακαλώ επιλέξτε το αρχείο για ανέβασμα στον Server...";
//	document.getElementById('filename').innerHTML="Παρακαλώ επιλέξτε το αρχείο για ανέβασμα στον Server...";
	
btn.addEventListener("change", () => {
  if (btn.files.length == 1) {
	  var val1=document.getElementById('file').value;
	  val1=val1.split(/(\\|\/)/g).pop();
	//document.getElementById('filename').innerHTML =val1;
	var nameWithOutExt =  val1.substring(0, val1.lastIndexOf('.'));
	var FileExt = val1.split('.').pop();
	   document.getElementById('filename').value=nameWithOutExt;	
	   document.getElementById('FileExt').value=FileExt;
  }
});


function upload_divHide(){
	 document.getElementById('upload_div').style.display='none';
}
  
function goBack(){
	//window.history.go(-1);
	//location.reload();	
	
	window.history.go(-1);
 	//window.location.reload();
 
//	var startpt = '-' + ( window.history.length - 1);
//  window.history.go(startpt);
  
 }
  
  
function btnSelectFilesClicked(){
	var btn=document.getElementById('file');
	 btn.click();
	// btn.style.display='block';
}

 function uploadFile() {
	 
  var uploadFile = $("#file")[0].files[0];
		   timer = setInterval(getStatus, 1000);

	var progressbar = document.getElementById('progressbar');
	progressbar.style.width='0px';
	progressbar.innerHTML='';

 
    $.ajax( 
		{
            url : "upload.php",
            type: 'POST',
            data : new FormData($('form')[0]),
            cache: false,
            contentType: false,
            processData: false,

            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    // For handling the progress of the upload
                    myXhr.upload.addEventListener('progress',
                        function(e) {
                            if (e.lengthComputable) {
                                if (e.loaded < e.total) {
								    var percentComplete = (e.loaded / e.total) * 100;  
									progressbar.style.width=percentComplete.toFixed(0)+'%';
									progressbar.innerHTML='Uploading ('+percentComplete.toFixed(2)+'%)' ;
								} else {
                                    $('#process').html("Processing upload, please wait.");
                                }
                            }
                        } , false);
                }
                return myXhr;
            },
            success: function (response) {
                $('#process').html(response);
				document.getElementById('telos').value=response;
				 progressbar.style.width='100%';
                 progressbar.innerHTML='Uploading (100%)' ;
                clearTimeout(timer);
				  goBack();
            }
        }
    );
}

function getStatus() {
    $.get("progress.php",
        function(response) {
            $("#process2").html(response);
        }
    );
}
 </script>
 
 