Caricamento file jQuery in AngularJS

Question

Sto tentando di caricare un file con jQuery File Upload in combinazione con angularJS.

Ho una forma più fasi, questo sono 2 passi della mia forma più fasi:

<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 is required.</div> 
       <div class="error" ng-show="steponeForm.appname.$error.stringPattern">Doesn't look like a 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 be 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> 

Nel file di mia abitudine js ho:

jQuery('#fileupload').fileupload({ 
    dataType: 'json' 
}); 

Nel mio controller (angularjs) ho:

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

Come potete vedere, chiamo la funzione submit() su Avvia caricamento, ma questo non attiva nulla. Inoltre, non ricevo errori nella mia console del browser. Cosa mi manca?

UPDATE:

Non ho una funzione di presentazione nei miei controller.js. Ho pensato che questo è stato aggiunto standard con jquery.fileupload-angular.js. Inoltre, non hanno specificato una funzione di invio here nell'esempio jQuery fileupload + angularjs.

La dichiarazione di mio modulo in app.js:

var app = angular.module('dxs-vkgroupApp', ['ngRoute', 'gettext']) 
.config(function($routeProvider, $httpProvider, $locationProvider){ 
    // send all requests payload as query string 
    $httpProvider.defaults.transformRequest = function(data){ 
     if (data === undefined) { 
      return data; 
     } 
     return jQuery.param(data); 
    }; 

    // set all post requests content type 
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; 

    // all 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; 
}); 

Nei miei controller.js ho tra le altre cose:

/** 
* Deals with advancing, going back or finishing the 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 the default list dynamic instead of hardcoded (problem is, the variable expressions wont get accepted in the 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 for 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 all fieldsets 
     if (!check) { //are there no fieldsets with 3 filled input elements then check is false so far 
      check = jQuery(this).find('input:text,[type^="number"]').filter(function() { //checks whether inputs are filled 
       return this.value != ""; 
      }).length > 2; //If filled inputs > 2 -> check = true 
     } 
    }); 

    return check; 
} 

angular.module('dxs-vkgroupApp') 
    .controller('StepController', StepController); 

Answer 1

sto prendendo un colpo qui . Ciò che causa il fatto che il submit() non funzioni è il fatto che il modulo di terze parti che dichiara la direttiva file-upload non è disponibile per la tua app. submit() deve essere parte dell'ambito del controller utilizzato dalla direttiva file-upload.

Provare a cambiare app.js:

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

Answer 2

In primo luogo comprendono tutti i file di base per jQuery Plugin File Upload

<!-- 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> 

Ora come detto @Discosultan, includere il modulo in blueimp.fileupload l'applicazione.js presentare

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

accertarsi di menzionare URL a cui si deve caricare l'immagine, sia in action attributi del tag form

<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> 

o nell'oggetto options passato a file-upload direttiva

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

Anche una cosa da notare è che lo submit() menzionato nel modello HTML è implementato cato dal plugin stesso e non ha bisogno di trovare un limite in noi nel controller

Aggiornato il Plunkr per includere un'immagine di anteprima prima di caricare e il progresso di upload di file come attuata in plug demo