Skip to content

Instantly share code, notes, and snippets.

@DrI-T

DrI-T/README.md

Last active May 19, 2021 05:07
Show Gist options
  • Save DrI-T/21cfa651fe06275f99f092f44f5a596b to your computer and use it in GitHub Desktop.
Save DrI-T/21cfa651fe06275f99f092f44f5a596b to your computer and use it in GitHub Desktop.
Download ZIP
javascript: writing binary data to IPFS and reading it back (Uint8Array to Blob to Fetch to ArrayBuffer to Uint8Array)
Raw
README.md

writing binary data using fetch

This gist can be view on blocks or gist.io

Example binary write to IPFS

ex: WriteToIPFS

note: this page is compiled with the commande:

pandoc --template=_README.md _README.md | pandoc -o README.md

(the first pandoc evaluates the front matter, the second removes id)

<script>
  console.debug('html.innerHTML:',document.getElementsByTagName('html')[0].innerHTML.substr(0,42),'...');
const url='https://gist.githubusercontent.com/DrI-T/21cfa651fe06275f99f092f44f5a596b/raw/_writeToIPFS.html'
var content ='<p>Why, Hello world !</p>'
fetch(url,{ method: 'GET' }).
then( resp => resp.text() ).
then( html => {
  html = html.replace('<!DOCTYPE html>','');
  console.log('html:',html.substr(0,42).replace(/\n/g,' '),'...');
  document.write(html)
  /* 
  let temp = document.getElementById('gist')
  var clone = temp.content.cloneNode(true);
  clone.outerHTML = html;
  document.body.appendChild(clone);
  console.dir(clone);
  */
}).
catch(console.warn)
</script>
Raw
_README.md
title subtitle gist description note build
blobs and fetch in javascript
writing binary data using fetch
21cfa651fe06275f99f092f44f5a596b
This code will show you how to do a "binary-write" to a webhook or an api (for instance the ipfs one). It uses Uint8Array and Blob you can see it run on codepen too: [/pen/yLVmZbB][2]
you need to have a IPFS api running on [127.0.0.1:5001][3]
panpandoc __FILE__

$subtitle$

$page.description$

This gist can be view on blocks or gist.io

Example binary write to IPFS

ex: WriteToIPFS

note: this page is compiled with the commande:

pandoc --template=_README.md _README.md | pandoc -o README.md

(the first pandoc evaluates the front matter, the second removes id)

<script>
  console.debug('html.innerHTML:',document.getElementsByTagName('html')[0].innerHTML.substr(0,42),'...');
const url='https://gist.githubusercontent.com/DrI-T/$gist$/raw/_writeToIPFS.html'
var content ='<p>Why, Hello world !</p>'
fetch(url,{ method: 'GET' }).
then( resp => resp.text() ).
then( html => {
  html = html.replace('<!DOCTYPE html>','');
  console.log('html:',html.substr(0,42).replace(/\n/g,' '),'...');
  document.write(html)
  /* 
  let temp = document.getElementById('gist')
  var clone = temp.content.cloneNode(true);
  clone.outerHTML = html;
  document.body.appendChild(clone);
  console.dir(clone);
  */
}).
catch(console.warn)
</script>
Raw
_writeToIPFS.html
<!DOCTYPE html><meta charset="utf8">
<style>
body {
background-image:url(https://dweb.link/ipfs/QmZzV33s2e1r8QjRjWGipPsvgwKKxyyBRRZ6RQsB1X1mnq/bg-geped.jpg);
background-size: cover;
background-attachment: fixed
}
#container {
max-width: 840px;
min-height: 40px;
margin: auto;
margin-top: 10vh;
padding: 1.4rem;
color: #200122;
background-color: white;
opacity: .96;
box-shadow: 5px 5px 15px 2px rgba(4,3,5,0.9);
border-radius: 16px;
overflow: auto;
}
</style>
<body>
<div id=container>
<h2>Binary Write to IPFS</h2>
<i>courtesy <a href="https://www.drit.ml/">Dr I·T</a></i>
<p>hexData: <input name=hex value="0x1220d4ca21fd67b197375c10392f392adc4cd33fbce4575d435e23a664f0cbac60f7" onchange="main(event);" size=58><button onclick="main(event);">write</button>
<p>binaryData: <span id=binary><i>:binary</i><span> (bytes)
<p>cID-0: <span id=cid0><i>:cid0</i></span>
<p>readBack: <span id=readback><i>:readback</i></span>
<p>hex: <span id=hexreadback><i>:hexreadback</i></span>
</div>
<script>
/* REQUIRED AN IPFS NODE RUNNING LOCALLY */
main({}); // run once ...
function main(ev) {
var hex = document.getElementsByName('hex')[0].value.replace('0x','');
console.log('hex:',hex)
var bytes = new Uint8Array(hex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)))
var data = String.fromCharCode.apply(null, bytes)
document.getElementById('binary').innerText = data;
console.log('array:',Uint8Array.from(data, c => c.charCodeAt(0)))
let url = 'http://127.0.0.1:5001/api/v0/add?file=content.dat&only-hash=false&cid-version=0&pin=true';
var promized_cid = fetchPostBinary(url,data).
then( resp => resp.json() ).
then( json => { console.log('fetch.then.json:',json); return json.Hash }).
then( cid => readBack(cid) ).
catch(console.error)
}
function readBack(cid) { // verify by fetching back content ...
let url = 'http://127.0.0.1:8080/ipfs/' + cid;
document.getElementById('cid0').innerHTML = `<a href="${url}">${cid}</a>`;
return fetchGetBinary(url).
then( data => {
let arrView = new Uint8Array(data);
document.getElementById('readback').innerText = arrView;
document.getElementById('hexreadback').innerText = '0x' + Array.from(arrView).map(byte => byte.toString(16).padStart(2, '0')).join('');
}).
catch(console.error)
}
function fetchPostBinary(url, data) {
console.trace('fetchPostBinary.inputs: %o',{"url":url,"data":data});
let arrView = Uint8Array.from(data, byte => byte.charCodeAt(0))
let blob = new Blob([arrView.buffer], {type:"application/octet-stream"})
console.debug('fetchPostBinary.blob',blob);
let form = new FormData();
form.append("file", blob,'content.dat');
return fetch(url, { method: "POST", mode: 'cors', body: form })
.then(resp => { console.log('fetchPostBinary.resp:',resp); return resp; })
.catch(console.warn)
}
function fetchGetBinary(url) {
return fetch(url, { method: 'GET' }).
//then( resp => resp.blob() ).
//then( blob => { return new Response(blob).arrayBuffer(); } ).
then( resp => resp.arrayBuffer() ).
then( arrayBuf => {
console.log('fetchGetBinary.array:',new Uint8Array(arrayBuf));
return arrayBuf;
}).
catch(console.error)
}
</script>
Raw
index.html
<!DOCTYPE html>
<template id=gist><meta charset=utf8></template>
<script>
const url='https://gist.githubusercontent.com/DrI-T/21cfa651fe06275f99f092f44f5a596b/raw/_writeToIPFS.html'
fetch(url,{ method: 'GET' }).
then( resp => resp.text() ).
then( html => {
html = html.replace('<!DOCTYPE html>','');
console.log('html:',html.substr(0,42).replace(/\n/g,' '),'...');
document.write(html);
return html;
}).
catch(console.warn)
</script>
@DrI-T
Copy link
Author

DrI-T commented Mar 21, 2021 •
edited

to execute the code locally :

qm=$(ipfs add https://gist.github.com/DrI-T/21cfa651fe06275f99f092f44f5a596b/raw/writeToIPFS.html -Q)
xdg-open http://127.0.0.1:8080/ipfs/$qm

@DrI-T
Copy link
Author

DrI-T commented Mar 21, 2021

codepen: https://codepen.io/michel47-the-encoder/pen/yLVmZbB

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment