HTML and Javascript code to load a file in your IPFS Server

The Interplanetary FileSystem (IPFS) is sometimes complicated to understand.

With this example we will try to start an IPFS Server. Follow these instructions: How to install Embark by Status in MacOS (Ethereum Dapp development)

Run: ipfs daemon to start the Service

You can open another terminal window and run: ipfs swarm peers to see the nodes connections

Once the server is up and running, you can try to add a website in the server with a simple HTML page.

• Example code (HTML+Javascript) to upload a file in an IPFS Server
  • Thanks to Ankonan for this collaboration

The Javascript code:

</pre>
var ipfs = window.IpfsApi('ipfs.coinmarketrank.io', '80')

function processFile(evt) {

var file = evt.target.files[0];
reader = new FileReader();

reader.onload = function(e) {
var data = e.target.result;

const Buffer = window.IpfsApi().Buffer;


const buf = Buffer.from(data) // Convert data into buffer
const files = [{
path: '/Reports/'+file.name,

content: buf
}]

ipfs.files.add(files, function(err, files) {
// 'files' will be an array of objects containing paths and the multihashes of the files added
if (err) {
console.log(err);
log(err);
} else {
console.log(files);
document.getElementById('output').innerHTML = "<b>" + files[0].hash + "</b>
<a target='new' href='https://ipfs.io/ipfs/"+files&#91;0&#93;.hash+"'>Link to Global IPFS "+files[0].path+"
" + "<a target='new' href='http://ipfs.coinmarketrank.io:8081/ipfs/"+files&#91;0&#93;.hash+"'>Link to IPFS Server "+files[0].path+"";
}
})

}
reader.readAsArrayBuffer(file);
}

const log = (line) = {
document.getElementById('output').appendChild(document.createTextNode(`${line}\r\n`))
}
<pre>

Remember, this code uses these Javascript libraries:

• https://unpkg.com/ipfs-api/dist/index.js
  • https://unpkg.com/ipfs-api@9.0.0/dist/index.js
• https://unpkg.com/ipfs/dist/index.js
  • https://cdn.jsdelivr.net/npm/ipfs/dist/index.js

You can try and test:

• http://www.ankonan.io/demo/ipfs/

Basically is push a file, WAIT a moment, and after some little time requested, the file will appear in the IPFS network. Example:

• https://ipfs.io/ipfs/QmQUYtxt79cJccf58MEE7xGSNzwC3mmoFwBrsh9gArDeyT