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