# 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).
# 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>- Our upload form will have a few statuses: STATUS_INITIAL, STATUS_SAVING, STATUS_SUCCESS, STATUS_FAILED, the variable name is pretty expressive themselves.
- We will display the upload form when the status is initial or saving.
- The form attribute
enctype="multipart/form-data"is important. To enable file upload, this attribute must be set. Learn more about enctype here. - We have a file input
<input type="file" />to accept file upload. The propertymultipleindicate it's allow multiple file upload. Remove it for single file upload. - We will handle the file input
changeevent. Whenever the file input change (someone drop or select files), we will trigger thefilesChangefunction and pass in the control name and selected files$event.target.files, and then upload to server. - We limit the file input to accept images only with the attribute
accept="image/*". - The file input will be disabled during upload, so user can only drop / select files again after upload complete.
- We set a template variable
#photosto the file input. This gives us a reference to the file input control. Later, you can see we use thephotosvariable in displaying number of files uploadingUploading {{ 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;
}Notes:-
- We make the file input invisible by applying
opacity: 0style. This doesn't hide the file input, it just make it invisible. - Then, we style the file input parent element, the
dropboxcss class. We make it look like a drop file zone surround with dash. - Then, we align the text inside dropbox to center.
# File Upload Component Code
// 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;
})
}
}
- 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. - We handle the file changes with the
filesChangefunction.FileListis 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). - We then create a new
FormData, and append all ourphotosfiles to it.FormDatainterface provides a way to easily construct a set of key/value pairs representing form fields and their values. Learn more here. - The
savefunction 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}` }))
);
}
}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>
- Display the uploaded image when upload successfully.
- 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;
}
}
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 { }
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.
