javascript - ngprogress - Angularjs $ http y barra de progreso

progress bar javascript

Question

Necesito subir el archivo y uso $ http (este código es obtener de mi función .service ()):

sendFile: function (params) {
            return $http({method : ''post'',
                url : ''http://XXXXXXXXXXXXX/rest/file.json'',
                headers : { ''X-CSRF-Token'' : $cookies[''csrftoken'']},
                data : params
            })
        },

Ahora, para archivos pequeños y una buena línea no hay problema, pero con un archivo grande y / o una línea mala / lenta hay un problema de IU: el usuario no puede saber cuándo finalizará la carga. Necesito una barra de progreso.

Así que tengo una búsqueda en internet, pero no he encontrado una solución. ¿Hay alguna posibilidad de obtener algún progreso / notificación de $ http?

He intentado este código sin suerte:

ProfileService.sendFile(data)
                    .then(function(ret) {
                            var uri = ret.data.uri;
                            scope.content = "Upload finished";

                            scope.postForm.fid = ret.data.fid;
                            scope.postForm.buttonDisabled = false;
                        },
                        function(error) {
                            scope.postForm.showError = true;
                            scope.postForm.errorMsg = error.data;
                        },
                        function(progress) {
                            console.log("inside progress");
                            console.log(progress)
                        }
                    );

La función "progreso" nunca se llama.

Estoy usando angular 1.2.x

Gracias.

Answer 1

Puede usar la barra de carga angular . Funciona automáticamente para las solicitudes de $http y no necesita ninguna configuración excepto agregarlo como dependencia de la aplicación.

angular.module(''app'', [''angular-loading-bar'']); // that''s all

Answer 2

Puedes resolver esto ocultando / mostrando una barra de carga. Comience a mostrar la barra de carga una vez que se inicie la carga, y elimine la barra de carga cuando finalice la carga (en el controlador de éxito de la solicitud $ http ).

Creé un jsfiddle simple para que le muestre un ejemplo.
Estoy usando $timeout para simular una solicitud de $http .

Marcado de HTML:

<div ng-controller="MyCtrl">
    <!-- this can be an image if you want -->
    <p ng-show="loading">...LOADING...</p>

    <!-- Showing the status -->
    <p ng-hide="loading">{{status}}</p>
    <button type="button" ng-click="upload()">Do $http request</button>
</div>

Controlador Js:

function MyCtrl($scope, $timeout) {
    $scope.status = ''Not started'';
    $scope.loading = false;

    $scope.upload = function() {
        $scope.loading = true;
        // Simulating a http request with a timeout
        $timeout(function(){ 
            $scope.status = "Finished";
            $scope.loading = false;
        },3000);
    }
}

Para una demostración de cómo funciona esto, vea este violín .

Actualizar

Al aclarar en los comentarios, desea poder seguir el progreso de la carga por porcentaje. p.ej. Cuantos% hasta que termina la carga

Debería echarle un vistazo a esta publicación SO, donde esto ya se ha discutido.

De la respuesta aceptada:

No creo que se pueda usar $ http.post () para esto. En cuanto al lado del cliente, debería funcionar con un navegador HTML5, pero probablemente tendrá que crear su propio objeto XMLHttpRequest y onprogress oyente en onprogress . Consulte AngularJS: estado de seguimiento de cada archivo que se carga simultáneamente para obtener ideas.

Answer 3

Recomiendo encarecidamente ng-progress. Esto maneja múltiples solicitudes y, básicamente, muestra una pequeña barra de progreso para toda la actividad http.

http://victorbjelkholm.github.io/ngProgress/

Answer 4

Si no desea escribir show hide en cada método de http, entonces podemos crear una directiva simple usando $http.pendingRequests.length y eso es todo.

Siempre que tengamos alguna solicitud HTTP en progreso, se mostrará automáticamente.

app.directive(''loading'', [''$http'', function ($http) {
    return {
        restrict: ''A'',
        link: function (scope, elm, attrs) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };
            scope.$watch(scope.isLoading, function (v) {
                if (v) {
                    elm.show();
                } else {
                    elm.hide();
                }
            });
        }
    };
}]);

Y HTML

 <div data-loading>
   Please wait...
 </div>

Para más detalles ver esto

Answer 5

Simplemente puede usar los manejadores de eventos del servicio $ http

me gusta:

mainModule.service(''File'', function (Api) {

    var controller = ''files'';

    function File(data) {
        this.$data = data;
    }

    File.__proto__ = File.prototype = {
        upload: function (progress) {
            var fd = new FormData();
            fd.append(''file'', this.$data);
            return pack(''/upload'').post(fd, {
                transformRequest: angular.identity,
                uploadEventHandlers: {''progress'': progress},
                headers: {''Content-Type'': undefined}
            });
        }
    };

    return File;
    function pack(action) {
        return Api(controller + action);
    }
});

Api es un servicio para conectarse con la API del servidor.

$ data es el objeto de archivo de la entrada