jQuery File Upload in AngularJS

Firstly include all the basic files for jQuery File Upload Plugin

<!-- jQuery File Upload Stylesheets --><link rel="stylesheet" href="jquery.fileupload.css" /><link rel="stylesheet" href="jquery.fileupload-ui.css" /><!-- The Load Image plugin is included for image preview and resizing functionality --><script src="load-image.all.min.js"></script><!-- The Canvas to Blob plugin is included for image resizing functionality --><script src="canvas-to-blob.min.js"></script><!-- The Iframe Transport is required for browsers without support for XHR file uploads --><script src="jquery.iframe-transport.js"></script><!-- The basic File Upload plugin --><script src="jquery.fileupload.js"></script><!-- The File Upload processing plugin --><script src="jquery.fileupload-process.js"></script><!-- The File Upload image preview & resize plugin --><script src="jquery.fileupload-image.js"></script><!-- The File Upload validation plugin --><script src="jquery.fileupload-validate.js"></script><!-- The File Upload Angular JS module --><script src="jquery.fileupload-angular.js"></script>

Now as @Discosultan mentioned , include the blueimp.fileupload module in the app.js file

var app = angular.module('dxs-vkgroupApp', ['blueimp.fileupload', 'ngRoute', 'gettext'])

Make sure to mention URL to which you have to upload the image to , either in the form tag's action attribute

<form action="//jquery-file-upload.appspot.com/" file-upload="options" enctype="multipart/form-data" name="steponeForm" novalidate autocomplete="off">....  <!-- Add Files Button -->  <span class="btn btn-success fileinput-button">    <i class="glyphicon glyphicon-plus"></i>  <span>Add files...</span>  <input type="file" name="files" multiple="" ng-disabled="disabled">  </span>  <!-- Start Upload Button -->  <button type="button" class="btn btn-primary start" ng-click="submit()">    <i class="glyphicon glyphicon-upload"></i>    <span>Start upload</span>  </button>....</form>

or in the options object passed to file-upload directive

$scope.options = {    maxFileSize: 5000000,    type: "POST",    url:'//jquery-file-upload.appspot.com/',    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i};

Also a thing to note is , the submit() mentioned in the HTML template is implemented by the Plugin itself and doesn't need to be overridden by us in the controller

Updated the Plunkr to include image preview before uploading and progress of file upload as implemented in plugin demo

I'm taking a shot here. What causes the submit() not to function is the fact that the third party module which declares the file-upload directive is not available for your app. submit() should be part of the scope for the controller used by the file-upload directive.

Try changing app.js:

var app = angular.module('dxs-vkgroupApp', ['ngRoute', 'gettext', 'blueimp.fileupload'])