Not able to set public_id for image upload

[codepan101]

In one of my project we are using cloudinary for image upload using node.js like,

cloudinary.v2.uploader.upload("sample.jpg", { public_id: "some_id" }, function(error, result) {console.log(result, error); });

As you can see here we have the option to provide public_id for the uploaded image explicitly but in cloudinary angular sdk we don't have such flexibility (I am upgrading my project to Angular 7).

How to provide public_id for image upload explicitly using @cloudinary/angular sdk ?

[igy]

Hi Ashutosh,
May I please ask for an example of how you're performing uploads from your Angular code and where you're trying to set the public_id?
Uploading from Angular is usually via a third party file upload library, our JQuery SDK or a direct HTTP call from Javascript - in each case, you're most likely using an unsigned upload preset because it's a client-side piece of code, so many of the options are determined by what's been configured in that preset.
In general, you should be able to specify the public_id unless the preset is configured to disallow that parameter, but I'll need some more information about how you're making the upload API call in order to know what you may need to change
Thanks, Stephen

[strausr]

@codepan101 You can provide a public_id by appending it to the form. For example,
form.append('public_id', '<my_file>');

You can view our sample project on the following for more information. Specifically the photo-upload.component.ts- https://github.com/cloudinary/cloudinary_angular/blob/master/samples/photo_album/app/js/photo-album/photo-upload.component.ts#L48

[codepan101]

Hey @strausr @igy thanks for replying. I am using this method for uploading images,

//Upload.component.ts

import { Component, OnInit } from '@angular/core';
import { CloudinaryOptions, CloudinaryUploader } from 'ng2-cloudinary';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
uploader: CloudinaryUploader = new CloudinaryUploader(
new CloudinaryOptions({ cloudName: 'CLOUDINARY CLOUD NAME', uploadPreset: 'CLOUDINARY UPLOAD PRESET' })
);
   
   loading: any;
constructor() { }
ngOnInit() {
}
upload(){
this.loading = true;
this.uploader.uploadAll();
this.uploader.onSuccessItem = (item: any, response: string, status: number, headers: any): any => {
let res: any = JSON.parse(response);
console.log(res);
}
this.uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
}
}

//Upload.component.html

<input type="file" ng2FileSelect [uploader]="uploader" accept="image/*;capture=camera">
<button [disabled]="loading" (click)="upload()" class="btn btn-success mt-3">Upload</button>

[strausr]

@codepan101 My apologies for the late response. This is probably not relevant anymore but for those reaching this thread- please find the following upload example https://github.com/cloudinary/cloudinary_angular/blob/master/samples/photo_album/app/js/photo-album/photo-upload.component.ts#L48