HTML5 / Javascript File API - Attempting to find MD5 of the file
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.
Re: HTML5 / Javascript File API - Attempting to find MD5 of the file
PHP's md5() calculates the hash of a string, not a file. You want md5_file().
Re: HTML5 / Javascript File API - Attempting to find MD5 of the file
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?
Re: HTML5 / Javascript File API - Attempting to find MD5 of the file
I tried his example page. That doesn't give the same either.
Re: HTML5 / Javascript File API - Attempting to find MD5 of the file
Did you ever figure it out? (nice to let people know if you do)
Check out: http://phpjs.org/functions/md5:469
Re: HTML5 / Javascript File API - Attempting to find MD5 of the file
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.
