Trabajando con AngularJS en un formulario de carga de archivos, una vez que realicé una carga y envié dichos archivos, no me permite cargar nuevos elementos.
La dinámica del problema es el siguiente: En un input, manejado mediante el atributo uploader (objeto de tipo new FileUploader()
), se cargan múltiples archivos, y los archivos agregados son visualizados de manera dinámica.
<div class='form-group'>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"><span class="center-label">Documentación</span></div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<input class="upload_input" ng-show="!isUploadingFile" type="file" nv-file-select="" multiple="" uploader="uploaderFile" accept="image/*" id="inputImg"><label class="upload_label"><i class="fa fa-picture-o picture-color" aria-hidden="true"></i>{{fileName}}</label>
<p ng-repeat="currentFile in uploaderFile.queue" class="btn-delete-container"> {{currentFile.file.name}} <button type="button" name="button" class="btn btn-delete" ng-click="currentFile.remove()"><i class="fa fa-trash" aria-hidden="true"></i></button></p>
<div ng-if="isUploadingFile" class="small-loading"></div>
</div>
</div>
</div>
Para realizar el envío de los archivos, se ejecuta la función fileChanged()
asociada al evento click de un botón:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"></div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="btn btn-primary" ng-click="fileChanged(auth)">
<span ng-show="!spinnerRequestAutorization">Enviar solicitud</span>
<span ng-show="spinnerRequestAutorization"><i class="fa fa-spinner" aria-hidden="true"></i></span>
</div>
</div>
</div>
Esta función dispara un evento asincrono manejado desde el módulo de javcascript asociado a este archivo html:
var uploaderFile = $scope.uploaderFile = new FileUploader();
uploaderFile.filters.push({
name: 'extension',
fn: function(item, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|tiff|tif|'.indexOf(type) !== -1;
}
});
uploaderFile.filters.push({
name: 'bytes',
fn: function(item, options) {
return $scope.selectImage(item);
}
});
$scope.fileChanged = function() {
function listSuccess(response) {
$scope.auth = angular.copy($scope.resetObj);
$scope.uploaderFile.queue = angular.copy($scope.resetList);
$scope.showMessegerExit = true;
$timeout(function() {
$scope.showMessegerExit = false;
}, TIME_ERROS);
$scope.file = null;
$scope.spinnerRequestAutorization = false;
}
function listError(response) {
$scope.auth = angular.copy($scope.resetObj);
$scope.uploaderFile.queue = angular.copy($scope.resetList);
$scope.authorizations.$setPristine();
$scope.showMessegerERROR = true;
$timeout(function() {
$scope.showMessegerERROR = false;
}, TIME_ERROS);
$scope.spinnerRequestAutorization = false;
}
for (var i = 0; i < $scope.uploaderFile.queue.length; i++) {
$scope.fileList.push($scope.uploaderFile.queue[i]._file);
}
$scope.isUploadingFile = true;
$scope.spinnerRequestAutorization = true;
var payload = {
file: $scope.fileList,
...
};
$servicioDeEjemplo.metodoDeEjemplo(payload).then(listSuccess, listError);
Cabe aclarar que $scope.resetObj = {}
y $scope.resetList = []
.
Una vez que los archivos son cargados y es diparada la función $scope.fileChanged()
, se genera el payload y se realiza la petición a la API mediante el servicio. La respuesta es manejada por la función listSuccess()
en caso de ser satisfactoria y, por listError()
, en caso de ser negativa. Funciones que emiten un alerta correspondiente y resetean el uploader.
En este momento deberíamos poder volver a cargar archivos en el input y realizar un nuevo envío. Pero eso es imposible, ya que el input no registra el evento click y no abre el popup del explorador de archivos, por lo que es imposible cargar más. Pareciera ser que fue desahilitado de alguna manera. Ocurre con todos los inputs de esa página.
Eliminé todo el código innecesario para pruebas y llegué a la conclusión de que ocurre cuando se realiza el click en el botón de envío.
Desde ya muchas gracias, y cualquier duda o falta de explicación, coméntenlo y les responderé a la brevedad. Saludos.