zoharbabin/kaltura-simple-js-image-upload.html

## kaltura-simple-js-image-upload.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
	<input type="file" id="uploadfiles" accept="*.*" multiple />
	<progress id="uploadprogress" style="display: none;" value="0" max="100"></progress>
	<script>
		var yourUploadKalturaSession = 'This should be generated by your backend';
		var multiRequestUrl = 'https://upload.kaltura.com/api_v3/service/multirequest/format/1/ks/' + yourUploadKalturaSession + '/';

		var uploadfiles = document.querySelector('#uploadfiles');
		var uploadprogress = document.querySelector('#uploadprogress');

		uploadfiles.addEventListener('change', function () {
			var files = this.files;
			for(var i=0; i<files.length; i++){
				var file = files[i];
				console.log("name : " + file.name);
				console.log("size : " + file.size);
				console.log("type : " + file.type);
				console.log("date : " + file.lastModified);
				uploadFile(file);
			}
		}, false);

		function uploadFile(file) {
			uploadprogress.style.display = 'block';
			var url = multiRequestUrl;
			var xhr = new XMLHttpRequest();
			var fd = new FormData();
			xhr.open("POST", url, true);
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var uploadAPIresponse = JSON.parse(xhr.responseText);
					console.log('file was uploaded', uploadAPIresponse);
					console.log('uploaded Entry ID: ', uploadAPIresponse[0].id);
				}
			};
			xhr.upload.addEventListener("progress", function(evt){
				if (evt.lengthComputable) {
					console.log("upload status: " + evt.loaded + "/" + evt.total);
					uploadprogress.value = evt.loaded / evt.total * 100;
				}
			}, false);

			// data.add
			fd.append('1:service', 'media');
			fd.append('1:action', 'add');
			fd.append('1:entry[objectType]', 'KalturaMediaEntry');
			fd.append('1:entry[name]', file.name);
			//2 == IMAGE, see: https://developer.kaltura.com/api-docs/General_Objects/Enums/KalturaMediaType
			fd.append('1:entry[mediaType]', 2);

			// uploadToken.add
			fd.append('2:service', 'uploadtoken');
			fd.append('2:action', 'add');
			fd.append('2:uploadToken[objectType]', 'KalturaUploadToken');

			// uploadToken.upload
			fd.append('3:service', 'uploadtoken');
			fd.append('3:action', 'upload');
			fd.append('3:resume', false);
			fd.append('3:finalChunk', true);
			fd.append('3:resumeAt', -1);
			fd.append('3:uploadTokenId', '{2:result:id}');
			fd.append('3:fileData', file); //the actual binary image

			// data.addContent
			fd.append('4:service', 'media');
			fd.append('4:action', 'updateContent');
			fd.append('4:entryId', '{1:result:id}'); // the id of the thumbAsset
			fd.append('4:resource[objectType]', 'KalturaUploadedFileTokenResource');
			fd.append('4:resource[token]', '{3:result:id}'); // the id of the upload token

			xhr.send(fd);
		}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	</head>
	<body>
	<input type="file" id="uploadfiles" accept="." multiple />
	<progress id="uploadprogress" style="display: none;" value="0" max="100"></progress>
	<script>
	var yourUploadKalturaSession = 'This should be generated by your backend';
	var multiRequestUrl = 'https://upload.kaltura.com/api_v3/service/multirequest/format/1/ks/' + yourUploadKalturaSession + '/';

	var uploadfiles = document.querySelector('#uploadfiles');
	var uploadprogress = document.querySelector('#uploadprogress');

	uploadfiles.addEventListener('change', function () {
	var files = this.files;
	for(var i=0; i<files.length; i++){
	var file = files[i];
	console.log("name : " + file.name);
	console.log("size : " + file.size);
	console.log("type : " + file.type);
	console.log("date : " + file.lastModified);
	uploadFile(file);
	}
	}, false);

	function uploadFile(file) {
	uploadprogress.style.display = 'block';
	var url = multiRequestUrl;
	var xhr = new XMLHttpRequest();
	var fd = new FormData();
	xhr.open("POST", url, true);
	xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
	var uploadAPIresponse = JSON.parse(xhr.responseText);
	console.log('file was uploaded', uploadAPIresponse);
	console.log('uploaded Entry ID: ', uploadAPIresponse[0].id);
	}
	};
	xhr.upload.addEventListener("progress", function(evt){
	if (evt.lengthComputable) {
	console.log("upload status: " + evt.loaded + "/" + evt.total);
	uploadprogress.value = evt.loaded / evt.total * 100;
	}
	}, false);

	// data.add
	fd.append('1:service', 'media');
	fd.append('1:action', 'add');
	fd.append('1:entry[objectType]', 'KalturaMediaEntry');
	fd.append('1:entry[name]', file.name);
	//2 == IMAGE, see: https://developer.kaltura.com/api-docs/General_Objects/Enums/KalturaMediaType
	fd.append('1:entry[mediaType]', 2);

	// uploadToken.add
	fd.append('2:service', 'uploadtoken');
	fd.append('2:action', 'add');
	fd.append('2:uploadToken[objectType]', 'KalturaUploadToken');

	// uploadToken.upload
	fd.append('3:service', 'uploadtoken');
	fd.append('3:action', 'upload');
	fd.append('3:resume', false);
	fd.append('3:finalChunk', true);
	fd.append('3:resumeAt', -1);
	fd.append('3:uploadTokenId', '{2:result:id}');
	fd.append('3:fileData', file); //the actual binary image

	// data.addContent
	fd.append('4:service', 'media');
	fd.append('4:action', 'updateContent');
	fd.append('4:entryId', '{1:result:id}'); // the id of the thumbAsset
	fd.append('4:resource[objectType]', 'KalturaUploadedFileTokenResource');
	fd.append('4:resource[token]', '{3:result:id}'); // the id of the upload token

	xhr.send(fd);
	}
	</script>
	</body>
	</html>