javascript - jQuery File Upload in AngularJS -

i'm trying upload file jquery file upload in combination angularjs.

i have multistep form, 2 steps of multistep form:

<div ng-switch="step">     <div ng-switch-when="1">         <h1>identity</h1>         <form name="steponeform" data-file-upload="options" enctype="multipart/form-data" novalidate autocomplete="off">             <input type="submit" ng-click="next(steponeform.$valid)" value="next" /><br>              <span class="button fileinput-button" ng-class="{disabled: disabled}">                 <input type="file" id="fileupload" name="files[]" multiple="" >             </span>             <button type="button" class="btn btn-primary start" data-ng-click="submit()">                 <span>start upload</span>             </button>              <input ng-model="application.lastname" string-pattern required type="text" placeholder="{{ 'last name'|translate }} *" name="appname" id="appname" />             <div ng-show="steponeform.$submitted || steponeform.appname.$touched">                 <div class="error" ng-show="steponeform.appname.$error.required">last name required.</div>                 <div class="error" ng-show="steponeform.appname.$error.stringpattern">doesn't text.</div>             </div>              <input type="submit" ng-click="next(steponeform.$valid)" value="next" />         </form>     </div>      <div ng-switch-when="2">         <h1>studies</h1>         <form name="steptwoform" novalidate autocomplete="off">             <input type="submit" ng-click="previous()" value="previous" />             <input type="submit" ng-click="next(steptwoform.$valid)" value="next" />              <fieldset class="input-group">                 <legend translate>lower secondary studies</legend>                 <em>last obtained degree</em>                  <input ng-model="application.lowersecondarystudies.degreetitle" type="text" placeholder="degree title" name="morelowersecondarystudies-degreetitle" id="lwsappdegreetitle" />                 <input ng-model="application.lowersecondarystudies.educationauthority" type="text" placeholder="education authority" name="morelowersecondarystudies-educationauthority" id="lwsappeducationauthority" />                 <input ng-model="application.lowersecondarystudies.graduationyear" style="padding: 0.5278em; width: 100%;" type="number" min="1960" max="2015" value="2015" placeholder="graduation year" name="morelowersecondarystudiesgraduationyear" id="lwsappgraduationyear" />                 <div ng-show="steptwoform.$submitted || steptwoform.morelowersecondarystudiesgraduationyear.$touched">                     <div class="error" ng-show="steptwoform.morelowersecondarystudiesgraduationyear.$error.number">must valid year.</div>                 </div>             </fieldset>              <input type="submit" ng-click="previous()" value="previous" />             <input type="submit" ng-click="next(steptwoform.$valid)" value="next" />         </form>     </div> </div> 

in custom js file have:

jquery('#fileupload').fileupload({     datatype: 'json' }); 

in controller (angularjs) have:

$scope.options = {     maxfilesize: 5000000,     type: "post",     acceptfiletypes: /(\.|\/)(gif|jpe?g|png)$/i }; 

as can see call submit() function on start upload, doesn't trigger anything. i'm not getting errors in browser console. missing?

update:

i don't have submission function in controller.js . thought standard added jquery.fileupload-angular.js . didn't specify submit function here in example jquery fileupload + angularjs.

the declaration of module in app.js:

var app = angular.module('dxs-vkgroupapp', ['ngroute', 'gettext']) .config(function($routeprovider, $httpprovider, $locationprovider){     // send requests payload query string     $httpprovider.defaults.transformrequest = function(data){         if (data === undefined) {             return data;         }         return jquery.param(data);     };      // set post requests content type     $httpprovider.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded; charset=utf-8';      // routes     $routeprovider         .when('/edit.php/submissions/', {             templateurl: viewspath.views + 'submissions.html',             controller: 'submissionoverviewcontroller'         })         .when('/edit.php/submission/show/:fid/', {             templateurl: viewspath.views + 'submission.html',             controller: 'showsubmissioncontroller'         })         .when('/edit.php/submission/delete/:fid/', {             templateurl: viewspath.views + 'delete-submission.html',             controller: 'deletesubmissioncontroller'         })         .when('/wp-admin/', {             controller: 'routedecidercontroller',             template: '<div ng-include="gettemplateurl()"></div>'         })         .when('/:l/submission/new/:jid', {             templateurl: viewspath.views + 'new-submission.html',             controller: 'stepcontroller'         })         .when('/:l/projects/', {             templateurl: viewspath.views + 'projects.html',             controller: 'projectsoverviewcontroller'         }).otherwise({             controller: 'routedecidercontroller',             template: '<div ng-include="gettemplateurl()"></div>'         });      $locationprovider.html5mode(true); }) .run(function (gettextcatalog, $location) {     var curr_path = $location.path();     var result = curr_path.split("/");     var language = result[1];      gettextcatalog.setcurrentlanguage(language);     gettextcatalog.debug = true; }); 

in controller.js have amongst other things:

/**  * deals advancing, going or finishing multi step form  *  * @param $scope  * @param $http  * @param $routeparams  * @constructor  */ function stepcontroller($scope, $http, $routeparams) {     // inits     $scope.application = {};     $scope.application.children = [];      // counters     $scope.childcounter = 0;     $scope.morelowersecondarystudiescounter = 0;     $scope.morehighersecondarystudiescounter = 0;     $scope.morehighershorttermeducationcounter = 0;     $scope.morehigherlongtermeducationcounter = 0;     $scope.moreadditionalstudiesspecialtycounter = 0;     $scope.moreadditionalstudiesthesiscounter = 0;     $scope.languagecounter = 0;     $scope.experiencecounter = 0;      // select options     $scope.languageoptions = ['--select--', 'very good', 'good', 'notions', 'no notion'];      // languages     // @todo make default list dynamic instead of hardcoded (problem is, variable expressions wont accepted in select attributes)     //$scope.languages = ['dutch', 'french', 'english', 'german'];      $scope.job_id = $routeparams.jid;      $scope.step = 1;      $scope.noneselected = function (type) {         switch(type)         {             case 'appcontact':                     if(!$scope.application.contact){                         return true;                     }                     else                     {                         return !($scope.application.contact.relations || $scope.application.contact.employees || $scope.application.contact.jobad || $scope.application.contact.website || $scope.application.contact.other)                     }                 break;             case 'appworklocation':                     if(!$scope.application.worklocation){                         return true;                     }                     else                     {                         return !($scope.application.worklocation.roeselare || $scope.application.worklocation.brussel || $scope.application.worklocation.merelbeke)                     }                 break;         }     };      $scope.next = function($valid){         if(!$valid)         {             $scope.step = $scope.step;         }         else if($scope.step == 2)         {             $scope.inputgrouperror = false;              // special check 6 input groups (input fields)             if(check())             {                 $scope.step += 1;             }             else             {                 $scope.inputgrouperror = true;                 $scope.step = $scope.step;             }         }         else         {             $scope.step += 1;         }          window.scrollto(0,0);     };      $scope.previous = function(){         $scope.step -= 1;         window.scrollto(0,0);     };      $scope.finish = function($valid){         if(!$valid)         {             $scope.step = $scope.step;         }         else         {             $http.post('new-submission', { id: $scope.job_id, application: $scope.application })                 .success(function(data, status, headers, config){                     window.location.href = data.redirect_url;                 });         }     }; }  function check() {     var check = false;     jquery.each(jquery('fieldset.input-group'), function () { //loops through fieldsets         if (!check) { //are there no fieldsets  3 filled input elements check false far             check = jquery(this).find('input:text,[type^="number"]').filter(function () { //checks whether inputs filled                 return this.value != "";             }).length > 2; //if filled inputs > 2 -> check = true         }     });      return check; }  angular.module('dxs-vkgroupapp')     .controller('stepcontroller', stepcontroller); 

firstly include basic files jquery file upload plugin

<!-- jquery file upload stylesheets --> <link rel="stylesheet" href="jquery.fileupload.css" /> <link rel="stylesheet" href="jquery.fileupload-ui.css" />  <!-- load image plugin included image preview , resizing functionality --> <script src="load-image.all.min.js"></script> <!-- canvas blob plugin included image resizing functionality --> <script src="canvas-to-blob.min.js"></script> <!-- iframe transport required browsers without support xhr file uploads --> <script src="jquery.iframe-transport.js"></script> <!-- basic file upload plugin --> <script src="jquery.fileupload.js"></script> <!-- file upload processing plugin --> <script src="jquery.fileupload-process.js"></script> <!-- file upload image preview & resize plugin --> <script src="jquery.fileupload-image.js"></script> <!-- file upload validation plugin --> <script src="jquery.fileupload-validate.js"></script> <!-- file upload angular js module --> <script src="jquery.fileupload-angular.js"></script> 

now @discosultan mentioned , include blueimp.fileupload module in app.js file

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

make sure mention url have upload image , either in 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 options object passed file-upload directive

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

also thing note , submit() mentioned in html template implemented plugin , doesn't need overridden in controller

updated plunkr include image preview before uploading , progress of file upload implemented in plugin demo