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.