Tiny File Manager

Back Back Up Advanced Editor

<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
	<title>Upload file to server</title>

</script>

var xhr, hUploadSpeed;

function sendFile()
		{
			document.getElementById("serverresponse").innerHTML = "";//clear previous server response

var url = "upload.php";

// OK
			//var multipleFiles = form_transfert_fichier.querySelector('input[type=file]');
			//console.log(multipleFiles);

// OK
			//let nbr = multipleFiles.files.length;
    		//console.log("Nombre de fichier " + nbr);

// OK
			//for (let i = 0; i < multipleFiles.files.length; i++) 
			//{
			//	console.log(multipleFiles.files[i].name );
			//}

//let uploadFormDate = new FormData(form_transfert_fichier);
			//console.log(uploadFormDate);

// OK
			//var form = this;
			//var files = form_transfert_fichier.querySelector('#fileInput').files;

//console.log("Liste " . files);

//var formData = new FormData(document.getElementById("form_transfert_fichier"));
			
			//var inputs = form_transfert_fichier.querySelectorAll('input[type=file]');

//for(let i=0; i<inputs.length; i++)
			//{
  			//	let file = inputs[i].files[0];
			//	console.log(" ** " . file);
  			//	//use file
			//}

/*var files = document.getElementById('form_transfert_fichier').files;
for (var x = 0; x < files.length; x++) {
    fd.append("fileToUpload[]", files[x]);
}*/

//console.log("++++ " .fd);

console.log("plouf");
			//form_transfert_fichier.querySelectorAll('input[type=file]')

//var files = $("#fileInput").get(0).files;
            //var fileData = new FormData();
  
            //for (var i = 0; i < files.length; i++) {
            //    fileData.append("fileInput", files[i]);
            //}

//console.log(" <<<>>>> " + formData);

xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', uploadProgress, false);//EventListener for upload progress
			xhr.addEventListener('abort', uploadAbort, false);//EventListener for abort
			xhr.addEventListener('error', uploadError, false);//EventListener for error
			xhr.addEventListener('load', uploadThrough, false);//EventListener for completed upload

xhr.open("POST", url, true);
			//xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //no longer necessary here
			xhr.onreadystatechange = function()
			{
				if(xhr.readyState == 4 && xhr.status == 200)
				{
					document.getElementById("serverresponse").innerHTML = xhr.responseText;
				}
			}

var formData = new FormData(form_transfert_fichier);

xhr.send(formData); //Send to server
			hUploadSpeed = setInterval(UploadSpeed, 1000); //per seconds
		}

/*From here down is same for all the methods, notifications, and other eventListeners*/
		var i = new TimeStructure();//creating a TimeStructure object
		var j = new SizeStructure();//creating a SizeStructure object

function abort()
		{
			clearInterval(hUploadSpeed);
			xhr.abort();
		}

var uploaded = 0, prevUpload = 0, speed = 0, total = 0, remainingBytes = 0, timeRemaining = 0;

function uploadProgress(e)
		{
			if (e.lengthComputable) 
			{
				uploaded = e.loaded;
				total = e.total;
				//percentage
				var percentage = Math.round((e.loaded / e.total) * 100);
				document.getElementById('progress_percentage').innerHTML = percentage + '%';
				document.getElementById('progress').style.width = percentage + '%';
				document.getElementById("remainingbyte").innerHTML =  j.BytesToStructuredString(e.total - e.loaded);//remaining bytes
				document.getElementById('uploadedbyte').innerHTML = j.BytesToStructuredString(e.loaded);//uploaded bytes
				document.getElementById('totalbyte').innerHTML = j.BytesToStructuredString(e.total);//total bytes
			}
		}

function uploadAbort()
		{
			document.getElementById('progress_percentage').innerHTML = '0%';
			document.getElementById('progress').style.width = '0px';
			document.getElementById("serverresponse").innerHTML = "Transfert annulé";
			xhr = null;
		}

function uploadError()
		{
			document.getElementById('progress_percentage').innerHTML = '0%';
			document.getElementById('progress').style.width = '0px';
			document.getElementById("serverresponse").innerHTML = "Un erreur à interrompu le transfert !.";
			clearInterval(hUploadSpeed);
			xhr = null;
		}

function uploadThrough()
		{
			document.getElementById('progress_percentage').innerHTML = 'Transfert complet 100%.';
			UploadSpeed();//flush
			clearInterval(hUploadSpeed);
			xhr = null;
		}

function UploadSpeed()
		{
			//speed
			speed = uploaded - prevUpload;
			prevUpload = uploaded;
			document.getElementById("speed").innerHTML = j.SpeedToStructuredString(speed);
			//Calculating ETR
			remainingBytes = total - uploaded;
			timeRemaining = remainingBytes / speed;
			document.getElementById("ETR").innerHTML = i.SecondsToStructuredString(timeRemaining);
		}

</script>

</head>

<body>

<button onclick="Function()">Click me</button>
		
		
		<div id="buttonContainer"></div>
		
		<button onclick="query()"> Query </button>

<p id="demo">zoulou</p>

<form id="form_transfert_fichier" name="form_transfert_fichier" enctype="multipart/form-data">
			<table width="100%">
				<tr>
					<td style="width:100px;">Selection :</td>
					<td>zzzzzaaaa<input type="file" id="file1" name="file1" onchange="titi(this.value)"></td>
				</tr>
				
				<tr>
					<td>File 2:</td><td><input type="file" id="file2" name="file2"></td>
				</tr>

<tr>
					<td></td>
					<td><input type="button" value="Envoi" onclick="sendFile();" /> 
						<input type="button" value="Stopper" onclick="abort();" />
					</td>
				</tr>
			</table>
		</form>

<table border=1 width="100%">
			<tr>
				<td style="width:250px;">Pourcentage de progression du transfert:</td>
				<td><span id="progress_percentage"> 0%</span></td>
			</tr>
			<tr>
				<td>Vitesse:</td>
				<td><span id="speed"> 0 bits/s</span></td>
			</tr>
			<tr>
				<td>Temps restant estimé:</td>
				<td><span id="ETR"> 0 secondes</span>
				</td>
			</tr>
			<tr>
				<td>Données restant à transmettre:</td>
				<td><span id="remainingbyte"> 0 bits</span></td>
			</tr>
			<tr>
				<td>Données envoyées:</td>
				<td><span id="uploadedbyte"> 0 bits</span></td>
			</tr>
			<tr>
				<td>Taille totale du fichier a envoyé:</td>
				<td><span id="totalbyte"> 0 bits</span></td>
			</tr>
			<tr>
				<td>Réponse du serveur:</td>
				<td><span id="serverresponse"></span></td>
			</tr>
		</table>
	</div>

//https://www.jqueryscript.net/form/file-input-preview.html#google_vignette

$(document).ready(function()
	{

$('input[type="file"]').change(function(e)
		{

var $selectedFilesContainer = $('<div class="selected-files-container"></div>');
			var $selectedFiles = $('<div class="selected-files"></div>');
			$selectedFilesContainer.append($selectedFiles);

var fileName = e.target.files[0].name;
			var aaa = e.target.files.length;
			//var numFiles = $("input", this)[0].files.length;

console.log(" ++++ " + aaa);

let nom = "";
			let taille = "";

var array_files = new Array();

for (let i = 0; i < aaa; i++)
			{

let fileName = e.target.files[i].name;
				let fileSize = formatBytes(e.target.files[i].size, 2)

let aqw = "1234";

nom += e.target.files[i].name + "<br>";

taille += formatBytes(e.target.files[i].size, 2) +  "<br>";

//taille += humanFileSize(e.target.files[i].size) + "<br>";

//taille += e.target.files[i].size + "<br>";

var $fileItem = $('<div class="file-item">' + fileName  +'</div>');
				$selectedFiles.append($fileItem);

array_files.push('<div class="file-item">' + fileName  +'</div>');

}

//$("p").append(" <b>Appended text</b>.");

console.log(" --->>>> " + nom + "  " + taille);

console.log(" --->>>> " + $selectedFiles);

/*
			<tr${highlight}>
                        <td>${currGrade}</td>
                        <td>${currAge}</td>
                    </tr>
			*/

// https://www.codedrome.com/creating-html-tables-with-javascript/

// https://www.valentinog.com/blog/html-table/

alert('The file "' + fileName +  '" has been selected.');

$selectedFilesContainer.addClass('has-files');

//document.getElementById("message").innerHTML = "whatever";

Function(array_files);
			//document.getElementById("message").innerHTML = "changement...";

//$('#message').html('whatever');					
        });
    });

/*
window.onload = function() {
    const fileCollection = document.getElementsByClassName('file1');
    for(let fileInput of fileCollection) {
        fileInput.addEventListener('change', getFileName);
    }
}
*/
/*
const getFileName = (event) => {
    const files = event.target.files;
    const fileName = files[0].name;
    console.log("file name: ", fileName);
}
*/

function humanFileSize(size) {
    var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
    return +((size / Math.pow(1024, i)).toFixed(2)) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
}

function formatBytes(bytes,decimals) {
   if(bytes == 0) return '0 Bytes';
   var k = 1024,
       dm = decimals || 2,
       sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
       i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

function titi(val)
{
	alert(val);
	console.log("efeze " + val);
}

/*
	$(document).ready(function() {

$("#file1").change(function() {  
  
	   var file_name=$("#file1").val();

console.log(" ++++ " + file_name);

$("#list_files").append("<tr><td>"+file_name+"</td></tr>");
   
  
   }); });
 */

</script>

<br>
<br>
<div id=message">dgfqdsgfqsdgdfg cretin</div>

</body>

//$("#demo").append('<div id = "newElement">A ' + 'Computer Science portal for geeks</div>');

$("#demo").append("Voici la liste des fichiers selectionnés :");

for (let i = 0; i < val.length; i++) 
		{
			$("#demo").append(val[i]);
		}

//$('#demo').append('<div> This div is appended! </div>')

}
	</script>

</html>

<!--

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>

<button onclick="myFunction()">Click me</button>

</body>
</html>

-->