cloak - $ http subir el progreso del archivo en AngularJS

ng-if

Question

¿Cómo puedo obtener un evento de ''progreso'' de mi solicitud POST de AngularJS $ http que está cargando una imagen? ¿Es posible hacer esto del lado del cliente o necesito que el servidor informe el progreso a medida que recibe los datos?

Answer 1

Aquí hay otra solución:

window.XMLHttpRequest = (function (orig) {
if (orig) {
var intercept = [],
result = function () {
var r = new orig();
if (r.upload) {
$(r).on(
''abort error load loadend loadstart progress'',
function (e) {
$(document).trigger(''upload.XHR'', e);
}
);
}
if (intercept.length) {
intercept[0].push({
request:r
});
}
return r;
};
result.grab = function (f) {
intercept.unshift([]);
f();
return intercept.shift();
};
return result;
}
return function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e1) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e2) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e3) {}
throw new Error("This browser does not support XMLHttpRequest.");
};
}(window.XMLHttpRequest));

Notas:

• AngularJS actualmente almacena una referencia a window.XMLHttpRequest como una variable XHR privada, luego la usa así: new XHR() . Dudo que esto cambie alguna vez, por lo que el código parecido a un calzo de arriba debería funcionar bien.

• Mozilla tiene algunas extensiones: XMLHttpRequest acepta argumentos opcionales. El código anterior no maneja esto, pero AngularJS no usa estas extensiones de todos modos.

• Uno de los posibles usos (si desea mostrar todas las solicitudes actuales y quizás implementar algún botón "Cancelar"):

$(document).on(''upload.XHR'', function (_e, e) {
switch (e.type) {
// do your thing here
}
});

• Otro posible uso:

var list = window.XMLHttpRequest.grab(function () {
// start one or more $http requests here, or put some code
// here that indirectly (but synchronously) starts requests
$http.get(...);
couchDoc.save();
couchDoc.attach(blob, ''filename.ext'');
// etc
});
list[0].request.upload.addEventListener(...);

• O bien, puede combinar ambos enfoques con algunas modificaciones al código anterior.

Answer 2

No creo que $ http.post () pueda usarse 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 el onprogress escucha en onprogress . Consulte AngularJS: estado de seguimiento de cada archivo que se carga simultáneamente para obtener ideas.

Answer 3

No creo que Angular tenga algo incorporado para manejar las subidas.

Creo que lo mejor es usar algo como jQuery File Upload . Una idea para una solución sería crear un Servicio que devuelva {progress:0} como predeterminado y luego, dentro de sí mismo, implementa la devolución de llamada de actualización de progreso de jQuery File Upload, que simplemente sigue actualizando el progreso. Gracias al enlace de Angular, el progreso de la carga estaría sincronizado.

angular.module(''myApp.services'', [])
.factory(''Uploader'', function() {
var uploaderService = {};
var status = { progress: 0 };
uploaderService.upload = function(inputEl) {
inputEl.fileupload({
/* ... */
progressall: function (e, data) {
status.progress = parseInt(data.loaded / data.total * 100, 10);
}
});
};
return uploaderService;
});

Answer 4

También puede usar la directiva simple / ligera angular-file-upload que se encarga de estas cosas. Es compatible con arrastrar y soltar, el progreso / cancelación de archivos y la carga de archivos para navegadores que no son HTML5 con FileAPI flash shim

<div ng-controller="MyCtrl">
<input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module(''myApp'', [''angularFileUpload'']);
var MyCtrl = [ ''$scope'', ''$upload'', function($scope, $upload) {
$scope.onFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var $file = $files[i];
$upload.upload({
url: ''my/upload/url'',
file: $file,
progress: function(e){}
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
}
}];

Answer 5

Usando puro angular:

function upload(data) {
var formData = new FormData();
Object.keys(data).forEach(function(key){formData.append(key, data[key]);});
var defer = $q.defer();
$http({
method: ''POST'',
data: formData,
url: <url>,
headers: {''Content-Type'': undefined},
uploadEventHandlers: { progress: function(e) {
defer.notify(e.loaded * 100 / e.total);
}}
}).then(defer.resolve.bind(defer), defer.reject.bind(defer));
return defer.promise;
}

y en otro lugar ...

// file is a JS File object
upload({avatar:file}).then(function(responce){
console.log(''success :) '', response);
}, function(){
console.log(''failed :('');
}, function(progress){
console.log(''uploading: '' + Math.floor(progress) + ''%'');
});

Answer 6

puede usar esto donde estoy usando la función angular simple para cargar el archivo y la variable $ scope.progressBar para verificar el progreso de la carga ...

$scope.functionName = function(files) {
var file = files[0];
$scope.upload = $upload.upload({
url: ''url'',
method: ''POST'',
withCredentials: true,
data: {type:''uploadzip''},
file: file, // or list of files ($files) for html5 only
}).progress(function(evt) {
console.log(''percent: '' + parseInt(100.0 * evt.loaded / evt.total));
$scope.progressBar = parseInt(100.0 * evt.loaded / evt.total);
}).success(function(data, status, headers, config) {
console.log(''upload succesfully...'')
}).error(function(err) {
console.log(err.stack);
})
}