Sharing Top Content from the Angular-sphere.

File Uploads in Angular with a Node and Hapi Backend ― Scotch

  • –UPLOAD–
    form #f=”ngForm” enctype=”multipart/form-data” novalidate
    *ngIf=”currentStatus === STATUS_INITIAL || currentStatus === STATUS_SAVING”
    h1Upload images/h1
    div class=”dropbox”
    input type=”file” multiple
    [name]=”uploadFieldName” $event.target.files)”
    [disabled]=”currentStatus === STATUS_SAVING” accept=”image/*” #photos
    p *ngIf=”currentStatus === STATUS_INITIAL”
    Drag your file(s) here to beginbr
    or click to browse
    /p
    p *ngIf=”currentStatus === STATUS_SAVING”
    Uploading {{ photos.files.length }} files…
    /p
    /div
    /form
    /div
    Notes:-
    Our upload form will have a few statuses: STATUS_INITIAL, STATUS_SAVING, STATUS_SUCCESS, STATUS_FAILED, the variable name is pretty expressive themselves.
  • dropbox:hover {
    background: lightblue; /* when mouse over to the drop zone, change color */
    }

    input[type=”file”] {
    opacity: 0; /* invisible but it’s there!

  • @Component({
    selector: ‘page-file-upload’,
    templateUrl: styleUrls: 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 (!

  • concat(x);
    this.currentStatus = this.STATUS_SUCCESS;
    }, err = {
    this.uploadError = err;
    this.currentStatus = this.STATUS_FAILED;
    })
    }
    }

    Notes:-
    Later on, we will call the Hapi.js file upload API to upload images, the API accept a field call photos.

  • service.ts

    import { Injectable } from ‘@angular/core’;
    import { Http, RequestOptionsArgs, Headers } from class FileUploadService {

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

    constructor(private _http: Http) { }

    upload(formData) {
    const url = return this.

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.

@K0YCHEV: File Uploads in Angular with a Node and Hapi Backend via @scotch_io #Angular #angularjs…

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.

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:-

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.

Alright, let’s start creating our Angular 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!

With only few lines of css, our component looks prettier now.

Let’s proceed to code our component class.

Nothing much, the code is pretty expressive itself. We upload the files, wait for the result, map it accordingly.

, and run it.

We can upload the files successfully now. However, there’s no indication in UI. Let’s update our HTML.

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.

Came across this solution in this Stackoverflow post. Pretty useful. My online demo is using this service.

function. Learn more about canvas here.

function and return list of files. This is important for the next step, swap the real file upload service with the fake one.

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.

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.

. 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.

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!

File Uploads in Angular with a Node and Hapi Backend ― Scotch

Comments are closed, but trackbacks and pingbacks are open.