1

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.

1 respuesta 1

0

Respondo yo mismo la pregunta porque despues de unos días, un colega me hizo llegar la respuesta y quería dejar registro de la solución al problema, por si alguno lo tiene.

La cuestión radica en que, ni la función listSuccess(), ni en la función listError(), devuelven la variable isUploadingFile, nuevamente a false. Por lo que se debe agregar la línea

$scope.isUploadingFile = false;

dentro de las funciones listSuccess() y listError().

Espero que les sirva. Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.