Angular 2+ Serverless File Uploads

The Аngular framework is loved by millions of developers out there 💛 It’s used to build web, mobile, and native apps. Uploadcare can add up to the Angular experience with serverless file handling.

This guide covers integrating Angular 2+ with Uploadcare. By the end of the guide, you will have a working integration ready to receive files.

• Before We Begin
  • NodeJS
  • Uploadcare Account
• Step 1. Set Up Your Environment
• Step 2. Glue Angular and Uploadcare Together
• Step 3. Add File Uploader
• Step 4. Check Out Settings and Events

Let’s start by installing the framework and creating a new project. If you want to integrate the File Uploader into an existing project, skip the first step and navigate here.

Before We Begin

NodeJS

To begin, make sure you have NodeJS 8.х or 10.х installed. If you don’t, check out the NodeJS website for install guides.

Note, you can check your NodeJS version via the following CLI command:

node -v

Uploadcare Account

In case you don’t have an Uploadcare account, Sign Up for one. Once you get it, navigate to your dashboard to create a new project or discover API keys for an existing one. You will work with the Public API Key that points to a target project where the uploads will go to.

If you’re planning to upload non-image content, add billing info to your account settings.

Step 1. Set Up Your Environment

In the world of Angular, you perform common actions through Angular CLI. To install it, tell the Node Package Manager to get you a copy via CLI:

npm install -g @angular/cli

The -g option here allows you to skip installing Angular CLI every time you create a new project.

Now let’s create a new Angular project to use for integrating the uploader:

ng new uploadcare

This will create a new project subdirectory named “uploadcare” in your working dir. While creating the new project, Angular will load all of its dependencies (it may take some time) and prompt you for the info about features to include in the initial app project. You can simply go with defaults by hitting Enter.

You are now ready to see your project in action:

cd uploadcare
ng serve --open

A few moments later, a new browser tab will greet you with a message:

Step 2. Glue Angular and Uploadcare Together

Now that you have an Angular project, open your CLI in its directory.

If you’ve just been through the first step, stop the execution of ng serve using Ctrl+C.

We’re now ready to install Uploadcare Widget for Angular. Execute the following in your project’s directory:

npm install ngx-uploadcare-widget

This will get you the ngx-uploadcare-widget package from npm.

Once you’re done with the installation, import the widget into your project. In case of a new Angular project, you can open the file /src/app/app.module.ts in your favorite text editor and insert the following line:

import { UcWidgetModule } from 'ngx-uploadcare-widget';

Then include the module in the imports section of your project’s module, like this:

@NgModule({
  imports: [
    ...,
    UcWidgetModule,
  ],
  ...
})
...

If you are going with an existing project, then you’ll have to do the same in the part of your app where you want to use the integration. If you are unsure, stick with /src/app/app.module.ts.

That’s how app.module.ts should look like after your changes:

Step 3. Add File Uploader

You are now ready to add the widget to some page and try using it.

Insert the following lines in one of the something.component.html files of your project (or in /src/app/app.component.html in case of a new project):

<ngx-uploadcare-widget
  images-only="true"
  public-key="YOUR_PUBLIC_KEY">
</ngx-uploadcare-widget>

Note, If you want to use the widget without any default markup, you may prefer to stick with the following element:

<ngx-uploadcare-widget-custom
  images-only="true"
  public-key="YOUR_PUBLIC_KEY">
</ngx-uploadcare-widget-custom>

Don’t forget to replace YOUR_PUBLIC_KEY with an actual Public API Key you discovered in the beginning of this article.

Now save the file and let the Angular serve itself:

ng serve --open

Uploadcare Widget should then rise and shine:

And that’s it! 👍 Once you nailed it, you’re ready to get to know the widget closer.

Step 4. Check Out Settings and Events

The File Uploader integration for Angular 2+ is highly customizable. You can use all the attributes listed in the readme. Those are called widget options, and you can learn more about them in our docs.

For example, this is how you allow uploading files only from local storage and URLs via the data-tabs attribute:

<ngx-uploadcare-widget
  images-only="true"
  data-tabs="file url"
  public-key="YOUR_PUBLIC_KEY">
</ngx-uploadcare-widget>

Regarding the events, you can use the following three:

• on-upload-complete
• on-change
• on-progress

The first two events are well described here, while the on-progress one gets fired several times while uploading, based on progress data.

You can find the events usage examples in the corresponding section of the ngx-uploadcare-widget readme on GitHub. Another notable thing on the readme would be methods you can use to control the widget behavior with your app.

Conclusion

Yoo-hoo you can now integrate our File Uploader into your Angular 2+ projects 🚀 Feel free to contribute to the development of ngx-uploadcare-widget: Issues and PRs are welcome here.

In case you have any questions, feel free to post those around our community area.