Angular 2 / Express file upload to server

Question

I am new to Angular2 and Express, and it is difficult for me to upload a file to the server. I have created a basic file loader in JS, PHP and HTML, but I can not get it to work with Angular2 and Express. Any help would be greatly appreciated. I am more looking for an answer to upload files / images to the server. :). If I go in the wrong direction, it might be easier to create a new simple project.

I'm currently trying to reproduce this in an angular-cli project:

https://github.com/coligo-io/file-uploader

Problem :
I think I'm stuck in receiving a sent request to express the code below. When I test this, I run ng build and then node server.js. I can select the file, but after selecting the file nothing happens when it should be uploaded to the server in the "uploads" directory.

App.Component.ts

import { Component, ElementRef, ViewChild, Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@Injectable()
export class AppComponent {
  title = 'app works!';

  @ViewChild('upload-btn') uploadbtn;
  @ViewChild('inputFile') inputFile:ElementRef;
  @ViewChild('progressBar') progressBar;

  constructor(private http: Http, private e1: ElementRef){}

  /* When button is clicked open input */
  upload(){
    console.log("clicked");
    this.inputFile.nativeElement.click();
  } // end of upload

  /* Process input form */
  sendToServer(){
      // Get form input
      let inputFile: HTMLInputElement = this.inputFile.nativeElement;

      let fileCount: number = inputFile.files.length;

      let formData = new FormData();

      console.log("File Count: " + fileCount);

      if( fileCount > 0 ){
        for(let i = 0; i < fileCount; i++){
          console.log("Count: " + i);
          formData.append('uploads[]', inputFile.files.item(i), inputFile.files.item(i).name);
        }
        console.log("Form Data: " + formData);

        this.http.post('http:/localhost:3000/upload', formData);
        console.log("file uploaded");
      }

  } // end of send to server

}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <span class="glyphicon glyphicon-cloud-upload"></span>
          <h2>File Uploader</h2>
          <h4>coligo.io</h4>
          <div class="progress">
            <div #progressBar class="progress-bar" role="progressbar"></div>
          </div>
          <button (click)="upload()" class="btn btn-lg upload-btn" type="button">Upload File</button>
        </div>
      </div>
    </div>
  </div>
</div>

<input #inputFile  (change)="sendToServer()" id="upload-input" type="file" name="uploads[]" multiple="multiple"><br/>

Server.js

var express = require('express');
var app = express();
var path = require('path');
var formidable = require('formidable');
var fs = require('fs');

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function(req, res){
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.post('/upload', function(req, res){
  console.log("Server Hit");
  // create an incoming form object
  var form = new formidable.IncomingForm();

  // specify that we want to allow the user to upload multiple files in a single request
  form.multiples = true;

  // store all uploads in the /uploads directory
  form.uploadDir = path.join(__dirname, '/uploads');

  // every time a file has been uploaded successfully,
  // rename it to it orignal name
  form.on('file', function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name));
  });

  // log any errors that occur
  form.on('error', function(err) {
    console.log('An error has occured: \n' + err);
  });

  // once all the files have been uploaded, send a response to the client
  form.on('end', function() {
    res.end('success');
  });

  // parse the incoming request containing the form data
  form.parse(req);

});

var server = app.listen(3000, function(){
  console.log('Server listening on port 3000');
});

File structure for attempt 2

Thanks for the help. I really appreciate that.

Answer 1

You need a subscriberequest in angular

eg.

this.http.post('http:/localhost:3000/upload', formData)
    .subscribe();