Tiny File Manager

File "ex02.php"
Full Path: /home/analogde/www/30_09_2024/ex02.php
File size: 15.16 KB
MIME-type: text/html
Charset: utf-8
Open Edit Advanced Editor Back

<!--

voir ???

https://www.codexworld.com/upload-multiple-files-with-javascript-using-php/


 formData.append("files[]", fileInput.files[i]);
-->

	<div id="file_count"></div>
	
	<!--
	<input type="file" id="fileUpload" multiple /> 
	-->
	
	<form id="form_transfert_fichier" name="form_transfert_fichier" enctype="multipart/form-data">
	
		<input type="file" id="uploadFile" name="fichiers_transfert[]" multiple="multiple" />
	
	
		<br>
		<br>
		<button onclick="uploadFiles()">Upload</button> 
		
		<!--
		<button onclick="query()">Upload</button> 
		-->
		
		<input type="button" value="Envoi" onclick="debug();" /> 
	
	</form>
	
	<div id="upload_prev"></div>

	<div id="server_response">Pas de réponse du serveur</div>

<style>

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

.filenameupload {
  width: 98%;
}



#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>

		

		var fileCount = 0;

		var xhr

		function sendFile()
		{
			document.getElementById("server_response").innerHTML = "";//clear previous server response
			
			var url = "upload_files.php";
			
			xhr = new XMLHttpRequest();
			
			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("server_response").innerHTML = xhr.responseText;
					
					alert(xhr.responseText);
					
				}
			}


			var formData = new FormData();
			formData = traitement();
			
			console.log(" +++++++++++++++++++++ ");
			
			for (let keyValue of formData.entries())
			{
				console.log(keyValue);
			}
			
			for (var newfile of formData.getAll('file'))
			{
				console.log(newfile.name);
				console.log(newfile.size);
			}  
			
			
						
			xhr.send(formData); 
		}	

		
function envoi()
{

		var formData = new FormData();
		formData = traitement();
		
		console.log("#########################################");
		
		var numb = Array.from(formData.keys()).length;
		
		let indice = 0;
		
		
		for (const pair of formData.entries()) {  
  console.log('${pair[0]}, ${pair[1]}');  
}  
		
		var retour = formData.getAll('files')
		
		console.log(" xxxx " + retour);
		
		for (let keyValue of formData.entries())
		{
				var lulu = formData[indice];
				
				console.log("Contenu " + lulu);
				
				
				console.log("Indice " + indice);
				++indice;
				
				
		}
		
		console.log("---> " + numb);
		
		
		//for (var i = 0; i < numb; ++i) 
		//for (let item of formData) 
		//{
			//var data_envoi = new FormData();
			//data_envoi.append('file', item);
/*
				document.getElementById("server_response").innerHTML = "";//clear previous server response
			
				var url = "upload_files.php";
			
				xhr = new XMLHttpRequest();
			
				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("server_response").innerHTML = xhr.responseText;
					
						alert(xhr.responseText);
					}
				}
				
				xhr.send(formData); 
	*/			
		
		
		/*for (let item of formData) 
		{
            console.log(item)
			
			
        }*/
		
		
		
		/*for (let keyValue of formData.entries())
		{
				console.log(keyValue);
				
				var data_envoi = new FormData();
				data_envoi.append('file', keyValue);

				document.getElementById("server_response").innerHTML = "";//clear previous server response
			
				var url = "upload_files.php";
			
				xhr = new XMLHttpRequest();
			
				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("server_response").innerHTML = xhr.responseText;
					
						alert(xhr.responseText);
					}
				}
				
				xhr.send(data_envoi); 
				
				
		}
			
		for (var newfile of formData.getAll('file'))
		{
			console.log(newfile.name);
			console.log(newfile.size);
	 		//MIME type
		}  */
}

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

	$(document).on('click', '.close', function() 
	{
		$(this).parents('span').remove();
		fileCount -= 1;
		showFileCount();
	})

	$('#uploadFile').on('change', function() 
	{

		var filename = this.value;
		var lastIndex = filename.lastIndexOf("\\");
		if (lastIndex >= 0) 
		{
			filename = filename.substring(lastIndex + 1);
		}
  
		var files = $('#uploadFile')[0].files;
		
		for (var i = 0; i < files.length; i++) 
		{
			$("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + '</div>' + '<p class="close" >X</p></span>');
		}
  
		fileCount += files.length;
		showFileCount();
	});

function uploadFiles() 
{
           // var fileInput = document.getElementById('fileUpload');
           // var files = fileInput.files;
		   
		    /*var files = uploadFile.files;

			var inp = document.getElementById('uploadFile');
			for (var i = 0; i < inp.files.length; ++i) 
			{
				var name = inp.files.item(i).name;
				console.log("here is a file name: " + name);
				
				traitement(files[i], name,  i)
				
				
			}*/
			//traitement();
			
			const uploadForm = document.querySelector('form_transfert_fichier');
			
			console.log("message ..." + uploadForm);
}

//function traitement(file, name, indice)

function query()
{

	//form_transfert_fichier

	//var inp = document.getElementById('form_transfert_fichier');
	
	//console.log("inp");
	
	
	// const formData = new FormData('form_transfert_fichier')
     //   console.log(formData);
	
	// form_transfert_fichier
	
	console.log("message");
	
	
	/*for (let keyValue of formData.entries())
			{
				console.log(keyValue);
			}
			
			*/
}


function xhr_send(data)
{

			document.getElementById("server_response").innerHTML = "";//clear previous server response
			
			var url = "upload_files.php";
			
			xhr = new XMLHttpRequest();
			
			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("server_response").innerHTML = xhr.responseText;
					
					alert(xhr.responseText);
					
				}
			}
						
			xhr.send(data); 

}

function debug()
{
			array_valide_file = [];
			
			let numb = document.getElementById("upload_prev").childNodes.length;
			console.log(" ----- " + numb);
			
			var theDiv = document.getElementById('upload_prev').children;
			
			console.log(" ++++ " + theDiv.length);
			
			for (var i = 0; i < theDiv.length; i++) 
			{
				if (theDiv[i].tagName == 'SPAN')
				{ 
					var pipo = theDiv[i].children;
					console.log(" On a deux éléments dans le span" + pipo.length  );
					array_valide_file.push( pipo[0].innerHTML );
				}
			}
			
			for (i = 0; i < array_valide_file.length; i++)
			{
				console.log("Contenu " + i + "  " + array_valide_file[i] );
			}
			
			var fileInput = document.getElementById('uploadFile');
            //var files = fileInput.files;

			var inp = document.getElementById('uploadFile');
			for (var i = 0; i < inp.files.length; ++i) 
			{
				var name = inp.files.item(i).name;
				console.log("here is a file name: " + name);
				
				for (var j = 0; j < array_valide_file.length; ++j) 
				{
					if( name == array_valide_file[j])
					{
						console.log(" Bingo envoi  " + name ) 
						// maintenant on va remplir le nouveau Formdata
						var formData = new FormData();
						formData.append('file', inp.files[i]);
						
						xhr_send(formData);
						
					}
				}
				
			}
			
			// pour le debug, je veux voir le contenu de formdata - on going ....
/*			
			console.log(" +++++++++++++++++++++ ");
			
			for (let keyValue of formData.entries())
			{
				console.log(keyValue);
			}
			
			for (var newfile of formData.getAll('file'))
			{
				console.log(newfile.name);
				console.log(newfile.size);
	 
				//MIME type
			}  
*/			
			//var arraycontains = (tableau.indexOf("volvo.txt") > -1);
			
			
			/*if(  name == "volvo.txt" )
			{
					console.log(">>>> " + indice + "   " + name + "  " + file );
					formData.append('file', file);
			}*/
			//console.log("TRACE....");
			
			return(formData);
			
}			



function traitement()
{
			//https://www.encodedna.com/javascript/practice-ground/default.htm?pg=javascript_indexof_method
			
			//var inp = document.getElementById('upload_prev');
			//console.log(" ----- " + inp.length);
			
			// vide le tableau
			array_valide_file = [];
			
			let numb = document.getElementById("upload_prev").childNodes.length;
			console.log(" ----- " + numb);
			
			var theDiv = document.getElementById('upload_prev').children;
			
			console.log(" ++++ " + theDiv.length);
			
			for (var i = 0; i < theDiv.length; i++) 
			{
			 
			   if (theDiv[i].tagName == 'SPAN')
			   { 
					var pipo = theDiv[i].children;
					console.log(" On a deux éléments dans le span" + pipo.length  );
					
					//for (var j = 0; j < pipo.length; j++) 
					//{
						// on prend uniquement le premier qui correspond class="filenameupload"
						// console.log( pipo[0].innerHTML + "  " + pipo[0].className );
						 
						 array_valide_file.push( pipo[0].innerHTML );
						 // différence entre append et push
					//}
					
				 //console.log( theDiv[i].innerHTML );
				 // result.innerHTML
			   }
			}
			
			for (i = 0; i < array_valide_file.length; i++)
			{
				console.log("Contenu " + i + "  " + array_valide_file[i] );
			}
			
			
			// maintenant on va remplir le nouveau Formdata
			
            var formData = new FormData();
			
			
			var fileInput = document.getElementById('uploadFile');
            //var files = fileInput.files;

			var inp = document.getElementById('uploadFile');
			for (var i = 0; i < inp.files.length; ++i) 
			{
				var name = inp.files.item(i).name;
				console.log("here is a file name: " + name);
				
				for (var j = 0; j < array_valide_file.length; ++j) 
				{
					if( name == array_valide_file[j])
					{
						console.log(" Bingo  " + name ) 
						formData.append('file', inp.files[i]);
						
						// essai à faire
						 //formData.append("files[]", fileInput.files[i]);
						 
						 // google >>>> javascript post form data with multiple of files to php
						 
						 // https://stackoverflow.com/questions/12989442/uploading-multiple-files-using-formdata
						 
						 // https://www.tutorialswebsite.com/upload-multiple-files-using-javascript-and-php/
						 
						 //https://www.codexworld.com/upload-multiple-files-with-form-data-using-jquery-ajax-php/
						 
						 //https://hackernoon.com/how-to-create-a-multiple-files-uploader-for-your-php-application
						 
						 // https://www.tutorialspoint.com/how-to-select-and-upload-multiple-files-with-html-and-php-using-http-post
						 
						 // https://digitalfox-tutorials.com/tutorial.php?title=Preview-validate-and-upload-multiple-files-with-javascript-AJAX-and-PHP
						
						//https://blog.filestack.com/upload-multiple-files-using-javascript/
						
						// https://www.studentstutorial.com/ajax/multiple-file-upload#google_vignette
						
						// https://www.webslesson.info/2021/07/javascript-multiple-file-upload-progress-bar-with-php.html
					
					}
				}
				
			}
			
			// pour le debug, je veux voir le contenu de formdata - on going ....
/*			
			console.log(" +++++++++++++++++++++ ");
			
			for (let keyValue of formData.entries())
			{
				console.log(keyValue);
			}
			
			for (var newfile of formData.getAll('file'))
			{
				console.log(newfile.name);
				console.log(newfile.size);
	 
				//MIME type
			}  
*/			
			//var arraycontains = (tableau.indexOf("volvo.txt") > -1);
			
			
			/*if(  name == "volvo.txt" )
			{
					console.log(">>>> " + indice + "   " + name + "  " + file );
					formData.append('file', file);
			}*/
			//console.log("TRACE....");
			
			return(formData);
			
}			


function getMimeTypeFromExtension(extension = "txt")
 {
    if (extension[0] === ".") 
	{
        extension = extension.substr(1);
    }
    return {
        "aac": "audio/aac",
        "abw": "application/x-abiword",
        "arc": "application/x-freearc",
        "avi": "video/x-msvideo",
        "azw": "application/vnd.amazon.ebook",
        "bin": "application/octet-stream",
        "bmp": "image/bmp",
        "bz": "application/x-bzip",
        "bz2": "application/x-bzip2",
        "cda": "application/x-cdf",
        "csh": "application/x-csh",
        "css": "text/css",
        "csv": "text/csv",
        "doc": "application/msword",
        "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "eot": "application/vnd.ms-fontobject",
        "epub": "application/epub+zip",
        "gz": "application/gzip",
        "gif": "image/gif",
        "htm": "text/html",
        "html": "text/html",
        "ico": "image/vnd.microsoft.icon",
        "ics": "text/calendar",
        "jar": "application/java-archive",
        "jpeg": "image/jpeg",
        "jpg": "image/jpeg",
        "js": "text/javascript",
        "json": "application/json",
        "jsonld": "application/ld+json",
        "mid": "audio/midi audio/x-midi",
        "midi": "audio/midi audio/x-midi",
        "mjs": "text/javascript",
        "mp3": "audio/mpeg",
        "mp4": "video/mp4",
        "mpeg": "video/mpeg",
        "mpkg": "application/vnd.apple.installer+xml",
        "odp": "application/vnd.oasis.opendocument.presentation",
        "ods": "application/vnd.oasis.opendocument.spreadsheet",
        "odt": "application/vnd.oasis.opendocument.text",
        "oga": "audio/ogg",
        "ogv": "video/ogg",
        "ogx": "application/ogg",
        "opus": "audio/opus",
        "otf": "font/otf",
        "png": "image/png",
        "pdf": "application/pdf",
        "php": "application/x-httpd-php",
        "ppt": "application/vnd.ms-powerpoint",
        "pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
        "rar": "application/vnd.rar",
        "rtf": "application/rtf",
        "sh": "application/x-sh",
        "svg": "image/svg+xml",
        "swf": "application/x-shockwave-flash",
        "tar": "application/x-tar",
        "tif": "image/tiff",
        "tiff": "image/tiff",
        "ts": "video/mp2t",
        "ttf": "font/ttf",
        "txt": "text/plain",
        "vsd": "application/vnd.visio",
        "wav": "audio/wav",
        "weba": "audio/webm",
        "webm": "video/webm",
        "webp": "image/webp",
        "woff": "font/woff",
        "woff2": "font/woff2",
        "xhtml": "application/xhtml+xml",
        "xls": "application/vnd.ms-excel",
        "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "xml": "application/xml",
        "xul": "application/vnd.mozilla.xul+xml",
        "zip": "application/zip",
        "3gp": "video/3gpp",
        "3g2": "video/3gpp2",
        "7z": "application/x-7z-compressed"
    }[extension] || "application/octet-stream";
}
</script>