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…
  • 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)…
  • 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.

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

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.

!– —

div

!–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”

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

Comments are closed, but trackbacks and pingbacks are open.