I am trying to upload the file to IPFS from HTML page and below is my code but I am getting below error.
Uncaught ReferenceError: Buffer is not defined
I have imported below statements
<script src="https://unpkg.com/ipfs-api/dist/index.min.js"></script>
src="https://unpkg.com/ipfs/dist/index.min.js"
src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"
src="https://unpkg.com/ipfs/dist/index.js"
src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.js"
src="https://unpkg.com/ipfs-api/dist/index.js"
src="https://unpkg.com/[email protected]/dist/index.js"
integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB"
crossorigin="anonymous"
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/ipfs-api/dist/index.min.js"></script>
<!-- loading the human-readable (not minified) version -->
<!-- loading the minified version -->
<script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>
<!-- loading the human-readable (not minified) version -->
<script src="https://unpkg.com/ipfs/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.js"></script>
<script src="https://unpkg.com/ipfs-api/dist/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"
integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB"
crossorigin="anonymous"></script>
</head>
<body>
<form action="/">
<fieldset>
<legend></legend>
<input type="file" name="photo" id="photo">
<button type="button" onclick="upload()"></button>
</fieldset>
</form>
</br>
</br>
<a id="url"></a>
</br>
</br>
<img id="output">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
function upload() {
console.log("hi");
const reader = new FileReader();
reader.onloadend = function() {
console.log("2");
const ipfs = window.IpfsApi('localhost', 5001) // Connect to IPFS
console.log("3");
const buf = buffer.Buffer(reader.result) // Convert data into buffer
console.log("4");
ipfs.files.add(buf, (err, result) => { // Upload buffer to IPFS
console.log("5");
if(err) {
console.error(err)
return
}
let url = 'https://ipfs.io/ipfs/${result[0].hash}'
console.log('Url --> ${url}')
document.getElementById("url").innerHTML= url
document.getElementById("url").href= url
document.getElementById("output").src = url
})
}
const photo = document.getElementById("photo");
reader.readAsArrayBuffer(photo.files[0]); // Read Provided File
}
</script>
</body>
</html>