Cloudinary Blog

File Upload With Angular Or AngularJS to Cloudinary

Angular File Upload to Cloudinary in Two Simple Steps

Angular, now at version 8, is an open-source front-end framework that was developed by Google in 2016 and that has been adopted by software developers far and wide. Uploading Angular files 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 receives, processes, and stores the files.

To make all that happen, set up an HTML template and build an upload component in Angular. 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 an 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:

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

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

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

Step 2: Create a File-Upload Component in Angular

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

npm install @cloudinary/angular-5.x --save

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

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.

Uploading AngularJS Files

For app developers who are on AngularJS, follow the steps below to facilitate uploads of Angular JS files.

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

bower install ng-file-upload cloudinary_ng --save

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

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:

$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:

<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 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. Do give it a whirl!


Further Reading on File Upload

Recent Blog Posts

Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more
Learn three ways in which to tell appealing stories on video.

Video storytelling is one of the most effective means of conveying messages to your audience. It’s also a popular marketing tool because most people are automatically drawn to video. In eCommerce, if accompanied by attractive images and a compelling narrative, video storytelling uniquely connect with potential customers without fail.

Read more