1

I am attempting to create an app where I upload a file to a website and then I submit a hash of that file onto Ethereum. I am unsure whether I am hashing the actual file below or just the reference to the file.

Any suggestions for the script below?

const input = document.querySelector('input');

input.addEventListener('input', e => {
    e.preventDefault();

    const hash = web3.sha3(e.target.value);

});

Any help would be greatly appreciated.

4

If I understand correctly your want to upload a file from the client machine to the web application using the standard HTML tag <input type="file"> and then hash the content of the file.

Your code is actually hashing the full path of the file.

If you want to read the content of a file, I recommend to use FileReader like this:

HTML:

<div>
  <label for="input-file">Specify a file:</label><br>
    <input type="file" id="input-file">
</div>

<div>
  Content: <textarea id="content-target"></textarea>
</div>

<div>
  Content Hash: <textarea id="hash-target"></textarea>
</div>

JavaScript:

document.getElementById('input-file').addEventListener('change', event => {
    const input = event.target
    if ('files' in input && input.files.length > 0) {

        read(input.files[0]).then(content => {
            document.getElementById('content-target').value = content;
            document.getElementById('hash-target').value = web3.sha3(content, { encoding: 'hex' }); // << Specify you are hashing Base16 (hexadecimal)
        });

    }
})

function read(file) {
    const reader = new FileReader();

    return new Promise((resolve, reject) => {
        reader.onload = event => {
            // Convert Array Buffer to Base16
            var u = new Uint8Array(event.target.result),
            a = new Array(u.length),
            i = u.length;
            while (i--) // map to hex
                a[i] = (u[i] < 16 ? '0' : '') + u[i].toString(16);
            u = null; // free memory
            resolve(a.join("")); 
        }
        reader.onerror = error => reject(error)
        reader.readAsArrayBuffer(file)
    });
}

Result: enter image description here

You can also see and run the code on JSFiddle

  • Thank you that was very thorough. – Julian Martinez Jun 24 at 5:12
  • Question, when I hash an image using the code you provided above, the hash is different than when I hashed it using this website. Do you know why this is? – Julian Martinez Jun 24 at 13:30
  • Hey,, I just updated the answer to work with binary files (image for example). Basically whatever the content uploaded to the browser, I convert it to Base 16 and specify web3.sha3 that the content is Base 16 – Greg Jeanmart Jun 24 at 14:17
  • Try the the new JSFiddle – Greg Jeanmart Jun 24 at 14:21
  • Thanks for the new code! One more question. I created a text file with only the following text "hey nadir". when I hash web3.sha3("hey nadir") in my console, I get the following value: 0x52664ba0d7d4be6e1bd36db7b79bb2aff01c58013965771bcd238acdb02b368c When I upload upload the text file into the app with your new code, I get the following value: 0x8efc689147bd83633b6603cc8462b4c26eaf4c88c841725b190b758320982a98 . Why is that? – Julian Martinez Jun 27 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.