Upload images to Cloudinary using Angular

Cloudinary is a SaaS based platform that helps you to store high quality images, where in your free tire you can store 25GB of images and videos. it has may other options to customize the image.
here I required the basic feature that is upload a image to Cloudinary via Angular. in my recent project, I was using firebase storage to store images but this time for a change thought to learn something new taking an inspiration by my tech enthusiast friend I though to try it out.

I am using Angular version 12. here for this basic upload feature there is no need to import any Cloudinary package. let's further roll out into the steps:-

First lets set up Cloudinary part

1. Sign in or login to your Cloudinary account.
2. now click on settings and then upload tab.
3. in the tab find for Upload presets option
4. now click on Add upload preset and add a Upload preset name.
5. select Signing Mode as unsigned and add a folder name.
6. now click on save button

Now in the Angular Project

• From the input type file, get the file value
• Pass it to a function that accept the image data

function onChangeImg(){
   data.append('file', file);
   data.append('upload_preset', 'Upload presets name here');
   data.append('cloud_name', 'copy from dashboard')
   data.append('public_id', file Name+todaysDate)
   this.myService.uploadSignature(data).subscribe((imageData) => {
     this.imageUrl = imageData.url;
     this.registrationForm.patchValue({
       signatureUrl: imageData.url
     });
   })
}

• Now in the Service side

//upload signature
  uploadSignature(vals): Observable<any>{
    let data = vals;
    return this.http.post('https://api.cloudinary.com/v1_1/cloud_name/image/upload',data)
  }

• In the angular once the function is submitted, then in the response you will get a image URL that can be store and used to access the uploaded image.

This were the few process to be followed which in return helps tp store image and that can be retrieved properly. Cloudinary is a good tool to fulfill the above requirements.

Anyone reading the article faces any issues can comment bellow. I will love to reply. Thank you