Let's begin with the HTML of the app. Put this code in the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 text-xs-center">
<br>
<h3>Upload any file</h3>
<br>
<div>
<div class="form-group">
<label class="custom-file text-xs-left">
<input type="file" id="file" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
</div>
<div class="form-group">
<label for="owner">Enter owner name</label>
<input type="text" class="form-control" id="owner">
</div>
<button onclick="submit()" class="btn btn-primary">Submit</button>
<button onclick="getInfo()" class="btn btn-primary">Get Info</button>
<br><br>
<div class="alert alert-info" role="alert" id="message">
You can either submit file's details or get information about it.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 text-xs-center">
<br>
<h3>Live Transactions Mined</h3>
<br>
<ol id="events_list">No Transaction Found</ol>
</div>
</div>
</div>
<script type="text/javascript" src="/js/sha1.min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/socket.io.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
Here is how the code works:
- At first, we display Bootstrap's file input field so that the user can select a file.
- Then, we display a text field where the user can enter the owner's details.
- Then, we have two buttons. The first one is to store the file hash and the owner's details in the contract, and the second button is to get information on the file from the contract. Clicking on the Submit button triggers the submit() method, whereas clicking on the Get Info button triggers the getInfo() method.
- Then, we have an alert box to display messages.
- Finally, we display an ordered list to display the transactions of the contract that gets mined while the user is on the page.
Now let's write the implementation for the getInfo() and submit() methods, establish a socket.io connect with the server, and listen for socket.io messages from the server. Here is the code to this. Place this code in the main.js file:
function submit()
{
var file = document.getElementById("file").files[0];
if(file)
{
var owner = document.getElementById("owner").value;
if(owner == "")
{
alert("Please enter owner name");
}
else
{
var reader = new FileReader();
reader.onload = function (event) {
var hash = sha1(event.target.result);
$.get("/submit?hash=" + hash + "&owner=" + owner, function(data){
if(data == "Error")
{
$("#message").text("An error occured.");
}
else
{
$("#message").html("Transaction hash: " + data);
}
});
};
reader.readAsArrayBuffer(file);
}
}
else
{
alert("Please select a file");
}
}
function getInfo()
{
var file = document.getElementById("file").files[0];
if(file)
{
var reader = new FileReader();
reader.onload = function (event) {
var hash = sha1(event.target.result);
$.get("/getInfo?hash=" + hash, function(data){
if(data[0] == 0 && data[1] == "")
{
$("#message").html("File not found");
}
else
{
$("#message").html("Timestamp: " + data[0] + " Owner: " + data[1]);
}
});
};
reader.readAsArrayBuffer(file);
}
else
{
alert("Please select a file");
}
}
var socket = io("http://localhost:8080");
socket.on("connect", function () {
socket.on("message", function (msg) {
if($("#events_list").text() == "No Transaction Found")
{
$("#events_list").html("<li>Txn Hash: " + msg.transactionHash + "nOwner: " + msg.args.owner + "nFile Hash: " + msg.args.fileHash + "</li>");
}
else
{
$("#events_list").prepend("<li>Txn Hash: " + msg.transactionHash + "nOwner: " + msg.args.owner + "nFile Hash: " + msg.args.fileHash + "</li>");
}
});
});
This is how the preceding code works:
- At first, we defined the submit() method. In the submit method, we make sure that a file is selected and the text field is not empty. Then, we read the content of the file as an array buffer and pass the array buffer to the sha1() method exposed by sha1.js to get the hash of content inside the array buffer. Once we have the hash, we use jQuery to make an AJAX request to the /submit route and then we display the transaction hash in the alert box.
- We define the getInfo() method next. It first makes sure that a file is selected. Then, it generates the hash like the one it generated earlier and makes a request to the /getInfo endpoint to get information about that file.
- Finally, we establish a socket.io connection using the io() method exposed by the socket.io library. Then, we wait for the connect event to the trigger, which indicates that a connection has been established. After the connection is established, we listen for messages from the server and display the details about the transactions to the user.
We aren't storing the file in the Ethereum blockchain because storing files is very expensive as it requires a lot of gas. For our case, we actually don't need to store files because nodes in the network will be able to see the file; therefore, if the users want to keep the file content secret, then they won't be able to. Our application's purpose is just to prove ownership of a file, not to store and serve the file like a cloud service.