Angular 2+ Serverless File Uploads

Before We Begin

node -v

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.