malisetti/grid.html

## grid.html
<!DOCTYPE html>
<html>

<head>
    <title>Image Grid</title>
    <style>
        body {
            font-family: 'Segoe UI';
            font-size: 12pt;
        }

        article {
            width: 100%;
            margin: auto;
        }

        .thumbnail {
            height: 140px;
            margin: 10px;
            float: left;
        }
    </style>
    <script>
        window.onload = function () {
            //Check File API support
            if (window.File && window.FileList && window.FileReader) {
                const filesInput = document.getElementById("files");

                filesInput.addEventListener("change", function (event) {

                    const files = event.target.files; //FileList object
                    const output = document.getElementById("result");

                    for (let i = 0; i < files.length; i++) {
                        const file = files[i];
                        //Only pics
                        if (!file.type.match('image')) {
                            continue;
                        }

                        const picReader = new FileReader();
                        picReader.fileName = file.name;

                        picReader.addEventListener("load", function (event) {
                            const picFile = event.target;
                            const div = document.createElement("div");

//                             const thumbnail = `<figure>
//   <img src="${picFile.result}" title="${picFile.fileName}" alt="${picFile.fileName}" class="thumbnail">
//   <figcaption>${picFile.fileName}</figcaption>
// </figure>`;
                            div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                                "title='" + picFile.fileName + "'/>";
                            output.insertBefore(div, null);
                        });

                        //Read the image
                        picReader.readAsDataURL(file);
                    }
                });
            } else {
                alert("Your browser does not support File API");
            }
        }
    </script>
</head>

<body>
    <article>
        <label for="files">Select files: </label>
        <input id="files" type="file" multiple />
        <output id="result" />
    </article>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Image Grid</title>
	<style>
	body {
	font-family: 'Segoe UI';
	font-size: 12pt;
	}

	article {
	width: 100%;
	margin: auto;
	}

	.thumbnail {
	height: 140px;
	margin: 10px;
	float: left;
	}
	</style>
	<script>
	window.onload = function () {
	//Check File API support
	if (window.File && window.FileList && window.FileReader) {
	const filesInput = document.getElementById("files");

	filesInput.addEventListener("change", function (event) {

	const files = event.target.files; //FileList object
	const output = document.getElementById("result");

	for (let i = 0; i < files.length; i++) {
	const file = files[i];
	//Only pics
	if (!file.type.match('image')) {
	continue;
	}

	const picReader = new FileReader();
	picReader.fileName = file.name;

	picReader.addEventListener("load", function (event) {
	const picFile = event.target;
	const div = document.createElement("div");

	// const thumbnail = `<figure>
	// <img src="${picFile.result}" title="${picFile.fileName}" alt="${picFile.fileName}" class="thumbnail">
	// <figcaption>${picFile.fileName}</figcaption>
	// </figure>`;
	div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
	"title='" + picFile.fileName + "'/>";
	output.insertBefore(div, null);
	});

	//Read the image
	picReader.readAsDataURL(file);
	}
	});
	} else {
	alert("Your browser does not support File API");
	}
	}
	</script>
	</head>

	<body>
	<article>
	<label for="files">Select files: </label>
	<input id="files" type="file" multiple />
	<output id="result" />
	</article>
	</body>

	</html>