chore: add progress bar

ipfs · May 28, 2018 · 14e9dee · 14e9dee
1 parent bd55179
commit 14e9dee
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/examples/exchange-files-in-browser/public/app.css b/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
  =========================================================================== */

diff --git a/examples/exchange-files-in-browser/public/app.js b/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()
  })
  })

diff --git a/examples/exchange-files-in-browser/public/index.html b/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>