title: BlueImp AngularJS Integration
body: <p>I want to integrate the BlueImp AngularJS file upload plugin into my site , but the problem is I'm using a template / directive / controller / service model. Ignoring the service I still can't seem to find which part of the code goes where.</p>
  
  <p>My template </p>
  
  <pre><code>&lt;div&gt;   &lt;form id="fileuploadbeta" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}"&gt;      
      &lt;!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --&gt;
      &lt;div class="row fileupload-buttonbar"&gt;
          &lt;div class="col-lg-7"&gt;
              &lt;!-- The fileinput-button span is used to style the file input field as button --&gt;
              &lt;span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}"&gt;
                  &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
                  &lt;span&gt;Add files...&lt;/span&gt;
                  &lt;input type="file" name="files[]" multiple ng-disabled="disabled"&gt;
              &lt;/span&gt;
              &lt;button type="button" class="btn btn-primary start" data-ng-click="submit()"&gt;
                  &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                  &lt;span&gt;Start upload&lt;/span&gt;
              &lt;/button&gt;
              &lt;button type="button" class="btn btn-warning cancel" data-ng-click="cancel()"&gt;
                  &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                  &lt;span&gt;Cancel upload&lt;/span&gt;
              &lt;/button&gt;
              &lt;!-- The global file processing state --&gt;
              &lt;span class="fileupload-process"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- The global progress state --&gt;
          &lt;div class="col-lg-5 fade" data-ng-class="{in: active()}"&gt;
              &lt;!-- The global progress bar --&gt;
              &lt;div class="progress progress-striped active" data-file-upload-progress="progress()"&gt;&lt;div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;!-- The extended global progress state --&gt;
              &lt;div class="progress-extended"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- The table listing the files available for upload/download --&gt;
      &lt;table class="table table-striped files ng-cloak"&gt;
          &lt;tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}"&gt;
              &lt;td data-ng-switch data-on="!!file.thumbnailUrl"&gt;
                  &lt;div class="preview" data-ng-switch-when="true"&gt;
                      &lt;a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery&gt;&lt;img data-ng-src="{{file.thumbnailUrl}}" alt=""&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="preview" data-ng-switch-default data-file-upload-preview="file"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;p class="name" data-ng-switch data-on="!!file.url"&gt;
                      &lt;span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl"&gt;
                          &lt;a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery&gt;{{file.name}}&lt;/a&gt;
                          &lt;a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}"&gt;{{file.name}}&lt;/a&gt;
                      &lt;/span&gt;
                      &lt;span data-ng-switch-default&gt;{{file.name}}&lt;/span&gt;
                  &lt;/p&gt;
                  &lt;strong data-ng-show="file.error" class="error text-danger"&gt;{{file.error}}&lt;/strong&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;p class="size"&gt;{{file.size | formatFileSize}}&lt;/p&gt;
                  &lt;div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"&gt;&lt;div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'"&gt;
                      &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy"&gt;
                      &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                      &lt;span&gt;Delete&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now my problem is what code should be in the directive? ( I mean what part of the template)   And which should be in the Controller?</p>