chore: add progress bar

Author: fsdiogo

examples/exchange-files-in-browser/public/app.css

@@ -273,6 +273,20 @@ table tbody tr:hover {
   margin-left: 1em;
 }
 
+#progress-container {
+  margin-top: 1em;
+  border-radius: 0.5em;
+  background-color: #0B3A53;
+  overflow-x: hidden;
+}
+
+#progress-bar {
+  height: 1em;
+  border-radius: 0.5em;
+  background-color: #6ACAD1;
+  transform: translateX(-100%);
+}
+
 /* ===========================================================================
    Responsiveness
    =========================================================================== */

examples/exchange-files-in-browser/public/app.js

@@ -15,6 +15,7 @@ const $connectButton = document.querySelector('#peer-btn')
 const $multihashInput = document.querySelector('#multihash-input')
 const $fetchButton = document.querySelector('#fetch-btn')
 const $dragContainer = document.querySelector('#drag-container')
+const $progressBar = document.querySelector('#progress-bar')
 const $fileHistory = document.querySelector('#file-history tbody')
 const $emptyRow = document.querySelector('.empty-row')
 // Misc
@@ -25,6 +26,8 @@ const $allDisabledElements = document.querySelectorAll('.disabled')
 const FILES = []
 const workspace = location.hash
 
+let fileSize = 0
+
 let node
 let info
 let Buffer
@@ -103,6 +106,14 @@ const isFileInList = (hash) => FILES.indexOf(hash) !== -1
 
 const sendFileList = () => FILES.forEach((hash) => publishHash(hash))
 
+const updateProgress = (bytesLoaded) => {
+  let percent = 100 - ((bytesLoaded / fileSize) * 100)
+
+  $progressBar.style.transform = `translateX(${-percent}%)`
+}
+
+const resetProgress = () => $progressBar.style.transform = 'translateX(-100%)'
+
 function appendFile (name, hash, size, data) {
   const file = new window.Blob([data], { type: 'application/octet-binary' })
   const url = window.URL.createObjectURL(file)
@@ -190,10 +201,12 @@ function onDrop (event) {
   files.forEach((file) => {
     readFileContents(file)
       .then((buffer) => {
+        fileSize = file.size
+
         node.files.add({
           path: file.name,
           content: Buffer.from(buffer)
-        }, { wrap: true }, (err, filesAdded) => {
+        }, { wrap: true, progress: updateProgress }, (err, filesAdded) => {
           if (err) {
             return onError(err)
           }
@@ -202,6 +215,7 @@ function onDrop (event) {
           // the original file name when adding it to the table
           $multihashInput.value = filesAdded[1].hash
 
+          resetProgress()
           getFile()
         })
       })

examples/exchange-files-in-browser/public/index.html

@@ -66,6 +66,10 @@ <h2>Files</h2>
             <p><b>Drag &amp; drop</b> a file to upload it.</p>
           </div>
 
+          <div id="progress-container">
+            <div id="progress-bar"></div>
+          </div>
+
           <table id="file-history">
             <thead>
               <tr>