File upload

Browse and upload multiple files in one go by holding down Ctrl (Windows, Linux) or Command (Mac) when clicking on them in the file dialog. Information about the uploaded files will be listed below. NOTE: Safari seems to fail to read out any information about the actual files.

Choose file(s)

or drag and drop files here

Uploaded files

  • (no files uploaded yet)

Code used in this page

(function () {
	var filesUpload = document.getElementById("files-upload"),
		dropArea = document.getElementById("drop-area"),
		fileList = document.getElementById("file-list");
	
	function traverseFiles (files) {
		var li,
			file,
			fileInfo;
		fileList.innerHTML = "";
			
		for (var i=0, il=files.length; i<il; i++) {
			li = document.createElement("li");
			file = files[i];
			fileInfo = "
Name: " + file.name + "
"; fileInfo += "
Size: " + file.size + " bytes
"; fileInfo += "
Type: " + file.type + "
"; li.innerHTML = fileInfo; fileList.appendChild(li); }; }; filesUpload.onchange = function () { traverseFiles(this.files); }; dropArea.ondragenter = function () { return false; }; dropArea.ondragover = function () { return false; }; dropArea.ondrop = function (evt) { traverseFiles(evt.dataTransfer.files); return false; }; })();