Angular image and video upload

There are several options for uploading media directly from your Angular application to your Cloudinary account. You use an upload preset in conjunction with your chosen upload option to define upload parameters. For details on all available upload parameters, see the Upload method in the Upload API Reference.

Upload options include:

Cloudinary Upload Widget

The Cloudinary Upload widget allows you to upload resources to cloudinary via a ready- made interface that can be easily embedded within your web application. For details, see Upload widget.

3rd party Angular upload tools

There are a number of Angular and Angular 2.x and later 3rd party upload tools available. Configure your upload tool to upload to your Cloudinary account and use an upload preset to define your upload parameters.

You can view a well-commented example using ng2-file-upload in the photo-upload.component.ts file of the Photo Album sample on Github.

Cloudinary jQuery-file-upload

You can use Cloudinary's jquery-file-upload package for direct unsigned upload. For this, you need to install the jQuery SDK and require the jQuery Javascript files:

/jquery/dist/jquery.js                                   
/blueimp-file-upload/js/vendor/jquery.ui.widget.js      
/blueimp-file-upload/js/jquery.iframe-transport.js 
/blueimp-file-upload/js/jquery.fileupload.js
/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js

For an example of uploading from your Angular application using JQuery, see Photo album sample with jQuery

Pure Javascript

You can also write your own JavaScript code for direct uploading with an upload preset. For an example, see this codepen sample.