loop-modules/services/file-upload.service.ts

Shared modules for the Loop product suite.

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

/**
 * The service responsible for managing file-uploads to a remote server via XHR request
 * @author Sean Perkins <sean@meetmaestro.com | sean-perkins>
 *
 * @export
 * @class FileUploadService
 */
@Injectable()
export class FileUploadService {

    /**
     * Public observable event hook for listening for progress, success and failure on the upload
     *
     * @type {Observable<number>}
     * @memberOf FileUploadService
     */
    progress$: Observable<number>;

    private progressSource = new BehaviorSubject<number>(0);

    constructor() {
        this.progress$ = this.progressSource.asObservable();
    }

    /**
     * Handles an upload request to a server
     *
     * @param {string} url The location of the server to post the file to
     * @param {FormData} formData The file's form data properties
     *
     * @memberOf FileUploadService
     */
    upload(url: string, formData: FormData) {
        let xhr: XMLHttpRequest = new XMLHttpRequest();

        xhr.upload.onprogress = (event: any) => {
            let progress = Math.round(event.loaded / event.total * 100);
            this.progressSource.next(progress);
        }

        xhr.addEventListener('load', () => {
            this.progressSource.complete();
        }, false);

        xhr.addEventListener('error', (error: any) => {
            this.progressSource.error(error);
        }, false);

        xhr.open('POST', url, true);
        xhr.setRequestHeader('Access-Control-Allow-Origin', window.location.origin);
        xhr.send(formData);
    }
}