lite - Cargar un archivo con AngularJS y bluimp en la devolución de llamada exitosa de otra forma

jquery lite angularjs

Question

He seguido el siguiente tutorial para integrar el notorio cargador de archivos bluimp jQuery en mi proyecto AngularJS.

Después de algunas investigaciones, encontré que en la matriz de opciones, dentro del archivo jquery.fileuploader.js, hay una opción llamada autoUpload, que cuando se establece en true, carga el archivo automáticamente. Traté de desactivarlo (falso, indefinido), pero rápidamente descubrí que esto hace que la carga no funcione en absoluto, ni siquiera en el envío del formulario.

Necesito activar la carga manualmente, digamos dentro de otra devolución de llamada, o mediante un evento de clic. ¿Se puede hacer eso?

código:

app.directive("fileupload", function() {
    return {
      restrict: "A",
      scope: {
        done: "&",
        progress: "&",
        fail: "&",
        uploadurl: "=",
        customdata: "&"
      },
      link: function(scope, elem, attrs) {
        var uploadOptions;
        uploadOptions = {
          url: scope.uploadurl,
          dataType: "json"
        };
        if (scope.done) {
          uploadOptions.done = function(e, data) {
            return scope.$apply(function() {
              return scope.done({
                e: e,
                data: data
              });
            });
          };
        }
        if (scope.fail) {
          uploadOptions.fail = function(e, data) {
            return scope.$apply(function() {
              return scope.fail({
                e: e,
                data: data
              });
            });
          };
        }
        if (scope.progress) {
          uploadOptions.progress = function(e, data) {
            return scope.$apply(function() {
              return scope.progress({
                e: e,
                data: data
              });
            });
          };
        }
        return elem.fileupload(uploadOptions).bind("fileuploadsubmit", function(e, data) {
          return data.formData = {
                JSON.stringify(scope.customdata())
          };
        });
      }
    };
  });
app.service(''uploadService'', function(authService) {
    var initializeFn, processFn;
    initializeFn = function(e, data, process) {
      var upload;
      return upload = {
        message: '''',
        uploadurl: authService.getBaseUrl() + ''/applications/'',
        status: false
      };
    };
    processFn = function(e, data, process) {
      var file, upload;
      upload = {};
      upload.successData = [];
      upload.status = true;
      upload.error = false;
      if (process === ''done'') {
        upload.message = data.result.result;
        console.log(data);
        file = data.result.resume;
        upload.successData = {
          // name: file.name,
          // fullUrl: file.url,
          // thumbUrl: file.thumbnail_url
        };
      } else if (process === ''progress'') {
        upload.message = ''Uploading....!!!'';
      } else {
        upload.error = true;
        upload.message = ''Please try again'';
        console.log(e, data);
      }
      return upload;
    };
    return {
      process: processFn,
      initialize: initializeFn
    };

  });

app.controller(''applyCtrl'', function($scope, $routeParams, uploadService){
        $scope.model.formData = {};
        $scope.model.formData.job = $routeParams.jobId;
        $scope.uploadLayer = function(e, data, process) {
          return $scope.uploadReturn = uploadService.process(e, data, process);
        };
        $scope.customData = function() {
            return $scope.model.formData;
        };
        return $scope.uploadReturn = uploadService.initialize();

});

ver:

    <form class="applyForm" ng-submit="uploadLayer(e, data, ''progress'')">
        <fieldset>
            <div class="formLine">
                <div class="wideFieldContainer">
                    <input id="testUpload" type="file" fileupload customdata="customData()" name="resume" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, ''done'')" fail="uploadLayer(e, data, ''fail'')" progress="uploadLayer(e, data, ''progress'')" />
                </div>
            </div>
                    </fieldset>
             </form>

orden de carga de scripts:

...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-resource.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
    <script src="lib/bluimp/js/vendor/jquery.ui.widget.js"></script>
    <script src="lib/bluimp/js/jquery.piframe-transport.js"></script>
     <script src="lib/bluimp/js/jquery.fileupload.js"></script>   
</body>
</html>

Answer 1

Blueimp tiene disponible una versión AngularJS de jQuery File Upload.

Incluye una directiva fileUpload y un FileUploadController con un método submit() que puede llamar manualmente.

Puede ver una versión funcional en http://blueimp.github.io/jQuery-File-Upload/angularjs.html .

Una cosa a la que debe prestar atención: asegúrese de cargar todos los archivos .js del ejemplo en el orden correcto para evitar problemas (consulte la fuente de la página de ejemplo).

¡Espero que ayude!

ACTUALIZAR DESPUÉS DE SU COMENTARIO:

Al utilizar la versión AngularJS de jQuery File Upload, se crea una etiqueta de formulario con el atributo de file-upload como este:

<!-- Create a file upload form with options passed in from your scope -->
<form data-file-upload="options" data-ng-controller="YourController">

    <!-- This button will trigger a file selection dialog -->
    <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
        <span>Add files...</span>
        <input type="file" name="files[]" multiple="" ng-disabled="disabled">
    </span>

    <!-- This button will start the upload -->
    <button type="button" class="btn btn-primary start" data-ng-click="submit()">
        <span>Start upload</span>
    </button>

<form>

Luego, en su controlador puede asignar las opciones para la Carga de archivos jQuery de esta manera:

angular.module(''yourModule'')
    .controller(''YourController'', [$scope, function($scope){

        // Options you want to pass to jQuery File Upload e.g.:
        $scope.options = {
            maxFileSize: 5000000,
            acceptFileTypes: /(/.|//)(gif|jpe?g|png)$/i
        };
    }]);

Puede asignar el manejador submit() a cualquier atributo ng-click siempre que esté dentro del formulario (y así pueda acceder al método).

Avíseme si necesita ayuda adicional ...

CÓDIGO DE MUESTRA ADICIONAL PARA EL CALLBACK DE ÉXITO:

Si necesita ejecutar una función de devolución de llamada después de que se hayan completado todas las cargas, puede escuchar el evento de descarga de fileuploadstop que se transmite por Blueimp:

// Listen to fileuploadstop event
$scope.$on(''fileuploadstop'', function(){

    // Your code here
    console.log(''All uploads have finished'');
});

¡Espero que ayude!