Cacher is the code snippet organizer for pro developers

function showFiles() {
	var files = document.getElementById("upload").files;
	console.log("Number Of Files "+files.length);
	for(var i=0; i<files.length; i++) {
		var file=files[i];
		console.log("Name: "+file.name+",Size: "+file.size+",Type: "+file.type);
	}
	showThumbnails();
	handleFile(files);
}

function showThumbnails(){
	var files = document.getElementById("upload").files;

	for(var i=0; i<files.length; i++){
		var file = files[i];
		var image = document.createElement("img");
		document.getElementById("previewPane").appendChild(image);
		var fileReader= new FileReader();
		fileReader.onload = (function(img) {
			return function(e) {
				img.src = e.target.result;
			};
		})(image);
		fileReader.readAsDataURL(file);
	}
}

function handleFile(files){
	var fileReader = new FileReader();
	var file = files[0];
	var imageElem = document.createElement("img");

	fileReader.onload = (function(img) { return function(e) { img.src = e.target.result; }; })(imageElem);
	fileReader.readAsDataURL(file);

	document.getElementById("images").appendChild(imageElem);

	uploadFile(file);
}

function uploadFile(file) {
	var xhr = new XMLHttpRequest();
	var formData = new FormData();

	formData.append('file',file);

	xhr.upload.addEventListener('progress', function(e) {
		console.log(e);
		if (e.lengthComputable) {
			var percentage = Math.round((e.loaded * 100) / e.total);

			$('#percentage').append(percentage+'%');
		}
	}, false);



	xhr.upload.addEventListener('loadstart', function(e) {
		$('#percentage').show();
		$('#percentage').append('Start');
	}, false);



	xhr.upload.addEventListener('load', function(e) {
		console.log(e);
		$('#percentage').append('100% Done');
		delete(xhr);
	}, false);
	
  xhr.onload = function(event) {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      console.log(response);
    }
  };

	xhr.open("POST", '/upload/');
	xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
	xhr.send(formData);
}