STEEM To File Upload - Utopian Hackathon submission

As some know, the Utopian Hackathon was / is running this week.
We took the chance and implemented a STEEM To File Upload.

Repository

• https://github.com/pcsg/steemToFileUpload

New Project

What is the project about?

STEEM To File Upload is the first real file upload client for the STEEM Blockchain. The "app" was developed by us (@dehenne and @mordark).

What is possible now?

It is now possible to load files into the STEEM blockchain and download them again.
The files are not only as a link in the blockchain, this time the file data are complete in the STEEM Blockchain.

The goal was:

• to demonstrate how the STEEM blockchain can be utilised
• how files can be edited, uploaded and downloaded using only a browser

Technology Stack

This app runs completly in the browser. Everything is developed with new JavaScript (ES6), HTML and CSS. No server is necessary and therefore nothing stands in the way of the implementation as dApp.

How it works

The procedure is actually quite simple, but the trick is in the detail.

Upload

• The browser loads the file [1] [2]
• The binary data is converted to hex data. [1]
• The hex data is saved as comments [1]
• In the main post the most important file data are stored in the custom json data [1]

Download

• All comments of the main post will be fetched [1]
• The content will be merged [1]
• The hex data is converted as binary data. [1]
• The file is offered as download [1]

Because the processes are a bit bigger, we marked the places where the magic happens behind each step.

Roadmap

At the moment we have not thought about a roadmap but since this app was cut together under time pressure some functions are missing which guarantee a correct use. In the next days / weeks these will be integrated.

• Compression of the uploaded files
• Login window, exists, but wif checking is missing
• Upload progress bar - user must see the upload progress
• Real dApp
• Pagination of the file list
• File upload resume
• More mime type icons
• Little bit code cleanup
• Browser compatibility
• Fine tuning of the file parameters

What we learned

Holy cow, we learned a lot.

• Use of the dsteem JavaScript library
• ES6 modules (import, export)
• ES6 Arrow Functions (practical experience gained)
• File handling
  • Conversion of a file into different formats and all that in the browser
  • Understanding Uint8Array, Uint16Array and how it can be used
  • FileReader JavaScript API
• Trick for Promise delays :D
• Pair programming is sometimes not easy :D

Because the source code is completely free, we hope others can learn from it as well.

How to contribute?

We are looking forward to further ideas, issues or fixes.

GitHub Accounts

• https://github.com/pcsg
• https://github.com/dehenne
• https://github.com/mordark

Preview

Since the app isn't really available online yet, here are two screenshots of what it looks like.

Thanks for reading
Hen and Mor