Angular + Cloudinary Upload Widget Example

Demonstration of Cloudinary's Upload Widget with Angular.

by sambrace

HTML

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<my-app>
   <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
</my-app>

CSS

.progress_wrapper {
  display: block;
  margin: 5px 0;
  border: 1px;
  width: 100%;
  height: 20px;
  background-color: grey;
  border-radius: 5px;
  text-align: center;
}

.progress_bar {
  width: 0px;
  height: 20px;
  background-color: #1fd94d;
  text-align: center;
  line-height: 21px;
  border-radius: 5px;
  font-size: 15px;
}

.text {
    position: absolute;
    margin: 0 auto;
    width: 100%;
}

p{
    font-size: large;
    background-color: rgb(237, 237, 225);
}

span{
    font-weight: bold;
}

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	<h1>Upload Widget</h1>
    <button (click)="increment()">Upload</button>
  `,
})
class HomeComponent {
    name = 'Angular'
    
    increment() {      
       cloudinary.openUploadWidget({
        cloud_name: "CLOUDNAMEGOESHERE",
        upload_preset:"UNSIGNEDUPLOADPRESETGOESHERE",
        cropping: 'custom',
        folder: "test"
      },
      function(error, result) {
        console.log(error);
      });
      
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);