El ide utilizado es webstorm 10 en el cual he creado un nuevo proyecto utilizando las template angularjs que trae este ide (también se puede utilizar el generador yoeman para este fin), le he añadido la dependencia del modulo para subir archivos tanto en el frontend como en el backend:
Todos estos paquetes estan en bower para su descarga he integración en nuestra aplicación.
La estructura del proyecto seria esta:
- angularjs - angular-file-upload@1.1.5
- nodejs - express@4.1.2
Todos estos paquetes estan en bower para su descarga he integración en nuestra aplicación.
La estructura del proyecto seria esta:
Este el archivo server.js:
/**
* Created by Negrero on 30/03/2015.
*/
var express=require("express");
var multer=require('multer');
var app=express();
var done=false;
/*configure the multer*/
app.use(
multer(
{dest:'./uploads/',rename:function(fieldname,filename){
return filename+Date.now();
},
onFileUploadStart:function(file){
console.log(file.fieldname+'is starting....')
},
onFileUploadComplete: function(file){
console.log(file.fieldname+' uploaded to '+file.path);
done=true
}
}));
app.use(express.static('app'));
/*Handling routes*/
app.get('/',function(req,res){
console.log("comenzando. .........");
res.send('/app/index.html');
});
app.post('/api/file',function(req,res){
if(done==true){
console.log(req.files);
res.end("File uploaded.");
}
});
/* Run the server */
app.listen(3000,function(){
console.log("working on port 3000")
});
Explicando el código:
- app.use ( multer ....) : configuracion de el modulo de descargas de ficheros, donde la carpeta de destino será './uploads/' y el nombre de fichero será filename+fecha de hoy.
- app.use(express(static('app') ...) : La ruta de la estructura de directorio que será publica en el arbol de directorios de nuestra aplicación.
- app.get : peticion en la que la respuesta será el index.html.
- app.post: utilizando las peticiones REST llamando a la ruta /api/file con el metodo post subiremos nuestro fichero/s.
- app.listen (3000......): nuestra aplicacion estará escuchando en el puerto 3000.
El archivo controlador de la vista uno 'view1.js':
'use strict';
angular.module('myApp.view1', ['ngRoute','angularFileUpload'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: '/api/file'
});
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
Solo decir que angularjs utiliza la inyeccion de dependencia por lo que pasamos a comentar el controlador de nuestra vista:
- module: inyectamos los modules que nos hace falta como son ngRouter para enlazar nuestras vistas con su controlador correspodiente y su ruta y angularFileUpload para la parte de la subida de archivos.
- config: la configuracion de la rutas.
- controller: nuestro controlador para la interaccion con nuestra vista donde inyectamos $scope y FileUploader, esta ultima la usmos como clase.
- CALLBACKS: son los estado de los ficheros mientras son subidos hasta el servidor.
Nuestra vista view1.html:
Explicando el codigo:
- Las directivas proporcionadas por angula-file-upload seran nv-file-select
- las directivas de angular seran: ng-show, ng-repeat, ng-disabled, ng-style
- El tema de esta vista es bootstrap asi como los iconos
