Upload a file into Firebase


Firebase with AngularJS

Recently I met a friend and he talked about Meteor. So this inspired me to look further into it because I a have it on my agenda since a long time. And as always when I dive into a new thing I also look if there are competitors. And I found Volt and Firebase. Since Volt is Ruby and I've already wrote enough Ruby in the past this was not so much interesting to me. What catched me at Firebase is that they do all the boring backend stuff. All I have to do is to say "save this object under this REST-URL". Also they offer authentication, scaling (just buy the next bigger package), static html hosting and most interesting for me, a Angular module. So Firebase seemed more interesting than Meteor and I dived into Firebase. So the hello world of Firebase seems to be a live chat. Which can be done in a dozen lines of code. At the next step I wanted to make something bigger so I decided I want to program an idea I have for a long time. Everything worked good at first but than I wanted to make a typical profile page which of course isn't that complicated. Except I had no idea how to upload a file (preferably an image) into Firebase. Of course there are examples but this examples seemed more complicated than what i needed. In the end it's just a damn profile image nothing special-magical. So after 1,5 days I worked it out and thought maybe there are other people who have the same problem to here is my code.

So how does it work?

  • I register an event listener (ugly jQuery style but it works).
  • When a file is choosen it triggery the saveimage function
  • This function gets automaticly as input an object where you can read out what files are choosen.
  • Then I make an Filereader object (never even heard of this before but it's plain JavaScript)
  • Overload the onload function which gets automaticly as input an object in which you get the data.
  • This object youcan write into the database with a simple save.
  • Then you trigger this function with readAsDataURL(filename) DONE

I hope it may helps someone. Bye. PS: If you have a cleaner or better solution for the same problem please let me know.