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.

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

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:

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-widgetreadme 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.

Questions?

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.