How to delete file in UploadCare progrmatically in Angular and Ionic?

Question

I used Angular, Ionic and Firebase in my project. I used Uploadcare to upload and retrieve photos to the application. I can delete the file in the database but the problem is the actual image is still uploaded in the UploadCare Storage.

Heres my code:

organization.service.ts - this is where I connect the application in the Firebase and UploadCare

RESPONSE I GOT:

From the service:

From the page.ts:

UPDATE

RESPONSE IN NETWORK:

This is my Network Activity while Deleting an Item with an Image.

organization.service.ts

  deleteOrg(orgId: string){
    return this.http
    .delete(`https://db-student-portal-default-rtdb.firebaseio.com/add-organization/${orgId}.json`)
    .pipe(switchMap(() => {
      return this.allOrg;
    }),
    take(1), 
    tap(orgs => {
      this.organization.next(orgs.filter(o => o.id !== orgId))
    })
    );
  }

  //This is the function to delete the image in UploadCare
  deleteImage(image: any){

    let httpHeader = new HttpHeaders();
    
    httpHeader.set('Authorization', `Uploadcare.Simple ${PUB_KEY}:${SEC_KEY}`);
    httpHeader.set('Accept', 'application/vnd.uploadcare-v0.5+json');

    this.http.delete(`https://api.uploadcare.com/files/${image}/`, {headers: httpHeader});
  }

organization.page.ts

  onDeleteOrg(){
    this.alertCtrl.create({
      header: 'Delete ' + this.loadedOrg.orgName,
      message: 'Do you want to delete this organization?',
      buttons: [
      {
        text: 'Cancel',
        role: 'cancel'
      },
      {
        text: 'Delete',
        handler: () => {
          this.loadingCtrl.create({
            message: 'Deleting Organization: ' + this.loadedOrg.orgName,
            spinner: 'circular'
          }).then(loadEl => {
            loadEl.present();
            
            //THIS IS WHERE THE DELETION HAPPEN (in the Firebase)
            this.orgService.deleteOrg(this.loadedOrg.id).subscribe(() => {
           //THIS IS WHERE THE DELETION HAPPEN (in the UploadCare)
              this.orgService.deleteImage(this.loadedOrg.imageUrl.replace('https://ucarecdn.com/', ''));
              loadEl.dismiss();
              this.router.navigate(['/homepage']);
            });
          });
        }
      }]
    }).then(alertEl => {
        alertEl.present();
    });

  }

Answer 1

According to the docs, UploadCare's single file delete only requires the file's UUID, ie delete /files/:uuid (see https://uploadcare.com/docs/rest-api/accessing-files/#delete-file).

As far as I can tell, you're trying to pass the whole file data to the API which semantically wouldn't be correct anyway (it uses the uuid to match the correct files).

Adapting your code to something like

let httpHeaders = new HttpHeaders();
httpHeaders.set('Authorization', 'Uploadcare.Simple');
httpHeaders.set('UPLOADCARE_PUB_KEY', '6b*****************7');
this.httpClient.delete(`https://api.uploadcare.com/files/${uuid}/`, { headers: httpHeaders })

should do the trick.

Edit: I feel like there's a bit more explanation needed. What you're trying to do you with your code is to call UploadCare's delete endpoint. According to the docs, that endpoint requires the to be deleted file's uuid, ie /files/:uuid as well as Authorization and UPLOADCARE_PUB_KEY headers. For that you use HttpHeaders.

In your version, you were passing that data as part of a FormData object (see docs) which should throw an HTTP404 error I imagine.

Answer 2

The Simple authorization scheme requires you to provide both public and secret API keys (see Uploadcare REST API reference). You should modify your code this way

let httpHeaders = new HttpHeaders();
httpHeaders.set('Authorization', `Uploadcare.Simple ${YOUR_PUBLIC_KEY}:${YOUR_SECRET_KEY}`);
httpHeaders.set('Accept', 'application/vnd.uploadcare-v0.5+json');
this.httpClient.delete(`https://api.uploadcare.com/files/${uuid}/`, { headers: httpHeaders });

Note that implementing the file deletion logic on the frontend is insecure and is not recommended because it exposes your secret key. You should implement it in your app's backend so that a user of your app can't get access to the request details that include the secret key, or use the token-based Uploadcare auth scheme.