Base64 Encoder

by amindunited

HTML

<script type="text/x-handlebars" data-template-name="application">
	<h1>Base 64 Encoder</h1>
	{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
	{{amu-base64-encoder}}
</script>

<script type="text/x-handlebars" data-template-name="components/amu-base64-encoder">
	<div class="dropzone">
	Drop file here
	</div>
	<div class="output">
	<textarea name="textarea" rows="10" cols="50" placeholder="Result will appear here" class="mousetrap"></textarea>
	</div>
</script>

<!-- 
JS LIBS
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.6.1/ember.min.js"></script>

CSS

.dropzone {
    width: 50%;
    margin-left:auto;
    margin-right: auto;
    height: 100px;
    border: dashed 1px #999999;
    text-align: center;
    line-height: 100px;
}
.output {
    width: 50%;
    margin-left:auto;
    margin-right: auto;
    height: 100px;
    //border: dashed 1px #999999;
    border-radius: 5px;
}

JavaScript

App = Em.Application.create();
App.AmuBase64EncoderComponent = Em.Component.extend({
    didInsertElement: function() {
        var self = this;
        
        this.$().on('dragenter', function(e){
            e.stopPropagation();
            e.preventDefault();
        });
        this.$().on('dragover', function(e){
            e.stopPropagation();
            e.preventDefault();
        });
        this.$().on('drop', function(e){
            e.stopPropagation();
            e.preventDefault();
            for (var i = 0; i < e.dataTransfer.files.length; i++) {
                self.ParseFile(e.dataTransfer.files[i]);
            }
        });
        
        //when using node-webkit command/ctrl c doesn't work...
        Mousetrap.bind(['command+c', 'ctrl+c'], function() {
            
            if (this.$('textarea').val()) {
                var val = this.$('textarea').val();
                var gui = node_require('nw.gui');
                var clipboard = gui.Clipboard.get();
                clipboard.set(val, 'text');
                
            } else {
                console.log('textarea is empty');
            }
            
            // return false to prevent default browser behavior
            // and stop event from bubbling
            return false;
        });
    },
    
    ParseFile: function(file){
        var self = this;
        var reader = new FileReader();
        reader.onloadend = function(e){
            self.$('.output textarea').val(e.target.result);
            self.$('.output textarea').select();
        }
        reader.readAsDataURL(file);
    }
});