1N0T · August 29, 2019 21:33
diff --git a/DragDropShowContentFile.html b/DragDropShowContentFile.html
 <html lang="es">

 <head>
    <title>&#x2705; Drag & Drop Files &#x1F4CC; </title>
    <meta charset="UTF-8"/>

    <style type="text/css">
        /* Importamos las fuentes "Work Sans" */
        @import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');

        /* elemento que admintirá drop de ficheros. */
        #upload {
            font-family: "Work Sans", sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 20px;
            margin: 20px;

            box-shadow: 
                inset 0 -3em 4em rgba(0,136,135,0.1), 
                0 0  0 2px rgb(0,136,135),
                0.3em 0.3em 1em rgba(0,0,0,0.3);
        }

        /* Para prevenir que no se dispare el evento "dragleave" al pasar sobre los elementos hijos. */
        #upload * {
            pointer-events: none;
        }

        /* Detalles de ficheros permitidos. */
        .fileAllowed {
            border-radius: 5px;
            border: 3px solid rgb(0,137,0);
            padding: 0px;
            padding-left: 20px;
            margin: 0px;
            margin-left: 0px;
            margin-top: 15px;
            margin-bottom: 5px;
        }

        /* Detalles de ficheros no permitidos. */
        .fileNotAllowed {
            border-radius: 5px;
            border: 3px solid rgb(137,0,0);
            padding: 0px;
            padding-left: 20px;
            margin: 0px;
            margin-left: 0px;
            margin-top: 15px;
            margin-bottom: 5px;
        }

        /* Colocamos logo a la izquierda del encabezado */
        #logo {
            float: left;
            margin-right: 15px;
        }
    </style>
 </head>

 <body>

    <div id='upload'>
        <img id="logo" src="data:image/png;base64,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">
        <h1>Drag & Drop file here.</h1>
    </div>

    <script type="text/javascript">
        // Seleccionamos por id del elemento que soportará el drop de ficheros.
        var element = document.querySelector('#upload');

        // Guardamos la configuración inicial del atributo CSS que modificaremos para indicar visualmente
        // que se permite realizar el drop de ficheros sobre el mismo. Y definimos el estilo CSS que aplicaremos.
        var originalBoxShadow = element.style.boxShadow;
        var enterBoxShadow = "inset 0 -3em 4em rgba(0,136,135,0.1), 0 0  0 2px rgb(0,255,0), 0.3em 0.3em 1em rgba(0,137,0,0.5)";

        // Al entrar en el elemento, aplicamos el estilo CSS para indicar que se puede realizar el drop de ficheros.
        element.addEventListener("dragenter", function (event) {
            event.preventDefault();
            event.target.style.boxShadow = enterBoxShadow;
        }, false);

        // Reestablecemos el estilo CSS original al salir del elemento que permite el drop de ficheros.
        element.addEventListener("dragleave", function (event) {
            event.preventDefault();
            event.target.style.boxShadow = originalBoxShadow;
        }, false);

        // Requerido para que el evento sólo sea procesado por nuestro elemento del DOM
        element.addEventListener("dragover", function (event) {
            event.preventDefault();
        }, false);

        // Procesamos el "drop" de los ficheros.
        element.addEventListener("drop", function (event) {
            // Guardamos la lista de ficheros arrastrados.
            var files = event.dataTransfer.files;

            // Reestablecemos estilos CSS originales, para indicar que el proceso ha concluido.
            event.preventDefault();
            event.target.style.boxShadow = originalBoxShadow;

            // Procesamos la lista de ficheros arrastrados. Como intervienen operaciones asíncronas, creamos
            // variables locales para cada iteración y evitar que una nueva iteración sobre la lista de ficheros,
            // modifique los valores anterirores que todavía puedan estar procesandose.
            for (var i = 0; i < files.length; i++) {
                console.log(files[i]);

                // Creamos el objeto lector de ficheros.
                let reader = new FileReader();
                
                // Guardamos los datos del fichero actual y realizamos el formateo que nos interesa.
                let file = files[i];
                let lastModifiedDate = new Date(file.lastModified);
                let fileSize = (file.size / 1024).toFixed(2).toLocaleString();

                // Creamos la división y el string de plantilla para mostrar los detalles del fichero.
                let fileAttributes = document.createElement('div');
                let fileMmarkup = `
                    <h4>
                        ${file.name}
                    </h4>
                    <pre>
                    <b>Type.............:</b> ${file.type}
                    <b>Size.............:</b> ${fileSize} <b>KB.</b>
                    <b>Last modification: </b>${lastModifiedDate.toLocaleTimeString()} ${lastModifiedDate.toLocaleDateString()}
                    </pre>
                `; 

                // Procesamos cada tipo de fichero de forma pertinente.
                switch (file.type.toLowerCase()) {

                    case "text/plain":
                    case "text/html":
                        // Cuando ha finalizado la lectura asíncrona del fichero, añadimos los elemntos al DOM
                        // con los atributos y el contenido del texto del fichero.
                        reader.onloadend = function (event) {
                            console.log(event.target.result);
                            fileAttributes.className = "fileAllowed";
                            let node = document.createElement("div"); 
                            node.innerHTML = reader.result;
                            fileAttributes.innerHTML = fileMmarkup;
                            element.appendChild(fileAttributes);
                            element.appendChild(node);
                        }
                        // Leemos el fichero como texto.
                        reader.readAsText(file);
                        break;

                    case "image/png":
                    case "image/jpeg":
                        // Cuando ha finalizado la lectura asíncrona del fichero, añadimos los elemntos al DOM
                        // con los atributos y el contenido codificado en base64 del fichero de imagen (se
                        // mostrará como una imagen incrustada).
                        reader.onloadend = function (event) {
                            console.log(event.target.result);
                            fileAttributes.className = "fileAllowed";
                            let node = document.createElement("img"); 
                            node.setAttribute(
                                'src', reader.result
                            );
                            fileAttributes.innerHTML = fileMmarkup;
                            element.appendChild(fileAttributes);
                            element.appendChild(node);
                        }
                        // Leemos el fichero binario y lo codificamos con su tipo y contenido en formato base64.
                        reader.readAsDataURL(file);     
                        break;

                    default:
                        // Mostramos atributos de ficheros no contemplados.
                        fileAttributes.className = "fileNotAllowed";
                        fileAttributes.innerHTML = fileMmarkup;
                        element.appendChild(fileAttributes);
                    
                }
            }
        }, false);

    </script>
 </body>

 </html>
	<html lang="es">

	<head>
	<title>✅ Drag & Drop Files 📌 </title>
	<meta charset="UTF-8"/>

	<style type="text/css">
	/* Importamos las fuentes "Work Sans" */
	@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');

	/* elemento que admintirá drop de ficheros. */
	#upload {
	font-family: "Work Sans", sans-serif;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 20px;
	margin: 20px;

	box-shadow:
	inset 0 -3em 4em rgba(0,136,135,0.1),
	0 0 0 2px rgb(0,136,135),
	0.3em 0.3em 1em rgba(0,0,0,0.3);
	}

	/* Para prevenir que no se dispare el evento "dragleave" al pasar sobre los elementos hijos. */
	#upload * {
	pointer-events: none;
	}

	/* Detalles de ficheros permitidos. */
	.fileAllowed {
	border-radius: 5px;
	border: 3px solid rgb(0,137,0);
	padding: 0px;
	padding-left: 20px;
	margin: 0px;
	margin-left: 0px;
	margin-top: 15px;
	margin-bottom: 5px;
	}

	/* Detalles de ficheros no permitidos. */
	.fileNotAllowed {
	border-radius: 5px;
	border: 3px solid rgb(137,0,0);
	padding: 0px;
	padding-left: 20px;
	margin: 0px;
	margin-left: 0px;
	margin-top: 15px;
	margin-bottom: 5px;
	}

	/* Colocamos logo a la izquierda del encabezado */
	#logo {
	float: left;
	margin-right: 15px;
	}
	</style>
	</head>

	<body>

	<div id='upload'>
	<img id="logo" src="data:image/png;base64,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">
	<h1>Drag & Drop file here.</h1>
	</div>

	<script type="text/javascript">
	// Seleccionamos por id del elemento que soportará el drop de ficheros.
	var element = document.querySelector('#upload');

	// Guardamos la configuración inicial del atributo CSS que modificaremos para indicar visualmente
	// que se permite realizar el drop de ficheros sobre el mismo. Y definimos el estilo CSS que aplicaremos.
	var originalBoxShadow = element.style.boxShadow;
	var enterBoxShadow = "inset 0 -3em 4em rgba(0,136,135,0.1), 0 0 0 2px rgb(0,255,0), 0.3em 0.3em 1em rgba(0,137,0,0.5)";

	// Al entrar en el elemento, aplicamos el estilo CSS para indicar que se puede realizar el drop de ficheros.
	element.addEventListener("dragenter", function (event) {
	event.preventDefault();
	event.target.style.boxShadow = enterBoxShadow;
	}, false);

	// Reestablecemos el estilo CSS original al salir del elemento que permite el drop de ficheros.
	element.addEventListener("dragleave", function (event) {
	event.preventDefault();
	event.target.style.boxShadow = originalBoxShadow;
	}, false);

	// Requerido para que el evento sólo sea procesado por nuestro elemento del DOM
	element.addEventListener("dragover", function (event) {
	event.preventDefault();
	}, false);

	// Procesamos el "drop" de los ficheros.
	element.addEventListener("drop", function (event) {
	// Guardamos la lista de ficheros arrastrados.
	var files = event.dataTransfer.files;

	// Reestablecemos estilos CSS originales, para indicar que el proceso ha concluido.
	event.preventDefault();
	event.target.style.boxShadow = originalBoxShadow;

	// Procesamos la lista de ficheros arrastrados. Como intervienen operaciones asíncronas, creamos
	// variables locales para cada iteración y evitar que una nueva iteración sobre la lista de ficheros,
	// modifique los valores anterirores que todavía puedan estar procesandose.
	for (var i = 0; i < files.length; i++) {
	console.log(files[i]);

	// Creamos el objeto lector de ficheros.
	let reader = new FileReader();

	// Guardamos los datos del fichero actual y realizamos el formateo que nos interesa.
	let file = files[i];
	let lastModifiedDate = new Date(file.lastModified);
	let fileSize = (file.size / 1024).toFixed(2).toLocaleString();

	// Creamos la división y el string de plantilla para mostrar los detalles del fichero.
	let fileAttributes = document.createElement('div');
	let fileMmarkup = `
	<h4>
	${file.name}
	</h4>
	<pre>
	<b>Type.............:</b> ${file.type}
	<b>Size.............:</b> ${fileSize} <b>KB.</b>
	<b>Last modification: </b>${lastModifiedDate.toLocaleTimeString()} ${lastModifiedDate.toLocaleDateString()}
	</pre>
	`;

	// Procesamos cada tipo de fichero de forma pertinente.
	switch (file.type.toLowerCase()) {

	case "text/plain":
	case "text/html":
	// Cuando ha finalizado la lectura asíncrona del fichero, añadimos los elemntos al DOM
	// con los atributos y el contenido del texto del fichero.
	reader.onloadend = function (event) {
	console.log(event.target.result);
	fileAttributes.className = "fileAllowed";
	let node = document.createElement("div");
	node.innerHTML = reader.result;
	fileAttributes.innerHTML = fileMmarkup;
	element.appendChild(fileAttributes);
	element.appendChild(node);
	}
	// Leemos el fichero como texto.
	reader.readAsText(file);
	break;

	case "image/png":
	case "image/jpeg":
	// Cuando ha finalizado la lectura asíncrona del fichero, añadimos los elemntos al DOM
	// con los atributos y el contenido codificado en base64 del fichero de imagen (se
	// mostrará como una imagen incrustada).
	reader.onloadend = function (event) {
	console.log(event.target.result);
	fileAttributes.className = "fileAllowed";
	let node = document.createElement("img");
	node.setAttribute(
	'src', reader.result
	);
	fileAttributes.innerHTML = fileMmarkup;
	element.appendChild(fileAttributes);
	element.appendChild(node);
	}
	// Leemos el fichero binario y lo codificamos con su tipo y contenido en formato base64.
	reader.readAsDataURL(file);
	break;

	default:
	// Mostramos atributos de ficheros no contemplados.
	fileAttributes.className = "fileNotAllowed";
	fileAttributes.innerHTML = fileMmarkup;
	element.appendChild(fileAttributes);

	}
	}
	}, false);

	</script>
	</body>

	</html>