Angular Application Server Cross Origin File Upload Express Angular Cors File Upload

Creating a File Upload Component in Angular (Including Backend)

Creating file-upload components tin can be quite difficult.

Not only because you need to deal with files in JavaScript. Likewise, because yous need an API to test against before you tin can really start coding.

In this tutorial, we will learn how to practice both.

This is an affiliate link. We may receive a commission for purchases made through this link.

Outset, we volition create a uncomplicated node.js express server with simply one road to have file uploads.

Later, we will create an angular application from scratch and build a beautiful file-upload component using the angular material ui-component-library.

Hither is what the final result will look like:

angular-files-uploading

Ready?

Let'due south starting time coding!

Creating the Express server for the file upload

Before nosotros can start writing our angular file-uploader, we demand to have an API to upload to right?

app-architecture-upload

In this tutorial, we are going to create a elementary node.js server using express, that allows files to be uploaded in the multipart-format.

Setting up a new project

To fix a new server project, create a new directory and initialize a new project using the

command. It will ask you for some information. You lot can pass it in or but hit enter.

We will besides need ii JavaScript files. Create the following files in the projection directory:

server.js upload.js

External dependencies

Our server will have 3 external dependencies.

The offset one is evidently limited. Limited is a framework, that makes creating API very piece of cake. To install limited, you can employ this command

npm install express --salve

Because nosotros want to access the API from an angular application, the server needs to allow cross-origin requests. Therefore we are going to use a simple module called CORS. To install it, type:

Likewise, limited itself is not very proficient at agreement forms. Because we will be uploading our files in the multipart/form-data format, nosotros need to exist able to parse this format. The library "formidable" does this and is quite easy to apply. Install formidable using this command:

npm install formidable --relieve

Setting up a basic Express server

Get-go, we need to create a bones limited server in the server.js file. This part looks always the same and consists of only 3 lines.

server.js

const limited = require('express')  const server = limited()  server.heed(8000, () => {   console.log('Server started!') })

This is already a working express server. Although it is not doing anything useful, we could start it using the

command.

Enabling CORS

To be able to access our API from an angular application, nosotros demand to enable cors. To practice so, we first need to crave CORS.

server.js

const cors = require('cors')

Next, we configure it to let any domain by creating an pick-object.

server.js

var corsOptions = {   origin: '*',   optionsSuccessStatus: 200, }

Finally, we tell limited to use the cors-middleware with our configuration.

server.js

server.use(cors(corsOptions))

Registering the upload route

Afterward, we demand to configure a route for our file upload.

For that, nosotros crave our upload.js file and annals a road with the HTTP-post method.

server.js

const upload = crave('./upload') server.mail('/upload', upload)

Now we are done with the server.js file. Information technology should await like this by now:

server.js

const express = require('limited') const upload = require('./upload') const cors = crave('cors')  const server = express()  var corsOptions = {   origin: '*',   optionsSuccessStatus: 200, }  server.apply(cors(corsOptions))  server.post('/upload', upload)  server.mind(8000, () => {   panel.log('Server started!') })

Implementing the upload road

Allow's start implementing the upload functionality. We volition place information technology into the upload.js file.

First, we need to crave a class called IncomingForm from the "formidable" library.

upload.js

const IncomingForm = require('formidable').IncomingForm

Subsequently that, we need to export the callback office, we are using in our server.js to register the road. This function will be called, every time somebody hits the '/upload' URL.

This is an chapter link. We may receive a commission for purchases made through this link.

This callback gives usa a request-object (req), that stores data nigh the request that hit the route.

We likewise become a response-object (res). We can use this object, to transport dorsum a response.

upload.js

module.exports = function upload(req, res) {}

Within that method, nosotros create a new form.

upload.js

var form = new IncomingForm()

We then register callbacks on that form. The first callback is called for every file in the form:

upload.js

form.on('file', (field, file) => {   // Exercise something with the file   // e.grand. relieve information technology to the database   // you can access it using file.path })

The uploaded files are stored in a temporary directory somewhere on your machine. To practice something with them, you can copy them from there using the node.js file-arrangement API.

The second callback is called when the form is completely parsed. In this case, we want to send dorsum a success condition code.

upload.js

form.on('end', () => {   res.json() })

We then trigger the parsing of the form using:

upload.js

form.parse(req)

That's all we volition do for the upload functionality. It is not production ready, merely it will help us to test our upload-component of the angular awarding we actually want to build.

Hither is the consummate upload.js file:

upload.js

const IncomingForm = require('formidable').IncomingForm  module.exports = office upload(req, res) {   var class = new IncomingForm()    class.on('file', (field, file) => {     // Do something with the file     // e.g. salvage it to the database     // you lot tin admission it using file.path   })   form.on('end', () => {     res.json()   })   form.parse(req) }

Creating a new Angular file upload project

At present that we have a working API we tin code against, we can start creating the actual file-uploader.

For that, we first demand to create a new angular project. Nosotros are going to utilise the athwart-cli for this project. Create a new awarding past opening a command prompt at the desired location and type:

External dependencies

Because nosotros will need some complex ui-elements such as modal-windows, I decided to use the angular material library for this project. To install this library, employ this command:

npm install --save @angular/fabric @athwart/cdk

To make the css of this module bachelor in our app, nosotros need to import it into our app's global way.css file:

src/style.css

@import '~@athwart/material/prebuilt-themes/indigo-pink.css';

Also, we are using a flexbox-design for this. To brand flexbox a trivial chip easier to use with athwart there is a library called "@athwart/flex-layout". Install the library like this:

npm install --save @angular/flex-layout

Creating a feature module

To make our desired file-upload component equally re-usable as possible, I decided to bundle it into a separate feature module.

To create this module, but utilize this command:

ng generate module upload

Next, we will need to import a lot of external modules into this new module. For instance, we need to import all the angular material ui-components nosotros are going to utilise.

Here is how this looks like:

src/app/upload/upload.module.ts

import { NgModule } from '@athwart/core' import { CommonModule } from '@angular/common' import { UploadComponent } from './upload.component' import {   MatButtonModule,   MatDialogModule,   MatListModule,   MatProgressBarModule, } from '@angular/material' import { BrowserAnimationsModule } from '@athwart/platform-browser/animations' import { FlexLayoutModule } from '@angular/flex-layout' import { HttpClientModule } from '@angular/mutual/http'  @NgModule({   imports: [     CommonModule,     MatButtonModule,     MatDialogModule,     MatListModule,     FlexLayoutModule,     HttpClientModule,     BrowserAnimationsModule,     MatProgressBarModule,   ],   declarations: [UploadComponent],   exports: [UploadComponent], }) consign grade UploadModule {}

Notice, that we are besides exporting the UploadComponent, to make it bachelor outside of this module.

The file upload service

Before we can create the visuals of our file-uploader, we first need to implement the upload logic. This logic will be placed in the UploadService.

Create that service inside of the upload directory. Just employ this command:

ng generate service upload/upload

Within of that service, nosotros need to use the HttpClient, so we request it using dependency injection. Also, the service will comprise only one method chosen "upload".

src/app/upload/upload.service.ts

import { Injectable } from '@angular/core' import {   HttpClient,   HttpRequest,   HttpEventType,   HttpResponse, } from '@athwart/common/http' import { Field of study } from 'rxjs/Subject area' import { Observable } from 'rxjs/Observable'  const url = 'http://localhost:8000/upload'  @Injectable() export course UploadService {   constructor(private http: HttpClient) {}    public upload(     files: Set<File>   ): { [key: string]: { progress: Observable<number> } } {} }

This upload method will return a map of progress objects. One for every file to upload. This object contains an appreciable of type number because it contains the progress of the upload in percent.

src/app/upload/upload.service.ts

public upload(files: Set<File>):     { [key: string]: { progress: Observable<number> } } {      // this will exist the our resulting map     const status: { [key: string]: { progress: Observable<number> } } = {};      files.forEach(file => {       // create a new multipart-form for every file       const formData: FormData = new FormData();       formData.append('file', file, file.name);        // create a http-post asking and pass the form       // tell it to report the upload progress       const req = new HttpRequest('POST', url, formData, {         reportProgress: true       });        // create a new progress-subject field for every file       const progress = new Discipline<number>();        // ship the http-request and subscribe for progress-updates       this.http.request(req).subscribe(effect => {         if (event.blazon === HttpEventType.UploadProgress) {            // calculate the progress per centum           const percentDone = Math.circular(100 * effect.loaded / event.total);            // pass the pct into the progress-stream           progress.next(percentDone);         } else if (event instanceof HttpResponse) {            // Close the progress-stream if we get an reply form the API           // The upload is complete           progress.consummate();         }       });        // Salvage every progress-observable in a map of all observables       status[file.name] = {         progress: progress.asObservable()       };     });      // return the map of progress.observables     return condition;   }

Inside of the upload-method, we package every file into a form, create an HTTP-post-request and send away that request with the form as payload. We and then mind to the progress of every file-upload, calculate the upload-percentage and laissez passer it to the progress-stream of that file. Every file has a progress-observable that is returned in a map.

Finally, we demand to provide that service in our upload-module.

The file upload dialog

Our UploadComponent will only consist of a single push. This push button volition then open a dialog to upload the files. In this chapter, we are going to create this dialog.

Using angular textile, a dialog is just a component. So let's create this DialogComponent:

ng generate component upload/dialog

Adding files

The first matter we need to practise is to add together a file input element to our component.

src/app/upload/dialog/dialog.component.html

<input   blazon="file"   #file   mode="display: none"   (change)="onFilesAdded()"   multiple />

This input chemical element is the but manner to trigger a file-option card of the operating system. But because it is quite ugly, we are going to hibernate it using "display: none". We then trigger this input using a click-event from our component-logic.

To do that, we demand a reference to it in our component.ts. For that, we are using the ViewChild directive. Nosotros will also demand a identify to store the files we desire to upload.

For that, we create a Fix of Files.