javascript - how - jquery angular 5

Carga de archivos jQuery en AngularJS

Question

Estoy intentando subir un archivo con jQuery File Upload en combinación con angularJS.

Tengo una forma de varios pasos, estos son 2 pasos de mi forma de varios pasos:

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

En mi archivo js personalizado tengo:

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

En mi controlador (angularjs) tengo:

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

Como puede ver, llamo a la función submit () en Iniciar carga, pero eso no desencadena nada. Tampoco recibo ningún error en la consola de mi navegador. ¿Qué me estoy perdiendo?

ACTUALIZAR:

No tengo una función de envío en mi controller.js. Pensé que esto era estándar agregado con jquery.fileupload-angular.js . Tampoco especificaron una función de envío aquí en el ejemplo jQuery fileupload + angularjs .

La declaración de mi módulo en 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;
});

En mi controller.js tengo entre otras cosas:

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

En primer lugar, incluya todos los archivos básicos para el complemento de carga de archivos jQuery

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

Ahora, como mencionó @Discosultan, incluya el módulo blueimp.fileupload en el archivo app.js

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

Asegúrese de mencionar la URL a la que debe cargar la imagen, ya sea en el atributo de action la etiqueta de 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 en el objeto de options pasado a la directiva de file-upload

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

También una cosa a tener en cuenta es que el submit() mencionado en la plantilla HTML es implementado por el plugin en sí mismo y no necesita ser reemplazado por nosotros en el controlador

Se actualizó el Plunkr para incluir una vista previa de la imagen antes de cargarla y el progreso de la carga de archivos tal como se implementó en la demostración del complemento

Answer 2

Estoy tomando una foto aquí. Lo que hace que submit() no funcione es el hecho de que el módulo de terceros que declara la directiva de file-upload no está disponible para su aplicación. submit() debe ser parte del alcance del controlador utilizado por la directiva de file-upload .

Intenta cambiar app.js :

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