Asynchronous file transfer using the FileAPI and XHR interfaces

fielapi-xhr

window.addEventListener
(
	'load', function()
	{
		var fileInput = document.getElementById('file-input');

		fileInput.addEventListener
		(
			'change', function(ev)
			{
				console.log('%a- files: %a', ev, this.files);

				if (!this.files.length)
				{
					return;
				}

				readAndUpload(this.files[0]);
			},

			false
		);


		var trigger = document.getElementById('input');

		trigger.addEventListener
		(
			'dragenter', function(ev)
			{
				ev.stopPropagation();
				ev.preventDefault();
			},

			false
		);

		trigger.addEventListener
		(
			'dragover', function(ev)
			{
				ev.stopPropagation();
				ev.preventDefault();
			},

			false
		);

		trigger.addEventListener
		(
			'drop', function (ev)
			{
				var files = ev.dataTransfer.files;

				ev.stopPropagation();
				ev.preventDefault();

				console.log('%a- dropped files: %a', ev, files);

				if (!files.length)
				{
					return;
				}

				// pour cette démo, nous ne traitons que le premier fichier de la liste.

				readAndUpload(files[0]);
			},

			false
		);

		function readAndUpload(file)
		{
			var reader = new FileReader();

			console.log('starting loading file: %s', file.name);

			reader.addEventListener
			(
				'loadend', function(ev)
				{
					console.log('%a- loading complete for file "%s", uploading now', ev, file.name);

					upload(file, ev.target.result);
				},

				false
			);

			reader.readAsBinaryString(file);
		}

		function upload(file, data)
		{
			var xhr = new XMLHttpRequest();
			var	fileUpload = xhr.upload;

			xhr.addEventListener
			(
				'readystatechange', function(ev)
				{
					if (this.readyState == 4 && this.status == 200)
					{
						console.log('%a- transfer complete with the following response: %a', ev, JSON.parse(this.responseText));
					}
					else
					{
						console.log('%a- readyState: %d, status: %d', ev, this.readyState, this.status);
					}
				},

				false
			);

			fileUpload.addEventListener
			(
				'progress', function(ev)
				{
					if (!ev.lengthComputable)
					{
						return;
					}

					console.log('%a- loaded: %d, total: %d (%s%)', ev, ev.loaded, ev.total, (ev.loaded / ev.total * 100).toFixed(2));
				},

				false
			);

			fileUpload.addEventListener
			(
				'load', function(ev)
				{
					console.log('%a- upload complete for file "%s"', ev, file.name);
				},

				false
			);

			fileUpload.addEventListener
			(
				'error', function(ev)
				{
					console.log('%a- transfert error !', ev);
				},

				false
			);

			var inputName = 'Filedata';
			var boundary = '--------------------------------';

			for (var i = 0 ; i < 32 ; i++)
			{
				boundary += Math.round(Math.random() * 9);
			}

			var body = "--" + boundary + "\r\n";

			body += 'Content-Disposition: form-data; name="' + inputName + '"; filename=' + encodeURIComponent(file.name) + '\r\n';
			body += 'Content-Type: ' + (file.type ? file.type : 'application/octet-stream') + '\r\n\r\n';

			console.log('%s', body);

			body += data + '\r\n';
			body += '--' + boundary + '--';

			xhr.open("POST", handler_url);

			xhr.setRequestHeader('Accept', 'applocation/json');
			xhr.setRequestHeader('Content-Type', 'multipart/form-data, boundary=' + boundary); // simulate a file MIME POST request.
			xhr.setRequestHeader('Content-Length', body.length);

			xhr.sendAsBinary(body);
		}
	},

	false
);