0

I am a beginner in HTML and JavaScript. I want to upload an image using HTML5 and get its hash by JavaScript. After that, I want to send the hash value to a PHO server. I uploaded an image with a web browser. But i don't know how i can hash the image. I saw many guides but no one helped me. My HTML code is below. Please fill it and help me.

HTML:

<!DOCTYPE html>
<html>
<body>
<input type="file" id="customerFile" name="Documents"/>
<script>
     // Get hash value
     // Send it to the server
</script>
</body>
</html>

I should hash it in html level. I shouldn't give the server any file

Pramodya Mendis
  • 686
  • 8
  • 24
Alireza
  • 227
  • 1
  • 11

1 Answers1

1

Please check the below snippet. You can send hash value to the server by sending a POST request with result.

function calculateMD5Hash(file, bufferSize) {
        let def = Q.defer();

        let fileReader = new FileReader();
        let fileSlicer = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
        let hashAlgorithm = new SparkMD5();
        let totalParts = Math.ceil(file.size / bufferSize);
        let currentPart = 0;
        let startTime = new Date().getTime();

        fileReader.onload = function (e) {
            currentPart += 1;

            def.notify({
                currentPart: currentPart,
                totalParts: totalParts
            });

            let buffer = e.target.result;
            hashAlgorithm.appendBinary(buffer);

            if (currentPart < totalParts) {
                processNextPart();
                return;
            }

            def.resolve({
                hashResult: hashAlgorithm.end(),
                duration: new Date().getTime() - startTime
            });
        };

        fileReader.onerror = function (e) {
            def.reject(e);
        };

        function processNextPart() {
            let start = currentPart * bufferSize;
            let end = Math.min(start + bufferSize, file.size);
            fileReader.readAsBinaryString(fileSlicer.call(file, start, end));
        }

        processNextPart();
        return def.promise;
    }

    function calculate() {

        let input = document.getElementById('file');
        if (!input.files.length) {
            return;
        }

        let file = input.files[0];
        let bufferSize = Math.pow(1024, 2) * 10; // 10MB

        calculateMD5Hash(file, bufferSize).then(
            function (result) {
                // Success
                console.log(result);
                // SEND result TO THE SERVER
            },
            function (err) {
                // There was an error,
            });
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.4.1/q.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/2.0.2/spark-md5.min.js"></script>

<div>
    <input type="file" id="file"/>
    <input type="button" onclick="calculate();" value="Calculate Hash" class="btn primary"/>
</div>
</body>
</html>
Pramodya Mendis
  • 686
  • 8
  • 24