example - ng2-file-upload angular 6

integración del cargador de archivos para angularjs

Question

¿Existe un buen programa para subir archivos con buena integración (una directiva) para AngularJS?

Estoy buscando algo que sea fácil de diseñar y que admita arrastrar y soltar HTML5, etc.

Alguien probablemente dirá que es fácil usar un cargador existente e integrarlo en AngularJS; a eso le diré: si es fácil, alguien debería haberlo hecho ya.

Answer 1

De hecho, he rodado mi propio cargador una vez ... pero solo porque no me gustaron ninguno de los JQuery ya creados. Desafortunadamente eso es patentado y no puedo publicarlo en Internet ... pero ... Puedo mostrarte cómo usar casi cualquier plugin JQuery de Angular:

Alguien probablemente dirá que es fácil usar un cargador existente e integrarlo en AngularJS, a eso le diré: si es fácil, alguien debería haberlo hecho ya.

Supongamos que tengo un plugin jQuery que funciona seleccionando un div y llamando a pluginUploadCall() en él ...

app.directive(''myJqueryPluginUploader'', function() {
return {
restrict: ''A'',
link: function(scope, elem, attr, ctrl) {
// elem is a jQuery lite object
// or a jQuery object if jQuery is present.
// so call whatever plugins you have.
elem.pluginUploadCall();
}
};
});

Y así es como se usaría.

<div my-jquery-plugin-uploader></div>

Angular realmente se integra muy bien con jQuery, por lo que cualquier complemento que funcione en jQuery debería funcionar con bastante facilidad en Angular. El único truco viene cuando quieres mantener viva la Inyección de dependencia para que puedas mantener tu aplicación Angular comprobable. JQuery no es muy bueno en DI, por lo que es posible que tengas que saltar algunos aros.

Si querías hacer tu propia versión, puedo decirte que hice algo como esto:

app.directive(''customUploader'', function(){
return {
restrict: ''E'',
scope: {},
template: ''<div class="custom-uploader-container">Drop Files Here<input type="file" class="custom-uploader-input"/><button ng-click="upload()" ng-disabled="notReady">Upload</button></div>'',
controller: function($scope, $customUploaderService) {
$scope.notReady = true;
$scope.upload = function() {
//scope.files is set in the linking function below.
$customUploaderService.beginUpload($scope.files);
};
$customUploaderService.onUploadProgress = function(progress) {
//do something here.
};
$customUploaderService.onComplete = function(result) {
// do something here.
};
},
link: function(scope, elem, attr, ctrl) {
fileInput = elem.find(''input[type="file"]'');
fileInput.bind(''change'', function(e) {
scope.notReady = e.target.files.length > 0;
scope.files = [];
for(var i = 0; i < e.target.files.length; i++) {
//set files in the scope
var file = e.target.files[i];
scope.files.push({ name: file.name, type: file.type, size: file.size });
}
});
}
});

Donde $customUploaderService sería un servicio personalizado que creará con Module.factory() que usa $http para publicar los archivos y verificar el progreso en el servidor.

Sé que es vago, y lo siento es todo lo que puedo proporcionar, pero espero que eso ayude.

EDITAR: la carga del archivo arrastrar y soltar es un truco de CSS, por cierto ... para Chrome y FF, lo que haces es ponerlo en un div que contiene ... luego haz algo como esto:

<div class="uploadContainer">Drop Files Here<input type="file"/></div>

div.uploadContainer {
position: relative;
width: 600px;
height: 100px;
}
div.uploadContainer input[type=file] {
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

... ahora cualquier cosa que sueltes en ese div se perderá realmente en la carga del archivo, y puedes hacer que div parezca lo que quieras.

Answer 2

He creado una directiva simple / light angular con polyfill para navegadores que no admiten HTML5 FormData aquí:

https://github.com/danialfarid/ng-file-upload

Puede enviar otro objeto modelo junto con el archivo al servidor. Aquí está la página de demostración:

http://angular-file-upload.appspot.com/

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>
<div ng-controller="MyCtrl">
<input type="text" ng-model="myModelObj">
<input type="file" ngf-select ng-model="files" >
</div>

controlador:

Upload.upload({
url: ''my/upload/url'',
data: {myObj: $scope.myModelObj},
file: $scope.files
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});

Answer 3

Puedes probar AngularJS.ngUpload .

Es una solución libre de HTML5 que utiliza un iFrame invisible para subir archivos. ¡Ya que no depende de HTML5, funciona a través del navegador!

Código de muestra:

<form action=''/server/upload/handler'' ng-upload="callbackFunction">
<!-- other form inputs goes here -->
<input type="file" name="anyEasyName" />
<input type="submit" class="upload-submit" value="Submit" />
</form>
<div>{{uploadReport}}</div>

Cualquier elemento html que admita un evento click puede usarse para enviar un formulario marcado con la directiva ngUpload, solo que dichos elementos deben estar marcados con la clase upload-submit css (como en el caso de la entrada [type = submit] anterior.

El siguiente ejemplo utiliza un estilo div para enviar el formulario.

<form action=''/server/upload/handler'' ng-upload="callbackFunction">
<!-- other form inputs goes here -->
<input type="file" name="anyEasyName" />
<div style="cursor: pointer; padding: 5px" class="upload-submit">Submit</div>
</form>
<div>{{uploadReport}}</div>

Puede hacer que su / server / upload / handler escuche una url válida, de modo que {{uploadReport}} se pueda usar para configurar el src de una etiqueta <img>, así:

<img ng-src={{uploadReport}} />

y ver la imagen cargada aparecer de inmediato!

El ngController para los ejemplos anteriores es:

var UploadCtrl = function ($scope) {
$scope.callbackFunction = function(contentOfInvisibleFrame) {
$scope.uploadReport = contentOfInvisibleFrame;
}
}

La directiva ngUpload se puede registrar con su módulo de aplicación AngularJS:

var mainApp = angular.module(''MainApp'', ["ngUpload", ...]);

y agregado a su documento como:

<html ng-app="MainApp">
</html>

AngularJS.ngUpload funciona en el contexto de un ngController; y tal puede tener tantos cargadores como sea posible en un solo ngController. Por ejemplo:

<form action=''/server/upload/handler'' ng-upload="callbackFunction1">
<!-- other form inputs goes here -->
<input type="file" name="anyEasyName" />
<input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport1}}
<form action=''/server/upload/handler'' ng-upload="callbackFunction2">
<!-- other form inputs goes here -->
<input type="file" name="anotherEasyName" />
<input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport2}}

ser atendido por:

var UploadCtrl = function ($scope) {
$scope.callbackFunction1 = function(contentOfInvisibleFrame) {
$scope.uploadReport1 = contentOfInvisibleFrame;
}
$scope.callbackFunction2 = function(contentOfInvisibleFrame) {
$scope.uploadReport2 = contentOfInvisibleFrame;
}
}

En http://ng-upload.eu01.aws.af.cm se puede encontrar una demostración de controlador de carga basada en NodeJS de esta directiva.

Se pueden encontrar los códigos de muestra de ASP.Net MVC y NodeJS en el sitio web del proyecto en github.com/twilson63/ngUpload/tree/master/examples

Espero que esto ayude.

Answer 4

Recientemente escribí una directiva que admite la carga de múltiples archivos nativos.

Ejemplo de uso:

<lvl-file-upload
auto-upload=''false''
choose-file-button-text=''Choose files''
upload-file-button-text=''Upload files''
upload-url=''http://localhost:3000/files''
max-files=''10''
max-file-size-mb=''5''
get-additional-data=''getData(files)''
on-done=''done(files, data)''
on-progress=''progress(percentDone)''
on-error=''error(files, type, msg)''/>

Puedes encontrar el código en github y la documentación en mi blog

Answer 5

Si quieres manejar varios archivos, prueba esto

jQuery File Upload Angularjs wrap del autor original (blueimp)

Creo que es el cargador más potente hasta ahora.