<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/ipfs-http-client/dist/index.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center>
<h2>Upload to IPFS</h2>
<input id="fileUpload" type="file" class="btn btn-primary">Select File</input>
<br /><br />
<div id="ipfs_hash"></div>
</center>
</div>
</body>
</html>
const ipfs = window.IpfsHttpClient({ host: 'ipfs.infura.io', port: 5001 })
document.querySelector('#fileUpload').addEventListener('change', function() {
document.getElementById("ipfs_hash").innerHTML = "<b>Uploading...Please wait</b>"
var reader = new FileReader();
reader.onload = function() {
var arrayBuffer = this.result,
array = new Uint8Array(arrayBuffer),
binaryString = String.fromCharCode.apply(null, array);
//console.log(result)
ipfs.add(binaryString, (err, result) => {
console.log(result)
document.getElementById("ipfs_hash").innerHTML = "<b>IPFS Hash of uploded file: </b>"+result[0].hash
})
}
reader.readAsArrayBuffer(this.files[0]);
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.