directive.js

/*  jqueryFileUpload-Plugin 
    https://github.com/blueimp/jQuery-File-Upload */
MYANGULARAPP.directive('myJqueryfileupload', function(){
    return{
        restrict:'E',
        compile:function(el,attrs){
            var compiler = this;
    
            var elem = el;
            // 2DO: serialize it from json?
            var multipart_params_object = el.attr('multipart_params') || null; // the value we watch in scope

            var instanceFn = function() {
                var currentScope = this;
                $('<div class="uploader">').appendTo(elem);
        
                var fileInputDiv = $(' <span class="btn btn-success fileinput-button">'+
                    '<i class="icon-plus icon-white"></i>'+
                    '<span>Dateien hinzufügen</span>'+
                    '<input type="file" name="files[]" multiple>'+
                    '</span>').appendTo(elem);
                fileInput = fileInputDiv.find('input');
                var fileList = $('<div class="UploaderList">'+
                    '<table>'+
                    '<tr>'+
                    '<td>Datei</td>'+
                    '<td>Ergebnis</td>'+
                    '</tr>'+
                    '</table>'+
                    '</div>').appendTo(elem);
                var button = $('<button class="btn">Hochladen</button>').appendTo(elem);
                button.hide();
                var buttonMore = $('<button class="btn">Weitere Dateien hochladen</button>').appendTo(elem);
                buttonMore.hide();
                $('</div>').appendTo(elem);
        
                fileInput.fileupload({
                    url:'upload.php', // CHANGE THIS TO YOUR WANTED URL
                    dataType: 'json',
                    add:function (e, data) {
                
                        button.show();
                        buttonMore.hide();
                
                        // this will add a handler which will submit this specific file
                        button.bind('click.uploadsubmit', function(){ 
                            data.submit();
                        });
                        $.each(data.files, function (index, file) {
                            $("<tr><td>"+file.name+"</td><td></td><tr>").appendTo(fileList.find('table:first'));
                        });
                    },
                    // for each file
                    done: function (e, data) {
                
                        button.hide();
                
                
                        var result = "";
                
                        var r = data.result;
                        var file = data.files[0]; // we only support single file upload by now
                        // error

                        // CHANGE THIS PART FOR YOUR REQUIREMENTS (I have a json repsonse)

                        if(r.success !== undefined && r.success == false){
                            var result = "<span class='error'>Unbekannter Fehler</span>";
                            if(r.errors !== undefined && r.errors.length > 0 && r.errors[0].message !== undefined)
                            {
                                result = "<span class='error'>"+r.errors[0].message+"</span>";
                            }
                        }
                        else{
                            result = "<span class='success'>OK</span>";
                        }
                
                        $("td:contains('"+file.name+"')").next().html(result);
                    },
                    progressall:function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
               
                    
                    },
                    // called only once... (wen submit button is clicked)
                    start:function(e){
                
                        // we start the upload, so we do also cleanup jobs right now:
                        button.unbind('click.uploadsubmit'); // importan - remove all event handlers
                        button.hide();
                        fileInputDiv.hide();
                
                    },
                    // this is only called once everything is stopped
                    stop:function(e){
                        buttonMore.show(); // show more uploads button if all uploads are finished
                    }
                });
        
                buttonMore.click(function(){
                    fileInputDiv.show();
                    fileList.find("tr:gt(0)").remove();
                    buttonMore.hide();
                    button.show();
                });
        
                /* watcher if multipart_params change
                 * 2DO: do we need this?
                 */
                if(multipart_params_object != null){
                    currentScope.$watch('multipart_params', function(newValue,oldValue,scope) {
                        fileInput.fileupload(
                            'option',
                            'formData',
                            StadtrallyeEditor.fromJson(newValue)
                            );
                    });
                }
        

            };
            return instanceFn;
        }
    } 
});

gistfile1.txt

<!-- the needed jquery upload files: -->
            <script type="text/javascript" src="lib/plugins/jqueryfileupload/jquery.iframe-transport.js"></script>
            <script type="text/javascript" src="lib/plugins/jqueryfileupload/jquery.ui.widget.js"></script>
            <script type="text/javascript" src="lib/plugins/jqueryfileupload/jquery.fileupload.js"></script>
 

<!-- how to insert the widget: -->
<!-- multipart params is a json string like '{"test":"test123"}' - this is optional -->
<my:jqueryfileupload multipart_params="{{multipart_params}}"></my:jqueryfileupload>