Integrating Flow JS with Ember JS - Data not Binded - ember.js

Question

I am trying to integrate FlowJS with EmberJS. I was successful to upload data to server, so, I am good on that part.
I am unsuccessful When trying to bind flow object data with emberJS component to show data via handlebars. For some reason data binding is not working.
Here is an example of the code.
HTML
<script type="text/x-handlebars" data-template-name="index">
{{flow-uploader}}
</script>
<script type="text/x-handlebars" id="components/flow-uploader">
<div class="drop"></div>
<!-- file list -->
{{#each file in flow.files}}
<p>File name: {{file.name}}</p>
{{/each}}
</script>
JS
App = Ember.Application.create({
rootElement: '#main'
});
App.FlowUploaderComponent = Ember.Component.extend({
flow: function(){
return new Flow({
target: 'http://google.com',
testChunks: false
});
}.property(),
initDropZone: function(){
var flow = this.get('flow');
var drop = this.$('.drop')[0];
var $this = this;
flow.assignDrop(drop);
/*flow.on('fileAdded', function(file, flow){
});
flow.on('filesAdded', function(files){
});
flow.on('fileSuccess', function(file,message){
console.log('file success');
});
flow.on('fileError', function(flow, message, chunk){
console.log('file error');
});*/
flow.on('filesSubmitted', function(){
console.log($this.get('flow').files);
//flow.upload();
});
/*flow.on('complete', function(event, flow){
console.log('completed');
});
flow.on('uploadStart', function(event, flow){
console.log('uploading..');
});
flow.on('fileProgress', function(flow, file){
});*/
}.on('didInsertElement')
});
Example can be seen live at http://jsfiddle.net/sisir/qLuobq48/2/
Basically what I am doing here is to save the flow object as component property. files property of flow object is the array of file to be uploaded. Once we drag and drop or select multiple files to upload the files array gets updated. We can see it on the console. The logging code is added via filesSubmitted event.
From the handlebars expression each file is iterated from the files queue. Initially it is empty but later when it gets populated it doesn't show on the html. The data binding is not working for some reason.

Answer 1

In your component logic:
App.FlowUploaderComponent = Ember.Component.extend({
flow: function(){
return new Flow({
target: 'http://google.com',
testChunks: false
});
}.property(),
initDropZone: function(){
var $this = this;
var flow = this.get('flow');
var drop = this.$('.drop')[0];
flow.assignDrop(drop);
flow.on('filesSubmitted', function(){
//for setting a single property
$this.set('flowFiles', flow.files);
//for setting multiple properties
// $this.setProperties({'flowFiles': flow.files, /* etc.. */});
});
}.on('didInsertElement')
});
In your template:
<script type="text/x-handlebars" data-template-name="index">
{{flow-uploader}}
</script>
<script type="text/x-handlebars" id="components/flow-uploader">
<div class="drop"></div>
<!-- file list -->
{{#each file in flowFiles}}
File name: {{file.name}}
{{/each}}
</script>
See JSBin Example

Answer 2

The problem with your JSFiddle simply is(/was) that you referenced a text/plain file as JavaScript. As I asked here, not every file is usable in JSFiddle and GitHub does not like to get misused as pseudo-CDN for lazy people.
In other words: This error
Uncaught ReferenceError: Flow is not defined
is a result of this error
Refused to execute script from 'https://raw.githubusercontent.com/flowjs/flow.js/master/dist/flow.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
and can be fixed using
https://rawgithub.com
or the MaxCDN version
http://rawgit.com/
in place of the branch file URl.
Look at the new JSFiddle with all the console.log() statements. The files added, file added and submitted logs in the console are telling me that everything in your code works fine once you got the right file in use. PROTip: Always check your console for errors.