macu/blob-load-demo.html

## blob-load-demo.html
<!doctype html>
<html>
<body>

<style>
.drop-area {
	display: inline-block;
	padding: 1em;
	border: thin dotted grey;
	border-radius: 1em;
	color: grey;
}
</style>

<input type="file" multiple />
<br/>
<br/>
<div class="drop-area">Drop files here</div>
<br/>
<br/>
<output>No files selected.</output>

<script>
var inputElement = document.getElementsByTagName('input')[0];
var dropAreaElement = document.getElementsByClassName('drop-area')[0];
var outputElement = document.getElementsByTagName('output')[0];

// Wait for user to select file(s) via <input>
inputElement.addEventListener('change', function(evt) {
	// evt.target.files is a FileList object,
	// which is an array of File objects
	handleFiles(evt.target.files);
});

// Wait for user to select file(s) via drag-and-drop on <div>
dropAreaElement.addEventListener('dragover', function(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	// Display as copy operation
	evt.dataTransfer.dropEffect = 'copy';
});
dropAreaElement.addEventListener('drop', function(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	// evt.dataTransfer.files is a FileList object
	handleFiles(evt.dataTransfer.files);
});

function handleFiles(fileList) {
	if (fileList.length == 1) {
		// Load single file contents
		renderSingleFile(fileList[0], outputElement);
	} else {
		// Show info on selected files
		renderFileList(fileList, outputElement);
	}
}
</script>

<script>
function renderSingleFile(file, outputElement) {
	// Available read methods:
	// https://developer.mozilla.org/en/docs/Web/API/FileReader
	var reader = new FileReader();
	reader.onload = function() {
		var fileContents = reader.result;
		outputElement.innerHTML = '<strong>Read ' + file.size + ' bytes from '
			+ escape(file.name) + '</strong><br/>' + escape(fileContents);
	};
	reader.onerror = function(err) {
		outputElement.innerHTML = escape(err);
	};
	reader.readAsText(file);
}

function renderFileList(fileList, outputElement) {
	var output = [];
	for (var i = 0, f; f = fileList[i]; i++) {
		// Available properties on File objects (File inherits from Blob):
		// https://developer.mozilla.org/en/docs/Web/API/File
		// https://developer.mozilla.org/en-US/docs/Web/API/Blob
		output.push('<li>');
		output.push('<strong>name:</strong> ' + escape(f.name));
		output.push('<ul>')
		output.push('<li><strong>size:</strong> ' + f.size + '</li>');
		output.push('<li><strong>type:</strong> ' + (f.type ? f.type : 'n/a') + '</li>');
		var lastMod = f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a';
		output.push('<li><strong>last modified:</strong> ' + lastMod + '</li>');
		output.push('</ul>')
		output.push('</li>');
	}
	outputElement.innerHTML = '<ul>' + output.join('') + '</ul>';
}
</script>

</body>
</html>
	<!doctype html>
	<html>
	<body>

	<style>
	.drop-area {
	display: inline-block;
	padding: 1em;
	border: thin dotted grey;
	border-radius: 1em;
	color: grey;
	}
	</style>

	<input type="file" multiple />
	<br/>
	<br/>
	<div class="drop-area">Drop files here</div>
	<br/>
	<br/>
	<output>No files selected.</output>

	<script>
	var inputElement = document.getElementsByTagName('input')[0];
	var dropAreaElement = document.getElementsByClassName('drop-area')[0];
	var outputElement = document.getElementsByTagName('output')[0];

	// Wait for user to select file(s) via <input>
	inputElement.addEventListener('change', function(evt) {
	// evt.target.files is a FileList object,
	// which is an array of File objects
	handleFiles(evt.target.files);
	});

	// Wait for user to select file(s) via drag-and-drop on <div>
	dropAreaElement.addEventListener('dragover', function(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	// Display as copy operation
	evt.dataTransfer.dropEffect = 'copy';
	});
	dropAreaElement.addEventListener('drop', function(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	// evt.dataTransfer.files is a FileList object
	handleFiles(evt.dataTransfer.files);
	});

	function handleFiles(fileList) {
	if (fileList.length == 1) {
	// Load single file contents
	renderSingleFile(fileList[0], outputElement);
	} else {
	// Show info on selected files
	renderFileList(fileList, outputElement);
	}
	}
	</script>

	<script>
	function renderSingleFile(file, outputElement) {
	// Available read methods:
	// https://developer.mozilla.org/en/docs/Web/API/FileReader
	var reader = new FileReader();
	reader.onload = function() {
	var fileContents = reader.result;
	outputElement.innerHTML = '<strong>Read ' + file.size + ' bytes from '
	+ escape(file.name) + '</strong><br/>' + escape(fileContents);
	};
	reader.onerror = function(err) {
	outputElement.innerHTML = escape(err);
	};
	reader.readAsText(file);
	}

	function renderFileList(fileList, outputElement) {
	var output = [];
	for (var i = 0, f; f = fileList[i]; i++) {
	// Available properties on File objects (File inherits from Blob):
	// https://developer.mozilla.org/en/docs/Web/API/File
	// https://developer.mozilla.org/en-US/docs/Web/API/Blob
	output.push('<li>');
	output.push('<strong>name:</strong> ' + escape(f.name));
	output.push('<ul>')
	output.push('<li><strong>size:</strong> ' + f.size + '</li>');
	output.push('<li><strong>type:</strong> ' + (f.type ? f.type : 'n/a') + '</li>');
	var lastMod = f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a';
	output.push('<li><strong>last modified:</strong> ' + lastMod + '</li>');
	output.push('</ul>')
	output.push('</li>');
	}
	outputElement.innerHTML = '<ul>' + output.join('') + '</ul>';
	}
	</script>

	</body>
	</html>