Tiny File Manager

Back Back Up Advanced Editor

<!--
https://www.gyrocode.com/articles/how-to-reset-file-input-with-javascript/

https://www.geeksforgeeks.org/how-to-reset-input-type-file-using-javascript-jquery/

https://laracasts.com/discuss/channels/javascript/js-while-removing-single-file-from-file-input-list-removing-all-files-in-the-list

https://stackoverflow.com/questions/42116909/show-remaining-file-count-when-removing-files-on-multiple-file-upload

https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications

ajax  array vers php

https://www.studentstutorial.com/ajax/array_data#google_vignette
-->

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

input[type="file"] {
width:100px;
overflow: hidden;
}

</style>
	
	<script src="js/TimeStructure.js"></script>
	<script src="js/SizeStructure.js"></script>

</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>

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

<div id="divID"> * * * * * </div>
		
		<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> ***** <input type="file" id="file1" name="file1" onchange="titi(this.value)"></td>
				</tr>
				
				<tr>
					
				</tr>

<button id="resetbtn" type="button"> Reset file </button>

<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

const container = document.getElementById('buttonContainer');

// Boucle pour générer les boutons
    /*for (let i = 1; i <= 5; i++) {
        // Crée un nouveau bouton
        const button = document.createElement('button');

// Définit l'ID du bouton
        button.id = 'button' + i;

// Définit le texte du bouton
        button.innerText = 'Bouton ' + i;
		
		button.addEventListener('click', function() {
            handleClick(button.id);  // Appelle la fonction en passant l'ID
        });

// Ajoute le bouton au conteneur
        container.appendChild(button);
    }*/

var div = document.getElementById('divID');

div.innerHTML = 'Extra stuff';

$(document).ready(function()
	{

$('#resetbtn').on('click', function (e) 
		{
                let $el = $('#fileInput');
                $el.wrap('<form>').closest('form').get(0).reset();
                $el.unwrap();
				
				const fileInput = document.getElementById('fileInput');
				const fileCount = fileInput.files.length;
				console.log(`Number of selected files: ${fileCount}`);
				
				// 
				const noeud = document.getElementById('buttonContainer');
				noeud.innerHTML = '';
				
				/*var elements = document.getElementById('buttonContainer').children;
				for (i = 0; i <= elements.length - 1; i++)
				{
					console.log(" ID " + elements[i].id )
					document.getElementById(elements[i].id).remove();
				}*/
        });

$('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();

let i = 0;
			
			
			for (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>');
				
				var $removeButton = $('<span class="remove-button">x</span>');
				
					$removeButton.on('click', function()
					{
			
					alert("Action ...");
					console.log("klhklhjkhjhkj");
				
					});
				
				$fileItem.append($removeButton);
				$selectedFiles.append($fileItem);
				
				console.log("contenu " + $selectedFiles.childNodes);
				
				//$selectedFiles.append($fileItem);

array_files.push('<div class="file-item">' + fileName  +'</div><span class="remove-button" onclick="go(i)"  >x</span>');
			
				//div.innerHTML +=  fileName +  '<button id="btn" onclick="go('aqw')" name="btn">Button</button>' + "<br>";
				
/*				
				for (var i = 0; i < 5; i++) { 
        var btn = document.createElement("BUTTON"); 
        var t = document.createTextNode("Button " + i); 
        btn.appendChild(t); 
        document.getElementById("button-container").appendChild(btn); 
    } 
*/

/*
		 for (var i = 0; i < 5; i++) { 
        var btn = $("<button>").text("Button " + i); 
        btn.addClass("my-button"); 
        btn.attr("data-index", i); 
        $("#button-container").append(btn); 
    } 
*/				
				//var newID= "indice"+i+1  ;
				
				//div.innerHTML += '<button id=newID name="btn" onclick="go(this.id)" >Button</button>'; 
				
			/*
			<span class="remove-button">x</span>
			*/

}
			
			for (i = 0; i < aaa; i++)
			{
				let fileName = e.target.files[i].name;
			
				const div = document.createElement('div');
				
				div.id = "list_files" + i;
				
				const text = document.createElement('span');
				text.id = "name_file" + i;
				text.innerText = fileName; 
							
				// Crée un nouveau bouton
				const button = document.createElement('button');

// Définit l'ID du bouton
				button.id = 'button' + i;

// Définit le texte du bouton
				button.innerText = 'X' + i;
		
				button.addEventListener('click', function() 
				{
					//handleClick(button.id);  // Appelle la fonction en passant l'ID
					supprimeClick(div.id, button.id);
				});

// Ajoute le bouton au conteneur
				
				
				div.appendChild(text);
				div.appendChild(button);
				
				div.style.marginBottom = '10px';
				
				container.appendChild(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";

///////		OK mais on ne l'utilise pas	
//////		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 supprimeClick(divId, buttonId)
{

console.log(" Supprime >>> " + buttonId);
	document.getElementById(divId).remove();
	
	// list_files3
	var ret = divId.replace('list_files','');
	console.log(" Indice " + ret);   
	
	const fileList = document.getElementById('fileInput').files;

//fileList.delete(ret);
	
	const newFileList = Array.prototype.slice.call(fileList, 1);
	
	console.log(" ------ " + newFileList + "   " + newFileList.length);
	
	
	
	findElementID() 
		
	const fileInput = document.getElementById('fileInput');
	const fileCount = fileInput.files.length;
	console.log(`Number of selected files: ${fileCount}`);
}

function handleClick(buttonId) 
{
        // Affiche l'ID du bouton cliqué dans le paragraphe "output"
       // output.textContent = "Bouton cliqué : " + buttonId;
	   
	   console.log(" ----->>> " + buttonId);
	   // Supprime le bouton cliqué
       // buttonId.remove();
	   
	   document.getElementById(buttonId).remove();
	   
	   
	   
}

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 go(val)
{
	console.log("TRACE... " + val);
	
	console.log(val.length); // 3.
	
}

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

function findElementID() 
{

/*var elem = document.getElementById('container').children;

for (i = 0; i <= elem.length - 1; i++)
		{
			console.log("aaaaaaa");
		}*/
		
		var matches = [];
		var searchEles = document.getElementById("buttonContainer").children;

console.log("DEBUT " + searchEles.length);

//searchEles.children[0];

for(var i = 0; i < searchEles.length; i++) 
		{
			var premier = document.getElementById(searchEles[i].id).children;
			console.log("aaaTRACE " + searchEles[i].id  + " " + premier.length);
			for(var j = 0; j < premier.length; j++) 
			{
				console.log("Suite " + i + " " + premier[j].tagName );
				var span_Text = premier[j].tagName;
				if(span_Text == "SPAN")
				{
					var champ = document.getElementById(premier[j].id).innerText;
					console.log("Bingo..." + champ + "  " + premier[j].id );
					matches.push(champ);
				}
			}
		}	
			
			
		console.log(" Contenu : " + matches.length );
			
		for (var i = 0; i < matches.length; i++) 
		{
			console.log(" Contenu ---->>> : " + matches[i] );
		}
			
		console.log(" ---------------- : ");
		
		//const fs = require('fs')

// Data which will write in a file.
		//let data = "Hello world."
	
		// Write data in 'Hello.txt' .
		/*fs.writeFile('Hello.txt', data, (err) => 
		{
			// In case of a error throw err.
			if (err) throw err;
		})*/
		
		//https://stackoverflow.com/questions/2013728/passing-javascript-array-to-php-through-jquery-ajax
	
/*	OK
		var vehicle = [];
		
        vehicle.push("bidule.pdf");
		vehicle.push("zoulou.docx");
		vehicle.push("document.pptx");
	
		$.ajax({
         data:  {
			 vehicle:vehicle
		 },
         type: "post",
         url: "save.php",
         success: function(data){
              alert(data);
         }
	});
*/

$.ajax({
         data:  {
			 matches:matches
		 },
         type: "post",
         url: "transfert.php",
         success: function(data){
              alert(data);
         }
	});

/*	
		var url = "traitement.php";

$.ajax({
  type: "POST",
  //url: url,
  url: 'traitement.php',  'matches[]': matches,
  //data: JSON.stringify(data),
  //contentType: "application/json; charset=utf-8",
  //dataType: "json",
  error: function() {
    alert("Error");
  },
  success: function() {
    alert("OK");
  }
});
*/
			
			/*for(var j = 0; j < premier.length; i++) 
			{
			
				console.log("aaaTRACE " + premier[j].id );
			
				/*if(premier[j].tagName == "SPAN" ) 
				{
					var span_Text = document.getElementById(premier[j].id).innerText;
					
					console.log("aaaTRACE " + premier[j].id + "  " + span_Text);
				}*/
			/*}*/
		
			//console.log("aaaTRACE " + searchEles[i].id + "  " + premier.length );
		
		/*
			if(premier[i].tagName == "SPAN" ) 
			{
				var span_Text = document.getElementById(premier[i].id).innerText;
		
				console.log("aaaTRACE " + premier[i].id + " " + premier.length + " " + premier[i].tagName + " " + span_Text);
			}*/
			
			
			/*for(var j = 0; j < premier.length; i++) 
			{
				console.log("TRACE" + premier[j].id);
			}*/
		
			/*if(searchEles[i].tagName == "SPAN" ) 
			{
				//matches.push(searchEles[i]);
				
				console.log("TRACE");
			}*/
			
			/*if(searchEles[i].tagName == "DIV" ) 
			{
				//matches.push(searchEles[i]);
				
				
				
				
				console.log("aaaTRACE " + searchEles[i].id );
				
				/*var pipo = document.getElementById(searchEles[i].id).children;

for(var i = 0; i < pipo.length; i++) 
				{
					console.log("blabla");
				}*/
				
			/*}*/
	
		/*console.log("FIN");

var elements = document.getElementById('buttonContainer').children;
        
		//  <p id="msg"></p> plus haut
		//var msg = document.getElementById('msg');

// Loop through all the child elements inside the parent DIV.
        for (i = 0; i <= elements.length - 1; i++)
		{
            //msg.innerHTML = msg.innerHTML + '<br />' + birds[i].id;
			console.log(" IDssss " + elements[i].id + " ++++ " + elements[i].name );
        }*/
}

function query()
{

console.log(file_input_data.files[1]); // File object
	 
	 console.log(file_input_data.files[2]); // File object
	 */
	 
for (const [key, value] of formData) {
  console.log('»', key, value)
}
	
	/*
	const input = document.getElementById('fileInput');
	// as an array, u have more freedom to transform the file list using array functions.
	const fileListArr = Array.from(input.files);
	
	console.log("TRACE" + fileListArr );
	
	
	
	fileListArr.splice(1); // here u remove the file
	console.log(fileListArr);
	*/
}
/*
	$(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>

function Function(val) 
{
		//document.getElementById("demo").innerHTML = val;

//$("#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]);
			console.log(" ++++ " + 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>

-->

<!--

const fileInputs = document.querySelectorAll(‘input[type=”file”]’);
let fileCount = 0;
for (let i = 0; i < fileInputs.length; i++) {
fileCount += fileInputs[i].files.length;
}
console.log(`Number of selected files: ${fileCount}`);

-->

<!--

const input = document.querySelector('input')

input.addEventListener('change', (e) => {
  const files = input.files
  const filesCount = fileList.length

for (let i = 0; i < files.length; i++) {
    const file = files[i]
    alert(file.name)
  }
})

-->

<!--
var formData = new FormData();
formData.append("email", "test1@test.com");
formData.append("email", "test2@test.com");
formData.get("email");

and

formData.getAll("email")
-->