Integrating Flow JS with Ember JS - Data not Binded

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.

userabuser · Accepted Answer · 2015-01-21T09:21:38.737

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

Thanks mate! Your answer put me in the right direction. Actually had to take a little different approach. I will have to write an answer. Again really appreciate it! — Sisir, Jan 21 '15 at 19:35

score 0 · Answer 2 · edited May 23 '17 at 10:30

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.

Raw file was working for me on firefox. Didn't checked it on other browsers though. *Thanks for the tip*. The console and the files array are alright. The main question was why doesn't it reflect on the handlebars (data binding). ie. the list of files should appear under the drop zone. — Sisir, Jan 18 '15 at 06:14

Integrating Flow JS with Ember JS - Data not Binded

HTML

JS

2 Answers2