{"id":21913,"date":"2019-07-23T16:32:49","date_gmt":"2019-07-23T16:32:49","guid":{"rendered":"http:\/\/file_upload_with_angular_or_angularjs_to_cloudinary"},"modified":"2024-05-29T15:52:07","modified_gmt":"2024-05-29T22:52:07","slug":"file_upload_with_angular_or_angularjs_to_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary","title":{"rendered":"File Upload With Angular to Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Angular is a Typescript-based open source framework for building mobile and web applications. It\u2019s very different from AngularJS because it\u2019s a complete rewrite from ground up. Angular is currently at version 9 and its usage amongst developers keeps increasing by the day.<\/p>\n<p>Performing an Angular <a href=\"https:\/\/cloudinary.com\/blog\/automating_file_upload_and_sharing\">file upload<\/a> to Cloudinary involves a two-part process:<\/p>\n<ul>\n<li>The client side (the user interface) obtains the files to be uploaded through a form control or component.<\/li>\n<li>The server side of the app receives, processes, transforms and stores the files in the cloud.<\/li>\n<\/ul>\n<p>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.<\/p>\n<h2>Angular File Upload<\/h2>\n<p>Enabling Angular file uploads to Cloudinary takes two steps.<\/p>\n<h3>Step 1: Set Up an HTML Template<\/h3>\n<p>First, place a file upload component in your app for your users by doing <strong>either<\/strong> of the following:<\/p>\n<ul>\n<li>\n<p>Specify, in HTML, the HTML5 file\u2019s input type by adding the code below to the <code>app.component.html<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">\"\"<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">\"post\"<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\">\"multipart\/form-data\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span>&gt;<\/span>Choose file<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p>Install the Angular file upload component <code>ng2-file-upload<\/code> with this NPM command:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install ng2-file-upload --save\n<\/code><\/span><\/pre>\n<ul>\n<li>\n<p>Afterwards, attach the Angular file upload component to your HTML markup by adding the related parameters to the <code>app.component.html<\/code> file:<\/p>\n<ul>\n<li>\n<strong>For multiple file uploads<\/strong>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">`<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">ng2FileSelect<\/span> &#91;<span class=\"hljs-attr\">uploader<\/span>]=<span class=\"hljs-string\">\"uploader\"<\/span> <span class=\"hljs-attr\">multiple<\/span>  \/&gt;<\/span>`\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ul>\n<li>\n<strong>For single file uploads<\/strong>\n<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">`<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">ng2FileSelect<\/span> &#91;<span class=\"hljs-attr\">uploader<\/span>]=<span class=\"hljs-string\">\"uploader\"<\/span> \/&gt;<\/span>`\n`<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> &#91;<span class=\"hljs-attr\">disabled<\/span>]=<span class=\"hljs-string\">\"loading\"<\/span> (<span class=\"hljs-attr\">click<\/span>)=<span class=\"hljs-string\">\"upload()\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn\"<\/span>&gt;<\/span>Upload<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>`\n`_app.component.html_`\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Step 2: Create an Angular File Upload Component<\/h3>\n<p>First, install the Angular File Upload Cloudinary library that works for Angular 5, 6, and 7 with this NPM command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@cloudinary<\/span>\/angular-5.x --save\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now create an angular file upload component by adding the code below to the <code>src\/app\/app.component.ts<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { Component, OnInit, Input } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { FileUploader, FileUploaderOptions, ParsedResponseHeaders } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'ng2-file-upload'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Cloudinary } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@cloudinary\/angular-5.x'<\/span>;\n\n@Component({\n  <span class=\"hljs-attr\">selector<\/span>: <span class=\"hljs-string\">'app-list'<\/span>,\n  <span class=\"hljs-attr\">templateUrl<\/span>: <span class=\"hljs-string\">'app.component.html'<\/span>\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ImageUploadComponent<\/span> <span class=\"hljs-title\">implements<\/span> <span class=\"hljs-title\">OnInit<\/span> <\/span>{\n\n  @Input()\n  <span class=\"hljs-attr\">responses<\/span>: <span class=\"hljs-built_in\">Array<\/span>&lt;any&gt;;\n\n  private hasBaseDropZoneOver: boolean = <span class=\"hljs-literal\">false<\/span>;\n  private uploader: FileUploader;\n  private title: string;\n\n  <span class=\"hljs-keyword\">constructor<\/span>(\n    private cloudinary: Cloudinary,\n    private zone: NgZone,\n    private http: HttpClient\n  ) {\n    <span class=\"hljs-keyword\">this<\/span>.responses = &#91;];\n    <span class=\"hljs-keyword\">this<\/span>.title = <span class=\"hljs-string\">''<\/span>;\n  }\n\n  ngOnInit(): <span class=\"hljs-keyword\">void<\/span> {\n    <span class=\"hljs-comment\">\/\/ Create the file uploader, wire it to upload to your account<\/span>\n    <span class=\"hljs-keyword\">const<\/span> uploaderOptions: FileUploaderOptions = {\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`https:\/\/api.cloudinary.com\/v1_1\/<span class=\"hljs-subst\">${<span class=\"hljs-keyword\">this<\/span>.cloudinary.config().cloud_name}<\/span>\/upload`<\/span>,\n      <span class=\"hljs-comment\">\/\/ Upload files automatically upon addition to upload queue<\/span>\n      <span class=\"hljs-attr\">autoUpload<\/span>: <span class=\"hljs-literal\">true<\/span>,\n      <span class=\"hljs-comment\">\/\/ Use xhrTransport in favor of iframeTransport<\/span>\n      <span class=\"hljs-attr\">isHTML5<\/span>: <span class=\"hljs-literal\">true<\/span>,\n      <span class=\"hljs-comment\">\/\/ Calculate progress independently for each uploaded file<\/span>\n      <span class=\"hljs-attr\">removeAfterUpload<\/span>: <span class=\"hljs-literal\">true<\/span>,\n      <span class=\"hljs-comment\">\/\/ XHR request headers<\/span>\n      <span class=\"hljs-attr\">headers<\/span>: &#91;\n        {\n          <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'X-Requested-With'<\/span>,\n          <span class=\"hljs-attr\">value<\/span>: <span class=\"hljs-string\">'XMLHttpRequest'<\/span>\n        }\n      ]\n    };\n\n    <span class=\"hljs-keyword\">this<\/span>.uploader = <span class=\"hljs-keyword\">new<\/span> FileUploader(uploaderOptions);\n\n    <span class=\"hljs-keyword\">this<\/span>.uploader.onBuildItemForm = (fileItem: any, <span class=\"hljs-attr\">form<\/span>: FormData): <span class=\"hljs-function\"><span class=\"hljs-params\">any<\/span> =&gt;<\/span> {\n      <span class=\"hljs-comment\">\/\/ Add Cloudinary unsigned upload preset to the upload form<\/span>\n      form.append(<span class=\"hljs-string\">'upload_preset'<\/span>, <span class=\"hljs-keyword\">this<\/span>.cloudinary.config().upload_preset);\n      \n      <span class=\"hljs-comment\">\/\/ Add file to upload<\/span>\n      form.append(<span class=\"hljs-string\">'file'<\/span>, fileItem);\n\n      <span class=\"hljs-comment\">\/\/ Use default \"withCredentials\" value for CORS requests<\/span>\n      fileItem.withCredentials = <span class=\"hljs-literal\">false<\/span>;\n      <span class=\"hljs-keyword\">return<\/span> { fileItem, form };\n    };\n\n\n  fileOverBase(e: any): <span class=\"hljs-keyword\">void<\/span> {\n    <span class=\"hljs-keyword\">this<\/span>.hasBaseDropZoneOver = e;\n  }\n}\n_upload.component.ts_\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Replace the variable <code>cloud_ name<\/code> in the code above with your account\u2019s cloud name as displayed in your <a href=\"https:\/\/cloudinary.com\/users\/login\">Cloudinary Dashboard<\/a>.<\/p><\/div>\n<p>The <code>ImageUpload<\/code> component in the code processes the uploaded files through the <code>ng2-file-upload<\/code> component, subsequently uploading them to Cloudinary.<\/p>\n<p>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.<\/p>\n<p>For the complete code of the entire process, see this comprehensive <a href=\"https:\/\/github.com\/cloudinary\/cloudinary_angular\/blob\/angular-5.x\/samples\/photo_album\/app\/js\/photo-album\/photo-upload.component.ts\">GitHub repository<\/a>.<\/p>\n<h2>AngularJS File Uploads<\/h2>\n<p>For app developers who are on AngularJS, follow the steps below to facilitate AngularJS file uploads.<\/p>\n<p>First, install the Cloudinary AngularJS SDK and the <code>ng-file-upload<\/code> library with this NPM command:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">bower install ng-file-upload cloudinary_ng --save\n<\/code><\/span><\/pre>\n<p>Next, define <code>CloudinaryProvider<\/code> in your app\u2019s configuration file with this code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">yourApp.config(&#91;<span class=\"hljs-string\">'cloudinaryProvider'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">cloudinaryProvider<\/span>) <\/span>{\n  cloudinaryProvider\n      .set(<span class=\"hljs-string\">\"cloud_name\"<\/span>, <span class=\"hljs-string\">\"good\"<\/span>)\n      .set(<span class=\"hljs-string\">\"secure\"<\/span>, <span class=\"hljs-literal\">true<\/span>)\n      .set(<span class=\"hljs-string\">\"upload_preset\"<\/span>, <span class=\"hljs-string\">\"my_preset\"<\/span>);\n}]);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Replace the variable <code>cloud_ name<\/code> with your account\u2019s cloud name as displayed in your <a href=\"https:\/\/cloudinary.com\/console\">Cloudinary Dashboard<\/a>.<\/p><\/div>\n<p>Finally, attach an <code>uploadFiles<\/code> function in your app to the controller <code>$scope<\/code> with, for example, this code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">$scope.uploadFiles = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(files)<\/span><\/span>{\n  $scope.files = files;\n  angular.<span class=\"hljs-keyword\">forEach<\/span>(files, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(file)<\/span><\/span>{\n    <span class=\"hljs-keyword\">if<\/span> (file &amp;&amp; !file.$error) {\n      file.upload = $upload.upload({\n        url: <span class=\"hljs-string\">\"https:\/\/api.cloudinary.com\/v1_1\/\"<\/span> + cloudinary.config().cloud_name + <span class=\"hljs-string\">\"\/upload\"<\/span>,\n        data: {\n          upload_preset: cloudinary.config().upload_preset,\n          context: <span class=\"hljs-string\">'image='<\/span> + $scope.title,\n          file: file\n        }\n      }).progress(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(e)<\/span> <\/span>{\n        file.progress = Math.round((e.loaded * <span class=\"hljs-number\">100.0<\/span>) \/ e.total);\n        file.status = <span class=\"hljs-string\">\"Uploading... \"<\/span> + file.progress + <span class=\"hljs-string\">\"%\"<\/span>;\n      }).success(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(data, status, headers, config)<\/span> <\/span>{\n        $rootScope.<span class=\"hljs-keyword\">list<\/span> = $rootScope.<span class=\"hljs-keyword\">list<\/span> || &#91;];\n        data.context = {custom: {image: $scope.title}};\n        file.result = data;\n        $rootScope.photos.push(data);\n      }).error(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">(data, status, headers, config)<\/span> <\/span>{\n        file.result = data;\n      });\n    }\n  });\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>$upload.upload<\/code> function uploads all the files straight to Cloudinary.<\/p>\n<h2>Manipulate and Deliver Uploaded Angular Or AngularJS Files<\/h2>\n<p>Cloudinary\u2019s 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.<\/p>\n<p>Afterwards, specify the attributes and values that you desire for the parameters for the <code>&lt;cl-image&gt;<\/code> component, for example:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"dog\"<\/span> <span class=\"hljs-attr\">angle<\/span>=<span class=\"hljs-string\">\"20\"<\/span> <span class=\"hljs-attr\">format<\/span>=<span class=\"hljs-string\">\"jpg\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"150\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"150\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fill\"<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"sepia\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">overlay<\/span>=<span class=\"hljs-string\">\"text:arial_20:Angular\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#EECCAA\"<\/span> <span class=\"hljs-attr\">gravity<\/span>=<span class=\"hljs-string\">\"south\"<\/span> <span class=\"hljs-attr\">y<\/span>=<span class=\"hljs-string\">\"20\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the above code, the value of <code>public-id<\/code> (dog) is the name of the image stored in Cloudinary.<\/p>\n<p>To manipulate and transform images and files as you desire, simply embed the <code>&lt;cl-transformation&gt;<\/code> component within <code>&lt;cl-image&gt;<\/code>. For details of the many options available, see the related <a href=\"https:\/\/cloudinary.com\/documentation\/angular_image_transformations\">Cloudinary documentation<\/a>. You\u2019ll 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 <a href=\"https:\/\/github.com\/cloudinary\/cloudinary_angular\/blob\/angular-1.x\/samples\/photo_album\/app\/js\/controllers.js\">here<\/a> and for the full app configuration, click <a href=\"https:\/\/github.com\/cloudinary\/cloudinary_angular\/tree\/angular-1.x\/samples\/photo_album\">here<\/a>. Do give it a whirl!<\/p>\n<h2>Want to Learn More About File Uploads?<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/automating_file_upload_and_sharing\">Automating File Upload and Sharing<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_php\">Uploading PHP Files and Rich Media the Easy Way<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\">AJAX File Upload &#8211; Quick Tutorial &amp; Time Saving Tips<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/impressed_by_whatsapp_technology_build_a_whatsapp_clone_with_image_and_video_upload\">Impressed by WhatsApp technology? Clone WhatsApp Technology to Build a File Upload Android App<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery\">Direct Image Uploads From the Browser to the Cloud With jQuery<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\">File Upload With Angular to Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/uploading_vue_files_and_rich_media_in_two_easy_steps\">Uploading Vue Files and Rich Media in Two Easy Steps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/node_js_file_upload_to_a_local_server_or_to_the_cloud\">Node.js File Upload To a Local Server Or to the Cloud<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/laravel_file_upload_to_a_local_server_or_to_the_cloud\">Laravel File Upload to a Local Server Or to the Cloud<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/javascript_file_upload_to_cloudinary\">JavaScript File Upload in Two Simple Step<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21914,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[119,263],"class_list":["post-21913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-file-upload","tag-sdk"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular File Upload to Cloudinary in Two Simple Steps<\/title>\n<meta name=\"description\" content=\"Angular file upload to Cloudinary is done by following two simple steps. Read to learn how to set up an HTML template and build an upload component in Angular.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"File Upload With Angular to Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Angular file upload to Cloudinary is done by following two simple steps. Read to learn how to set up an HTML template and build an upload component in Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-23T16:32:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-29T22:52:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"File Upload With Angular to Cloudinary\",\"datePublished\":\"2019-07-23T16:32:49+00:00\",\"dateModified\":\"2024-05-29T22:52:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA\",\"keywords\":[\"File-upload\",\"SDK\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\",\"name\":\"Angular File Upload to Cloudinary in Two Simple Steps\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA\",\"datePublished\":\"2019-07-23T16:32:49+00:00\",\"dateModified\":\"2024-05-29T22:52:07+00:00\",\"description\":\"Angular file upload to Cloudinary is done by following two simple steps. Read to learn how to set up an HTML template and build an upload component in Angular.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"File Upload With Angular to Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular File Upload to Cloudinary in Two Simple Steps","description":"Angular file upload to Cloudinary is done by following two simple steps. Read to learn how to set up an HTML template and build an upload component in Angular.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary","og_locale":"en_US","og_type":"article","og_title":"File Upload With Angular to Cloudinary","og_description":"Angular file upload to Cloudinary is done by following two simple steps. Read to learn how to set up an HTML template and build an upload component in Angular.","og_url":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2019-07-23T16:32:49+00:00","article_modified_time":"2024-05-29T22:52:07+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary"},"author":{"name":"","@id":""},"headline":"File Upload With Angular to Cloudinary","datePublished":"2019-07-23T16:32:49+00:00","dateModified":"2024-05-29T22:52:07+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA","keywords":["File-upload","SDK"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary","url":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary","name":"Angular File Upload to Cloudinary in Two Simple Steps","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA","datePublished":"2019-07-23T16:32:49+00:00","dateModified":"2024-05-29T22:52:07+00:00","description":"Angular file upload to Cloudinary is done by following two simple steps. Read to learn how to set up an HTML template and build an upload component in Angular.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"File Upload With Angular to Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719174\/Web_Assets\/blog\/Angular-File-Upload\/Angular-File-Upload.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21913"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21913\/revisions"}],"predecessor-version":[{"id":34097,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21913\/revisions\/34097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21914"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}