STEEM To File Upload - Utopian Hackathon submission

in utopian-io •  7 months ago

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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

  • checkout the repo
  • open it in the browser
  • done ;-)

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 app field 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,
trufflepig
TrufflePig

Congratulations @dehenne! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes received

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 STOP

Support SteemitBoard's project! Vote for its witness and get one more award!

Wow, this is super cool. Is the amount you can upload determined by your bandwidth? Is it really slow to upload?

·

Wow, this is super cool. Is the amount you can upload determined by your bandwidth?

yes, but
with a sp15 account a 3mb file was no problem

Is it really slow to upload?

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