EmberJS+Firebase Journey #3 — Uploading a CSV to Firebase

This is my 3rd story related to EmberJS since I started learning and so far it has been good, except the challenges of binding data between routes, models and controllers. Slowly, but surely I’ll get a hang of it! (proclamation)

In this story, I will like to touch on how to upload a simple CSV file generated with Excel, then upload it to Firebase as POJOs. Firstly, let’s take a look at a simple CSV file I have here :

Here I generated a csv with 2 columns of data, plan for the day (coulmn1), and the date (column2). The rows represent the day #. For those that have not follow my previous stories, I created a model call Plan, and in the Firebase server, I have an array of days under each Plan, if I have 365 days, I do not have to add one by one in the CMS, it will be easier if I can do it in a csv, and upload it, which in this case, will be what we are working towards.

So with the CSV in hand, lets now head to Ember Observer website and find a good component to use. For my case I have chosen (https://emberobserver.com/addons/emberx-file-input) It has pretty good score of 9 and ratings as well in git. Let’s follow the instruction and do a ember install emberx-file-input to install the component into the application. Once this is done we can add it into our handlebars page like this :

We will touch on the action “didSelectFiles” later
Notice that the “Choose a File” button appears

So do a “ember serve” and see it appearing! Congratulations, you have just hooked up a file upload function! Next, we are going to wire up the file uploaded and our controller action. Let’s head to this handlebar’s controller, for my case I call it plans/new.js. I created simple constant variables at the top to make my code more clean :

calling computed means Ember.computed, run means Ember.run

So let’s take a look at how we should program our “didSelectFiles(files)”

Why “files”, because the component allows multiple file upload, for our case we stick to only one file, so im only reading index 0 of the files array. We need to create a new instance of FileReader (read this for more info). We will make use of this eventhandler call “onloadend”, to bind the data from our file to our variable after the file has been read.

Hence, here we bind the result of the reader to our variable call “fileText” then we call readAsText so that the result is populated

If you set a debugger; after setting the reader.result to “fileText” variable, you can try printing the result and you should see what you have just uploaded :

As you can see, the file uploader automatically set a “\n” after each row, and a “,” after each column. So we can easily separate these using split and map.

We will use the Ember.computed to perform the splitting and mapping and then return it to a variable call “days”, then in the handlebar file, we will read in the days and populate a datatable :

Calling days and load each item as day, each row will have a task and date, calling firstObject and lastObject only applies if you have 2 items in each array, this will be the end result, woo! you just generate a datatable from your CSV!

After this, you can just call savePlan function, wired to your button and push it to Firebase. The output in firebase will look something like this :

Spotted something strange here? You have an extra carriage return at the back of the second column data. I will leave you here to solve that part yourself and that’s all I have today on how to pass a set of data in csv to firebase! Stay tune for more! Thanks for reading, do recommend or drop responses if you find this helpful for you and want more :)

I recommend this website https://www.embersherpa.com/ if you will love to have some mentorship on Ember as well!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.