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
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
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
Please ping me when you have a working version of this running somewhere :) I was looking for something like this for a long time now!
hey muffin, it already works
at the moment it uses the test net.
... if I have it online correctly, I will let you know it.
Cool implementation. Great job.
I would favor keeping text only data in the blockchain with the current economics and the infrastructure requirements, though :)
Regarding the
appfield in post JSON, there is a convention with the current app ecosystem it should be used with a version attached to the string. (Ex:stfu-app/0.0.1).oh, thank you for the hint! I created an issue: https://github.com/pcsg/steemToFileUpload/issues/1 so I will not forget it ;-)
Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 23 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.
I upvoted your contribution because to my mind your post is at least 10 SBD worth and should receive 84 votes. It's now up to the lovely Steemit community to make this come true.
I am
TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!Have a nice day and sincerely yours,
TrufflePigCongratulations @dehenne! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOPWow, this is super cool. Is the amount you can upload determined by your bandwidth? Is it really slow to upload?
yes, but
with a sp15 account a 3mb file was no problem
compare to ftp or correct file uploads, yes
but at HF20 the comment limit will be reduced, so you dont need to wait 20 seconds for a new file part ;-)
which means the whole thing gets faster.
Next week, i'm trying to provide a browser plugin and a look for a place for a dApp. So everybody can use it.
Ooh, do comments have a size limit?
yes. it exists several limits. first a 20 second limit. but this is eliminated with the hf20
secondly, if I'm not mistaken, a comment has a size limit of ~64k chars
Ah, that makes sense. Thanks!
Nice one! Maybe consider using now.sh to serve the static contents.
thinking ... I wanted to make a real dApp, i think I'd like that better. The hackathon was supposed to serve as a learning ground. and I haven't made a real dApp yet :-)
That will be really really cool.
Posted using Partiko Android