Add files via upload

app.js

@@ -0,0 +1,36 @@
+var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var appRoutes = require('./routes/app');
+var fileRoutes = require('./routes/file');
+
+var app = express();
+
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'hbs');
+
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use(function(req, res, next) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
+  next();
+});
+
+app.use('/file',fileRoutes);
+app.use('/', appRoutes);
+
+app.use(function(req, res, next) {
+  res.render('index');
+});
+
+module.exports = app;

assets/app/app.component.css

@@ -0,0 +1,22 @@
+.header-section{
+    height: 80px;
+    line-height: 80px;
+    color: beige;
+    background-color: rgba(37, 35, 35, 0.337);
+    font-size: 24px;
+    padding-left: 20px;
+}
+
+.card{
+    background-color: white;
+    box-shadow:0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+    color:black;
+    margin: 20px;
+    padding: 10px;
+}
+
+.uploadList{
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}

assets/app/app.component.html

@@ -0,0 +1,49 @@
+<div class="container-fluid">
+    <div class="row header-section">
+        <span>Apni Storage</span>
+    </div>
+
+    <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-md-8">
+            <div class="row card">
+                <div class="col-sm-12">
+                    <h4>Upload Section</h4>
+                    <div id="fileSelector">
+                        <input type="file" name="fileUplaod" id="fileUpload"
+                        multiple ng2FileSelect [uploader]="uploader">
+                    </div>
+                    <div>
+                        <div class="row uploadList" *ngFor="let item of uploader.queue">
+                            <div class="col-sm-4">{{item.file.name}}</div>
+                            <div class="col-sm-4">
+                                <div class="progress">
+                                    <div class="progress-bar bg-success" 
+                                    [ngStyle]="{'width':item.progress+'%'}"></div>
+                                </div>
+                            </div>
+                            <div class="col-sm-4">
+                                    <button type="button" class="btn btn-dark" (click)="item.upload()">Upload</button>
+                                    <button type="button" class="btn btn-danger" (click)="item.remove()">Cancel</button>
+                            </div>
+                        </div>                        
+                    </div>
+                    <div class="row" *ngIf="uploader?.queue?.length > 0">
+                            <button type="button" class="btn btn-primary" (click)="uploader.uploadAll()">Upload All</button>
+                    </div>
+                </div>                
+            </div>
+
+            <div class="row card">
+                <h4>Downloads</h4>
+
+                <div class="row" *ngFor="let item of attachmentList; let i = index"
+                style="margin:10px;padding:5px;background-color:rgb(231, 229, 229); border-radius:5px; line-height:40px;">
+                    <div class="col-sm-7">{{item.originalname}}</div>
+                    <div class="col-sm-5" style="text-align:center;"><button type="button" class="btn btn-primary" (click)="download(i)">Download</button></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2"></div>
+    </div>
+</div>

assets/app/app.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { FileSelectDirective, FileUploader} from 'ng2-file-upload';
+import { FileService } from './file.service';
+import {saveAs} from 'file-saver';
+
+const uri = 'http://localhost:3000/file/upload';
+@Component({
+    selector: 'my-app',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css'],
+    providers:[FileService]
+})
+export class AppComponent {
+
+    uploader:FileUploader = new FileUploader({url:uri});
+
+    attachmentList:any = [];
+
+    constructor(private _fileService:FileService){
+
+        this.uploader.onCompleteItem = (item:any, response:any , status:any, headers:any) => {
+            this.attachmentList.push(JSON.parse(response));
+        }
+    }
+
+    download(index){
+        var filename = this.attachmentList[index].uploadname;
+
+        this._fileService.downloadFile(filename)
+        .subscribe(
+            data => saveAs(data, filename),
+            error => console.error(error)
+        );
+    }
+}

assets/app/app.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import {FileUploadModule} from 'ng2-file-upload';
+import { AppComponent } from "./app.component";
+
+import { HttpClientModule} from '@angular/common/http';
+
+@NgModule({
+    declarations: [AppComponent],
+    imports: [BrowserModule,FileUploadModule,HttpClientModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+
+}

assets/app/file.service.ts

@@ -0,0 +1,21 @@
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import { Injectable } from "@angular/core";
+import 'rxjs/Rx';
+import {Observable} from 'rxjs';
+
+
+@Injectable()
+
+export class FileService {
+
+    constructor(private _http:HttpClient){}
+
+    downloadFile(file:String){
+        var body = {filename:file};
+
+        return this._http.post('http://localhost:3000/file/download',body,{
+            responseType : 'blob',
+            headers:new HttpHeaders().append('Content-Type','application/json')
+        });
+    }
+}

assets/app/main.aot.ts

@@ -0,0 +1,9 @@
+import './polyfills';
+import { platformBrowser } from "@angular/platform-browser";
+import { enableProdMode } from "@angular/core";
+
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

assets/app/main.ts

@@ -0,0 +1,7 @@
+import './polyfills';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule(AppModule);

assets/app/polyfills.ts

@@ -0,0 +1,10 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+require('zone.js/dist/zone');
+if (process.env.ENV === 'production') {
+    // Production
+} else {
+    // Development
+    Error['stackTraceLimit'] = Infinity;
+    require('zone.js/dist/long-stack-trace-zone');
+}

bin/www

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+var app = require('../app');
+var debug = require('debug')('angular2-nodejs:server');
+var http = require('http');
+
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+var server = http.createServer(app);
+
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    return val;
+  }
+
+  if (port >= 0) {
+    return port;
+  }
+
+  return false;
+}
+
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}