JSFiddle - React, Tailwind, and code Playground

by Franz Josef Kaiser

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.0/ember.min.js"></script>
<script src="https://rawgit.com/flowjs/flow.js/master/dist/flow.min.js"></script>
<div id="main"></div>

<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>

CSS

.drop{
    height: 300px;
    border: 5px dashed grey;
}

JavaScript

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){
console.log( 'file added', arguments );
        });
        flow.on('filesAdded', function(files){
            console.log( 'files added', arguments );
        });
        flow.on('fileSuccess', function(file,message){
            console.log('file success',arguments);
        });
        flow.on('fileError', function(flow, message, chunk){
            console.log('file error',arguments);
        });
        flow.on('filesSubmitted', function(){
            console.log('file submitted', $this.get('flow').files, arguments);
            //flow.upload();
        });

        flow.on('complete', function(event, flow){
            console.log('completed', arguments );
        });

        flow.on('uploadStart', function(event, flow){
            console.log('uploading..', arguments);
        });
        flow.on('fileProgress', function(flow, file){
console.log( 'progress', arguments )
        });

    }.on('didInsertElement')

});