FileStack Component In Angular

Motivation

Recently I had an opportunity to work on an Angular application, where I needed to integrate FileStack and I have gone through a few Stack overflow posts (https://stackoverflow.com/questions/43459805/filestack-with-angular-2) regarding FileStack and decided to write and FileStack Component in Angular.

Overview

FileStack is a powerful service for uploading the file to a website or mobile app. It enables us to upload and store large files, transform and manipulate images and other file types, and deliver that content with festinant speed, responsively, across all types of desktop or mobile devices. It also allows integrating more than 25 of the world’s leading cloud drives.

There is a guideline under file stack doc “How can I integrate FileStack into my AngularJS application?” to integrate FileStack in AngularJS application.

Angular Component combines the AngularJS Directive, Controller, and Scope. In this article, we will learn how to create/use the FileStack component in Angular.

Pre-Requisites

Getting Ready

Step 1: Installing Node JS.

Please refer to this link to download and install Node.js

Step 2: Installing Angular CLI.

Please refer to this link to install Angular CLI

Generating Angular App

Follow the following steps to generate an Angular app:

Step 1: Run the following command to generate an Angular app:

Step 2: Go to ng-filestack folder and run the following command to run the application:

Step 3: Navigate to http://localhost:4200/ to the initial output:

Including  FileStack Library

Add the following code in application index.html:

Creating Litteral

Let’s create litterals to define the input format accepted by FileStack Component.

Do the following steps :

Step 1: Create providers folder under src folder.

Step 2: Create litterals folder under providers folder.

Step 3: Create app-litterals.ts file under litterals folder and add the following code.

Creating Service

Let’s create service and define FileStack configuration with getter and setter methods.

Follow the below steps :

Step 1: Create a services folder under providers folder.

Step 2: Create app-config.services.ts and add the following code:

Creating FileStack Component

Let’s create FileStack Component.

Follow the  steps :

Step 1: Create filestack.ts under  app/feature/filestack folder and add the following code:

I have added  @Input (data-accept) to accept the file format to be supported by FileStack and @Output to emit output once file upload is completed.

onFileStackFieldClick method is to initialize the FileStack on click on FileStack element.

ngOnDestroy to destroy the FileStack in case we are using multiple instances of file stack.

Step 2: Create filestack.html and add the following code:

Importing Component And Service To App Module

Modify app.module.ts to import the Component and Service.

Do the following steps :

Step 1: Import AppConfigService and FileStackComponent.

Step 2: Add Component in declarations.

declarations: [ AppComponent, FileStackComponent]

Step 3: Add Service to providers.

providers: [AppConfigService]

Using FileStack In App

Let’s use FileStack Component in app component.

Step 1: Open app.component.html and add the following code :

In the above code, I have used FileStack Component (<file-stack>) with data-accept as “input” and complete as “output”. data-accept value is getting from AppLitteralsConfig and the complete event is being handled at AppComponent.

Step 2: Open app.component.ts and replace it with the following code :

In the above code, I have handled FileStack output (complete) event and pushing record in an array to bind at HTML.

Step 3: Run your application and you will see the following output on click on the Upload File button:

Integrating with Cloud Drives

To store files in Cloud Drives we need to pass could configuration/credentials to FileStack at the time of initialization using storeTo.

Let’s add s3 cloud configuration to file stack and files will get stored at s3 cloud drive.

Step 1: Open FileStack component and add the following code to get the s3 configuration from AppConfigService.

Step 2 : Add s3 configuration in storeTo.

How to get the demo app?

You can download ng-filestack demo application source code from GitHub.

Summary

In this article, we have learned and created FileStack component in Angular with Cloud Drives integration.

At WalkingTree we are excited about the possibilities that Angular brings in for the new age applications. Hope this article will save a good amount of time for you when you come across this kind of need.

If you want your thoughts or proof of concepts around Angular or any technology to be validated by the industry experts? We will be excited to guide you!

References

Related Posts

Leave a comment

Translate »
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.