Angular2 server-side-listener per i caricamenti di file

Question

In un progetto CLI Angular2, ho implementato il pulsante di caricamento this da Vaadin. L'interfaccia utente del pulsante funziona, ma non so come farlo effettivamente caricare un file ovunque.

ho continuare a trovare soluzioni su Server Express che attende il caricamento di file, Multer o server del nodo, e io veramente non hanno idea di come scrivere un tale server, dove metterlo, come avviarlo , come accedervi, ecc. Ho pensato che qualcosa di banale come il caricamento di file dovrebbe essere più facile da ottenere, ma sembra non esserlo.

Che cos'è una soluzione semplice da implementare lungo il lato Angular2 in modo che il pulsante effettivamente carichi i file da qualche parte in modo da poterli scaricare in seguito?

Answer 1

Trovato la soluzione nel repository ng2-uploader e adattata per funzionare con Vaadin Upload.

component.html

<div *ngIf="newName.valid"> 
      <vaadin-upload 
        target="http://localhost:10050/upload" 
      </vaadin-upload> 
    </div> 

server.js

'use strict'; 

const Hapi  = require('hapi'); 
const Inert  = require('inert'); 
const Md5   = require('md5'); 
const Multiparty = require('multiparty'); 
const fs   = require('fs'); 
const path  = require('path'); 
const server  = new Hapi.Server(); 

server.connection({ port: 10050, routes: { cors: true } }); 
server.register(Inert, (err) => {}); 

const upload = { 
    payload: { 
    maxBytes: 209715200, 
    output: 'stream', 
    parse: false 
    }, 
    handler: (request, reply) => { 
    const form = new Multiparty.Form(); 
    form.parse(request.payload, (err, fields, files) => { 
     if (err) { 
     return reply({status: false, msg: err}); 
     } 

     let responseData = []; 

     files.file.forEach((file) => { 
     let fileData = fs.readFileSync(file.path); 

     const originalName = file.originalFilename; 

     const generatedName = Md5(new Date().toString() + 
      originalName) + path.extname(originalName); 

     const filePath = path.resolve(__dirname, 'uploads', 
      originalName); 

     fs.writeFileSync(filePath, fileData); 
     const data = { 
      originalName: originalName, 
      generatedName: generatedName 
     }; 

     responseData.push(data); 
     }); 

     reply({status: true, data: responseData}); 
    }); 
    } 
}; 

const uploads = { 
    handler: { 
    directory: { 
     path: path.resolve(__dirname, 'uploads') 
    } 
    } 
}; 

server.route([ 
    { method: 'POST', path: '/upload',   config: upload }, 
    { method: 'GET', path: '/uploads/{path*}', config: uploads } 
]); 

server.start(() => { 
    console.log('Upload server running at', server.info.uri); 
}); 

e un bonus per chi ha bisogno server.js in esecuzione all'avvio this is an awesome solution testato e funzionante.