Add sketch of the tutorial

Author: haadcode

examples/interop-examples/README.md

@@ -10,3 +10,93 @@ npm start
 ```
 
 Open http://127.0.0.1:8080 in your favorite browser.
+
+## Tutorial
+
+Steps
+1. create IPFS instance
+
+First, we need an IPFS instance that we'll use throughout the tutorial. For the sake of convinience, we'll use `ipfs-daemon` module to create and IPFS instance.
+
+Add `ipfs-daemon` to your project:
+```
+npm i ipfs-daemon --save
+```
+
+Add `ipfs-daemon` to your html:
+```html
+<script type="text/javascript" src="node_modules/ipfs-daemon/dist/ipfs-browser-daemon.js" charset="utf-8"></script>
+```
+
+Create the IPFS instance and wait for it to start:
+
+```javascript
+const ipfs = new IpfsDaemon({
+  // Directory to which save IPFS data to
+  IpfsDataDir: '/path/to/ipfs/data',
+  // IPFS dev server: webrtc-star-signalling.cloud.ipfs.team
+  SignalServer: '188.166.203.82:20000',
+})
+
+ipfs.on('error', (e) => console.error(e))
+ipfs.on('ready', () => {
+  // We're ready to use IPFS!
+})
+```
+
+2. listen for file drop
+
+```html
+<div id="ipfs" class="ipfs" ondragover="event.preventDefault()"></div>
+```
+
+```javascript
+const rootElement = document.getElementById("ipfs")
+rootElement.addEventListener('drop', onDrop)
+```
+
+```javascript
+const onDrop = (event) => {
+  event.preventDefault()
+  const files = event.dataTransfer.files
+
+  // Go through each file (allows dropping multiple files)
+  for (let i = 0; i < files.length; i ++) {
+    const file = files[i]
+    // See details below for reading file contents
+    readFileContents(file)
+      .then((content) => {
+        // Add the file to IPFS
+        // See detailed documentation at: https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfsfilesadddata-options-callback
+        return ipfs.files.add([{
+          path: file.name,
+          content: new ipfs.types.Buffer(content)
+        }])
+      })
+      .then((files) => {
+        // Output the added files and their hashes to the HTML
+        rootElement.innerHTML = files
+          .map((e) => `Added ${e.path} as ${e.hash}`)
+          .join('<br>')
+      })
+      .catch(onError)
+  }
+}
+```
+
+The function to read file's contents:
+
+```javascript
+const readFileContents = (file) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader()
+    reader.onload = (event) => resolve(event.target.result)
+    reader.readAsArrayBuffer(file)
+  })
+}
+```
+
+3. add dropped file to IPFS
+4. output file's hash
+5. ipfs.files.cat
+6. output to <img>