Migrating JQuery File Upload to AngularJS

Question

I'm migrating an existing project over to AngularJS and struggling to adapt the working JQuery File Upload code I wrote to the AngularJS paradigm.

Here's the working JQuery File Upload code I want to migrate into an Angular controller (in Coffeescript):

  $("#new_attachment").fileupload
    url: '/api/v1/attachments'
    dataType: 'json'
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png|tif?f|pdf)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#attachments').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a format we currently support.")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.meter').css('width', progress + '%')
    done: (e, data) ->
      $('#attachments').append $(tmpl("template-thumbnail", data.files[0]))
      if data.context
        data.context.hide()
    fail: (e, data) ->
      alert "Upload failed on one or more images."  

Beyond injecting the fileupload module into the angular app (angular.module('demo', ['blueimp.fileupload'])), I pretty much stumped at how to bring this code into an Angular controller.

Any advice on how to approach this?

Answer 1

Ultimately, there were a lot of great tutorials I found on doing this, but found that the complexity of adapting JQuery File Upload to an AngularJS flow wasn't worth the effort and found that Angular File Upload offered the same functionality with a far simpler implementation.

Here's a good links I referenced when trying the JQuery File Upload route, if anybody wants to give it a try: http://code.xplorate.com/2013/05/angularjs-tutorial-4-file-upload-using.html#.VKbUyYrF_0r

If someone has a better answer to the question, please post and I'll make it the accepted answer.