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
- 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 File Uploader 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 file uploader 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 file uploader 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 file uploader 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 File Uploader should then rise and shine:


And that’s it! 👍 Once you nailed it, you’re ready to get to know the file uploader 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 file uploader 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 file uploader
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.