Cloudinary Blog

File Upload With Angular to Cloudinary

Angular File Upload to Cloudinary in Two Simple Steps

Angular is a Typescript-based open source framework for building mobile and web applications. It’s very different from AngularJS because it’s a complete rewrite from ground up. Angular is currently at version 9 and its usage amongst developers keeps increasing by the day.

Performing an Angular file upload to Cloudinary involves a two-part process:

  • The client side (the user interface) obtains the files to be uploaded through a form control or component.
  • The server side of the app receives, processes, transforms and stores the files in the cloud.

To make all that happen, set up an HTML template and build an Angular file upload component. The sections below walk you through the procedures in detail.

Angular File Upload

Enabling Angular file uploads to Cloudinary takes two steps.

Step 1: Set Up an HTML Template

First, place a file upload component in your app for your users by doing either of the following:

  • Specify, in HTML, the HTML5 file’s input type by adding the code below to the app.component.html file:

    Copy to clipboard
    <div>
    <form action="" method="post" enctype="multipart/form-data">
        <input type="file">
    </form>
    <label>Choose file</label>
    </div>
  • Install the Angular file upload component ng2-file-upload with this NPM command:

    Copy to clipboard
    npm install ng2-file-upload --save
    • Afterwards, attach the Angular file upload component to your HTML markup by adding the related parameters to the app.component.html file:

      • For multiple file uploads
      Copy to clipboard
      `<input type="file" ng2FileSelect [uploader]="uploader" multiple  />`
      • For single file uploads
      Copy to clipboard
      `<input type="file" ng2FileSelect [uploader]="uploader" />`
      `<button [disabled]="loading" (click)="upload()" class="btn">Upload</button>`
      `_app.component.html_`

Step 2: Create an Angular File Upload Component

First, install the Angular File Upload Cloudinary library that works for Angular 5, 6, and 7 with this NPM command:

Copy to clipboard
npm install @cloudinary/angular-5.x --save

Now create an angular file upload component by adding the code below to the src/app/app.component.ts file:

Copy to clipboard
import { Component, OnInit, Input } from '@angular/core';
import { FileUploader, FileUploaderOptions, ParsedResponseHeaders } from 'ng2-file-upload';
import { Cloudinary } from '@cloudinary/angular-5.x';

@Component({
  selector: 'app-list',
  templateUrl: 'app.component.html'
})
export class ImageUploadComponent implements OnInit {

  @Input()
  responses: Array<any>;

  private hasBaseDropZoneOver: boolean = false;
  private uploader: FileUploader;
  private title: string;

  constructor(
    private cloudinary: Cloudinary,
    private zone: NgZone,
    private http: HttpClient
  ) {
    this.responses = [];
    this.title = '';
  }

  ngOnInit(): void {
    // Create the file uploader, wire it to upload to your account
    const uploaderOptions: FileUploaderOptions = {
      url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloud_name}/upload`,
      // Upload files automatically upon addition to upload queue
      autoUpload: true,
      // Use xhrTransport in favor of iframeTransport
      isHTML5: true,
      // Calculate progress independently for each uploaded file
      removeAfterUpload: true,
      // XHR request headers
      headers: [
        {
          name: 'X-Requested-With',
          value: 'XMLHttpRequest'
        }
      ]
    };

    this.uploader = new FileUploader(uploaderOptions);

    this.uploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
      // Add Cloudinary unsigned upload preset to the upload form
      form.append('upload_preset', this.cloudinary.config().upload_preset);

      // Add file to upload
      form.append('file', fileItem);

      // Use default "withCredentials" value for CORS requests
      fileItem.withCredentials = false;
      return { fileItem, form };
    };


  fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }
}
_upload.component.ts_

Note
Replace the variable cloud_ name in the code above with your account’s cloud name as displayed in your Cloudinary Dashboard.

The ImageUpload component in the code processes the uploaded files through the ng2-file-upload component, subsequently uploading them to Cloudinary.

Remarkably, such a setup eliminates the tedious chore of developing a back-end API to receive files from the front-end and to validate and process them before storing them in Cloudinary. As soon as a user has uploaded a file, Cloudinary seamlessly handles the remaining tasks that culminate in the file being stored in the Media Library.

For the complete code of the entire process, see this comprehensive GitHub repository.

AngularJS File Uploads

For app developers who are on AngularJS, follow the steps below to facilitate AngularJS file uploads.

First, install the Cloudinary AngularJS SDK and the ng-file-upload library with this NPM command:

Copy to clipboard
bower install ng-file-upload cloudinary_ng --save

Next, define CloudinaryProvider in your app’s configuration file with this code:

Copy to clipboard
yourApp.config(['cloudinaryProvider', function (cloudinaryProvider) {
  cloudinaryProvider
      .set("cloud_name", "good")
      .set("secure", true)
      .set("upload_preset", "my_preset");
}]);

Note
Replace the variable cloud_ name with your account’s cloud name as displayed in your Cloudinary Dashboard.

Finally, attach an uploadFiles function in your app to the controller $scope with, for example, this code:

Copy to clipboard
$scope.uploadFiles = function(files){
  $scope.files = files;
  angular.forEach(files, function(file){
    if (file && !file.$error) {
      file.upload = $upload.upload({
        url: "https://api.cloudinary.com/v1_1/" + cloudinary.config().cloud_name + "/upload",
        data: {
          upload_preset: cloudinary.config().upload_preset,
          context: 'image=' + $scope.title,
          file: file
        }
      }).progress(function (e) {
        file.progress = Math.round((e.loaded * 100.0) / e.total);
        file.status = "Uploading... " + file.progress + "%";
      }).success(function (data, status, headers, config) {
        $rootScope.list = $rootScope.list || [];
        data.context = {custom: {image: $scope.title}};
        file.result = data;
        $rootScope.photos.push(data);
      }).error(function (data, status, headers, config) {
        file.result = data;
      });
    }
  });
};

The $upload.upload function uploads all the files straight to Cloudinary.

Manipulate and Deliver Uploaded Angular Or AngularJS Files

Cloudinary’s Angular SDK contains several out-of-the-box components that enable you to manipulate, optimize, and deliver images in the best format. Add those components to your Angular app.

Afterwards, specify the attributes and values that you desire for the parameters for the <cl-image> component, for example:

Copy to clipboard
<cl-image public-id="dog" angle="20" format="jpg">
    <cl-transformation height="150" width="150" crop="fill" effect="sepia"></cl-transformation>
    <cl-transformation overlay="text:arial_20:Angular" color="#EECCAA" gravity="south" y="20"></cl-transformation>
</cl-image>

In the above code, the value of public-id (dog) is the name of the image stored in Cloudinary.

To manipulate and transform images and files as you desire, simply embed the <cl-transformation> component within <cl-image>. For details of the many options available, see the related Cloudinary documentation. You’ll be amazed at the wealth of choices at your fingertips and the marvelous effects the manipulation and transformation tasks produce. For the upload code, click here and for the full app configuration, click here. Do give it a whirl!

Want to Learn More About File Uploads?

Recent Blog Posts

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more