It's a photo-tagging platform, I want the user to be able to insert the photos into the gallery and then let him select which ones he wants to catalog.
This gallery.js is creating a gallery of thumbnails based on the photos you've uploaded
(function(){
"use strict";
function previewImage(file) {
var galleryId = "gallery";
var gallery = document.getElementById(galleryId);
var imageType = /image.*/;
if (!file.type.match(imageType)) {
throw "File Type must be an image";
}
var thumb = document.createElement("div");
thumb.classList.add('thumbnail');
var img = document.createElement("img");
img.file = file;
thumb.appendChild(img);
gallery.appendChild(thumb);
// Using FileReader to display the image content
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src =
e.target.result; }; })(img);
reader.readAsDataURL(file);
}
var uploadfiles = document.querySelector('#fileinput');
uploadfiles.addEventListener('change', function () {
var files = this.files;
for(var i=0; i<files.length; i++){
previewImage(this.files[i]);
}
}, false);
})();
In this html is where the gallery is being created
<!doctype html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Preview images</title>
<style>
html {
font-family: sans-serif;
}
#gallery .thumbnail{
width: 70px;
height: 70px;
float:left;
margin: 20px;
}
#gallery .thumbnail img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Upload images ...</h2>
<input type="file" id="fileinput" multiple accept="image/*" />
<div id="gallery"></div>
<script src="../JS/gallery.js"></script>
</body>
</html>