AngularJSでcsvをドラッグアンドドロップするdirective.

dropCsvDirective.js

angular.module('app').directive('dropCsv', function() {
    return {
        scope: false,
        link: function(scope, element, attrs) {
            $(element).on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $(element).removeClass('drophere');

                var file = e.originalEvent.dataTransfer.files[0];
                var reader = new FileReader();
                if(file.type !== 'text/csv') {
                    return false;
                }
                reader.onload = function(e) {
                    var csvString = e.target.result;
                    var csvLines = csvString.split(/\r|\n/);
                    var csv = [];
        
                    for(var i=0,line;line=csvLines[i];i++) {
                        csv[i] = line.split(',');
                    }
        
                    scope.csv = csv;
                    scope.$apply(function() {
                        scope.$eval(attrs.dropCsv);
                    });
                }
                reader.readAsText(file, "Shift_JIS");
            });
            $(element).on("dragenter", function(e) {
                e.stopPropagation();
                e.preventDefault();
                $(element).addClass('drophere');
            });
            $(element).on("dragleave", function(e) {
                e.stopPropagation();
                e.preventDefault();
                $(element).removeClass('drophere');
            });
            $(element).on("dragover", function(e) {
                e.stopPropagation();
                e.preventDefault();
                e.originalEvent.dataTransfer.dropEffect = "copy";
            });
        }
    };
});