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.

**PeejAvery** · April 15th, 2011, 10:23 AM

PHP's md5() calculates the hash of a string, not a file. You want md5_file().

**goatslayer** · April 15th, 2011, 11:24 AM

Hi Peej,

I might have been doing it a slightly odd way but reading the file using file_get_contents() I get identical results.

Code:

$file = file_get_contents('test.gif');
echo '<br/><br/><b>PHP MD5 file hash of file: </b>' . md5($file);

Is equivalent to:

Code:

echo '<br/><br/><b>PHP MD5 file hash of file: </b>' . md5_file('test.gif');

Thanks for the information though, I can use md5_file() in future.

Any ideas on where I'm going wrong on the client side?

**PeejAvery** · April 15th, 2011, 03:19 PM

I tried his example page. That doesn't give the same either.

**BeeDee** · July 9th, 2011, 06:32 AM

Did you ever figure it out? (nice to let people know if you do)

Check out: http://phpjs.org/functions/md5:469

**goatslayer** · July 11th, 2011, 04:55 AM

I'm afraid not yet. I'll have to revisit it but if anyone has suggestions I'd be glad to hear them.

Thanks for the link to the MD5 library. I think the library is working as expected the problem is how I'm choosing to read the file.

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

Thread Tools

Display

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

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

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

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

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

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

Posting Permissions