HTML5 / Javascript File API - Attempting to find MD5 of the file

**goatslayer** · April 15th, 2011, 05:04 AM

Hi,

I'm attempting to get a MD5 hash of a file by reading it in through the HTML 5.0 File API. I'm doing something wrong as I can read the file in and get a hash but it isn't the same as the hash i'd get from PHP MD5() function, and another program I have to compute hashes on files.

Here is the code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>MD5 Test</title>
</head>

<body id="index" class="home">

	<h1>MD5 Test</h1>

	<input type="file" id="files" name="files[]" multiple />
	<output id="list"></output>

	<!--from http://pajhome.org.uk/crypt/md5/ -->
	<script type="text/javascript" src="md5-min.js"></script>
	<script>
	
		function handleFileSelect(evt) 
		{
			var files = evt.target.files; // FileList object

			// Loop through the FileList and render image files as thumbnails.
			for (var i = 0, f; f = files[i]; i++) 
			{
				var reader = new FileReader();

				// Closure to capture the file information.
				reader.onload = (function(theFile) 
				{
					return function(e) 
					{
						var span = document.createElement('span');
						var test = e.target.result;
						var hash = hex_md5(test);
						span.innerHTML = ['<br/><br/><b>Client side hashing function: </b>', hash].join('');
						document.getElementById('list').insertBefore(span, null);
					};
					
				})(f);

				// Read in the image file as a data URL.
				reader.readAsBinaryString(f);
				
				// Are these more appropriate file reading mechanisms?
				//reader.readAsDataURL(f);
				//reader.readAsArrayBuffer(f);
				//reader.readAsText(f);
			}
		}

		document.getElementById('files').addEventListener('change', handleFileSelect, false);
	  
	</script>

</body>

I think I understand why readAsBinaryString() is incorrect, and think readAsArrayBuffer() might be what I'm looking for (?) but couldn't figure out how to access the data in the ArrayBuffer. Perhaps someone could help me understand the data structure I have after calling one of these read mechanisms.

Any help appreciated.

Thread: HTML5 / Javascript File API - Attempting to find MD5 of the file

Thread Tools

Display

Threaded View

HTML5 / Javascript File API - Attempting to find MD5 of the file

Posting Permissions