Tuesday, 11 April, 2017 UTC

File Uploads in Angular with a Node and Hapi Backend

File Uploads in Angular with a Node and Hapi Backend

Summary

In this article, we will talk about how to handle file uploads with Angular. We will create an images uploader that allow user to upload single or multiple images file by drag and drop or select file dialog.
We will then upload the selected images and display them accordingly. We will also learn to filter the upload file type, for example, we only allow images, do not allow file type like PDF.
  • Sourcecode: https://github.com/chybie/ng-musing/tree/master/src/app/file-upload
  • Demo: https://ng-musing.firebaseapp.com/file-upload
File Upload UI & API
File upload consists of two parts: the UI (front-end) and the API (back-end). We will be using Angular to handle the UI part. We need a backend application to accept the uploaded files. You may follow the backend tutorials or download and run either one of these server side application to handle file upload for your backend:-
  • File upload with Hapi.js: https://scotch.io/bar-talk/handling-file-uploads-with-hapi-js, or
  • File upload with Express + Multer: https://scotch.io/tutorials/express-file-uploads-with-multer, or
  • Switch to any cloud solution of your choice (Amazon S3, Google Drive, etc).
We will be using File upload with Hapi.js as our backend throughout this articles. We will also learn the tricks to enable fake upload on the front-end.
File Upload Component HTML
Alright, let's start creating our Angular file upload component.
<!-- page-file-upload.component.html -->

<div>
  <!--UPLOAD-->
  <form #f="ngForm" enctype="multipart/form-data" novalidate 
    *ngIf="currentStatus === STATUS_INITIAL || currentStatus === STATUS_SAVING">
    <h1>Upload images</h1>
    <div class="dropbox">
      <input type="file" multiple
        [name]="uploadFieldName" (change)="filesChange($event.target.name, $event.target.files)" 
        [disabled]="currentStatus === STATUS_SAVING" accept="image/*" #photos>
      <p *ngIf="currentStatus === STATUS_INITIAL">
        Drag your file(s) here to begin<br>
        or click to browse
      </p>
      <p *ngIf="currentStatus === STATUS_SAVING">
        Uploading {{ photos.files.length }} files... 
      </p>
    </div>
  </form>
</div>
Notes:-
  1. Our upload form will have a few statuses: STATUS_INITIAL, STATUS_SAVING, STATUS_SUCCESS, STATUS_FAILED, the variable name is pretty expressive themselves.
  2. We will display the upload form when the status is initial or saving.
  3. The form attribute enctype="multipart/form-data" is important. To enable file upload, this attribute must be set. Learn more about enctype here.
  4. We have a file input <input type="file" /> to accept file upload. The property multiple indicate it's allow multiple file upload. Remove it for single file upload.
  5. We will handle the file input change event. Whenever the file input change (someone drop or select files), we will trigger the filesChange function and pass in the control name and selected files $event.target.files, and then upload to server.
  6. We limit the file input to accept images only with the attribute accept="image/*".
  7. The file input will be disabled during upload, so user can only drop / select files again after upload complete.
  8. We set a template variable #photos to the file input. This gives us a reference to the file input control. Later, you can see we use the photos variable in displaying number of files uploading Uploading {{ photos.files.length }} files....
Style our File Upload Component
Now, that's the interesting part. Currently, our component look like this:
We need to transform it to look like this:
Let's style it!
/* page-file-upload.component.css */

.dropbox {
    outline: 2px dashed grey; /* the dash box */
    outline-offset: -10px;
    background: lightcyan;
    color: dimgray;
    padding: 10px 10px;
    min-height: 200px; /* minimum height */
    position: relative;
    cursor: pointer;
}

.dropbox:hover {
    background: lightblue; /* when mouse over to the drop zone, change color */
}

input[type="file"] {
    opacity: 0; /* invisible but it's there! */
    width: 100%;
    height: 200px;
    position: absolute;
    cursor: pointer;
}

.dropbox p {
    font-size: 1.2em;
    text-align: center;
    padding: 50px 0;
}
With only few lines of css, our component looks prettier now.
Notes:-
  1. We make the file input invisible by applying opacity: 0 style. This doesn't hide the file input, it just make it invisible.
  2. Then, we style the file input parent element, the dropbox css class. We make it look like a drop file zone surround with dash.
  3. Then, we align the text inside dropbox to center.
File Upload Component Code
Let's proceed to code our component class.
// page-file-upload.component.ts

import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service'; // we will create this next!

@Component({
  selector: 'page-file-upload',
  templateUrl: './page-file-upload.component.html',
  styleUrls: ['./page-file-upload.component.css']
})
export class PageFileUploadComponent {

  uploadedFiles = [];
  uploadError;
  currentStatus: number;
  uploadFieldName = 'photos';

  readonly STATUS_INITIAL = 0;
  readonly STATUS_SAVING = 1;
  readonly STATUS_SUCCESS = 2;
  readonly STATUS_FAILED = 3;

  constructor(private _svc: FileUploadService) {
    this.reset(); // set initial state
  }

  filesChange(fieldName: string, fileList: FileList) {
    // handle file changes
    const formData = new FormData();

    if (!fileList.length) return;

    // append the files to FormData
    Array
      .from(Array(fileList.length).keys())
      .map(x => {
        formData.append(fieldName, fileList[x], fileList[x].name);
      });

    // save it
    this.save(formData);
  }

  reset() {
    this.currentStatus = this.STATUS_INITIAL;
    this.uploadedFiles = [];
    this.uploadError = null;
  }

  save(formData: FormData) {
    // upload data to the server
    this.currentStatus = this.STATUS_SAVING;
    this._svc.upload(formData)
      .take(1)
      .delay(1500) // DEV ONLY: delay 1.5s to see the changes
      .subscribe(x => {
        this.uploadedFiles = [].concat(x);
        this.currentStatus = this.STATUS_SUCCESS;
      }, err => {
        this.uploadError = err;
        this.currentStatus = this.STATUS_FAILED;
      })
  }
}
Notes:-
  1. Later on, we will call the Hapi.js file upload API to upload images, the API accept a field call photos. That's our file input field name.
  2. We handle the file changes with the filesChange function. FileList is an object returned by the files property of the HTML element. It allow us to access the list of files selected with the element. Learn more [here]((https://developer.mozilla.org/en/docs/Web/API/FileList).
  3. We then create a new FormData, and append all our photos files to it. FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values. Learn more here.
  4. The save function will call our file upload service (hang on, we will create the service next!). We also set the status according to the result.
File Upload Service 
// file-upload.service.ts

import { Injectable } from '@angular/core';
import { Http, RequestOptionsArgs, Headers } from '@angular/http';

@Injectable()
export class FileUploadService {

    baseUrl = 'http://localhost:3001'; // our local Hapi Js API

    constructor(private _http: Http) { }

    upload(formData) {
        const url = `${this.baseUrl}/photos/upload`;
        return this._http.post(url, formData)
            .map(x => x.json())
            .map((x: any[]) => x
          // add a new field url to be used in UI later
                .map(item => Object
                    .assign({}, item, { url: `${this.baseUrl}/images/${item.id}` }))
            );
    }
}
Nothing much, the code is pretty expressive itself. We upload the files, wait for the result, map it accordingly.
Now wire up your component and service to module, usually app.module.ts, and run it.
Display Success and Failed Result
We can upload the files successfully now. However, there's no indication in UI. Let's update our HTML.
<!-- page-file-upload.component.html -->
<div>
  <!--UPLOAD-->
  ...

  <!--SUCCESS-->
  <div class="margin-20" *ngIf="currentStatus === STATUS_SUCCESS">
    <h2>Uploaded {{ uploadedFiles.length }} file(s) successfully.</h2>
    <p>
      <a href="javascript:void(0)" (click)="reset()">Upload again</a>
    </p>
    <ul class="list-unstyled">
      <li *ngFor="let item of uploadedFiles">
        <img [src]="item.url" class="img-responsive img-thumbnail" 
          [alt]="item.originalName">
      </li>
    </ul>
  </div>

  <!--FAILED-->
  <div class="margin-20" *ngIf="currentStatus === STATUS_FAILED">
    <h2>Uploaded failed.</h2>
    <p>
      <a href="javascript:void(0)" (click)="reset()">Try again</a>
    </p>
    <pre>{{ uploadError | json }}</pre>
  </div>
</div>
Notes:-
  1. Display the uploaded image when upload successfully.
  2. Display the error message when upload failed.
Fake the Upload in Front-end
If you are lazy to start the back-end application (Hapi, Express, etc) to handle file upload. Here is a fake service to replace the file upload service.
// file-upload.fake.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class FileUploadFakeService {

    upload(formData: any) {
        const photos: any[] = formData.getAll('photos');
        const promises = photos.map((x: File) => this.getImage(x)
            .then(img => ({
                id: img,
                originalName: x.name,
                fileName: x.name,
                url: img
            })));
        return Observable.fromPromise(Promise.all(promises));
    }

    private getImage(file: File) {
        return new Promise((resolve, reject) => {
            const fReader = new FileReader();
            const img = document.createElement('img');

            fReader.onload = () => {
                img.src = fReader.result;
                resolve(this.getBase64Image(img));
            }

            fReader.readAsDataURL(file);
        })
    }

    private getBase64Image(img) {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        const dataURL = canvas.toDataURL('image/png');

        return dataURL;
    }
}
Came across this solution in this Stackoverflow post. Pretty useful. My online demo is using this service.
Basically, what the code do is read the source, draw it in canvas, and save it as data url with the canvas toDataURL function. Learn more about canvas here.
If you realize, our fake service has a same public interface as the real file upload service, both has upload function and return list of files. This is important for the next step, swap the real file upload service with the fake one.
Swap the Real File Upload with the Fake Service
First you might think that to use the fake service, you need to register the fake service in module, and import it in our file upload component like how we do usually. However, there's a quicker way, with Angular dependency injection (DI). Let's look at our App module.
// app.module.ts

...
import { PageFileUploadComponent, FileUploadFakeService, 
  FileUploadService } from './file-upload';

@NgModule({
  ...
  providers: [
    // FileUploadService, // normally we do this, comment it, we do the below instead
    { provide: FileUploadService, useClass: FileUploadFakeService }, // we can do this instead

  ],
  ...
})
export class AppModule { }
With this, you don't need to change your component code, stop your backend API, refresh the browser, you should see our app is still working, calling fake service instead.
In short, Providers: [FileUploadService] is the short form of Providers: [{ provide: FileUploadService, useClass: FileUploadService }]. Therefore, as long as we have another class with similar interface, we can swap it easily.
Angular DI is powerful. We'll leave that for another post.
Summary
That's it. This is how you can handle file upload without using any 3rd party libraries and plugins in Angular. It isn't that hard right?
Happy coding!
The UI (Front-end)
  • Sourcecode: https://github.com/chybie/ng-musing/tree/master/src/app/file-upload
  • Demo: https://ng-musing.firebaseapp.com/file-upload
The API (Back-end)
  • File upload with Hapi.js: https://scotch.io/bar-talk/handling-file-uploads-with-hapi-js, or
  • File upload with Express + Multer: https://scotch.io/tutorials/express-file-uploads-with-multer, or
  • Switch to any cloud solution of your choice (Amazon S3, Google Drive, etc).

... more @ scotch.io

scotch.io