Angular 4 Amazon S3 example – How to delete File from S3 Bucket

angular-4-amazon-s3-example-delete-file-from-s3-bucket-feature-image

Amazon Simple Storage Service (Amazon S3) is object storage built to store and retrieve any amount of data from web or mobile. Amazon S3 is designed to make web-scale computing easier for developers. In previous post, we had known how to upload & get files to/from Amazon S3. This tutorial will help you create an Angular 4 App that can do one more thing: delete File from Amazon S3 Bucket.

Related Posts:
Angular 4 Amazon S3 example – How to upload File to S3 Bucket
Angular 4 Amazon S3 example – How to get list Files from S3 Bucket

I. Technology

– Angular 4
– AWS SDK

II. How to do

1. Set up Angular 4 Project integrating with AWS SDK

Create your own Angular 4 Project, then follow these steps to integrate AWS SDK.

2. Delete File from S3 Bucket

Use deleteObject() method with input params containing file’s Key:

const params = {
  Bucket: 'BUCKET',
  Key: 'jsa-s3/filename'
};

this.getS3Bucket().deleteObject(params, function (err, data) {
  if (err) {
    console.log('There was an error deleting your file: ', err.message);
    return;
  }
  console.log('Successfully deleted file.');
});

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 4 Firebase App that can:
– helps user choose file from local and upload it to Amazon S3 Bucket
– display list files from Amazon S3 Bucket
(from previous post)
– delete file from Amazon S3 Bucket

amazon-s3-angular4-delete-file

1.2 Structure

amazon-s3-angular4-get-list-files-structure

2. Step by step
2.1 Set up Angular 4 Project integrating with AWS SDK

Create your own Angular 4 Project, then follow these steps to integrate AWS SDK.

2.2 Setup @NgModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormUploadComponent } from './form-upload/form-upload.component';
import { UploadFileService } from './upload-file.service';
import { DetailsUploadComponent } from './details-upload/details-upload.component';
import { ListUploadComponent } from './list-upload/list-upload.component';

@NgModule({
  declarations: [
    AppComponent,
    FormUploadComponent,
    DetailsUploadComponent,
    ListUploadComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [UploadFileService],
  bootstrap: [AppComponent]
})
export class AppModule { }
2.3 Model Class
export class FileUpload {
    name: string;
    url: string;

    constructor(name: string, url: string) {
        this.name = name;
        this.url = url;
    }
}
2.4 Upload Service
import { Injectable } from '@angular/core';
import * as AWS from 'aws-sdk/global';
import * as S3 from 'aws-sdk/clients/s3';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { FileUpload } from './file-upload';

@Injectable()
export class UploadFileService {

  FOLDER = 'jsa-s3/';
  BUCKET = 'jsa-angular4-bucket';

  constructor() { }

  private getS3Bucket(): any {
    const bucket = new S3(
      {
        accessKeyId: 'ACCESS-KEY-ID',
        secretAccessKey: 'SECRET-ACCESS-KEY',
        region: 'us-east-1'
      }
    );

    return bucket;
  }

  uploadfile(file) {
    const params = {
      Bucket: this.BUCKET,
      Key: this.FOLDER + file.name,
      Body: file,
      ACL: 'public-read'
    };

    this.getS3Bucket().upload(params, function (err, data) {
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }

      console.log('Successfully uploaded file.', data);
      return true;
    });
  }

  getFiles(): Observable> {
    const fileUploads = new Array();

    const params = {
      Bucket: this.BUCKET,
      Prefix: this.FOLDER
    };

    this.getS3Bucket().listObjects(params, function (err, data) {
      if (err) {
        console.log('There was an error getting your files: ' + err);
        return;
      }

      console.log('Successfully get files.', data);

      const fileDatas = data.Contents;

      fileDatas.forEach(function (file) {
        fileUploads.push(new FileUpload(file.Key, 'https://s3.amazonaws.com/' + params.Bucket + '/' + file.Key));
      });
    });

    return Observable.of(fileUploads);
  }

  deleteFile(file: FileUpload) {
    const params = {
      Bucket: this.BUCKET,
      Key: file.name
    };

    this.getS3Bucket().deleteObject(params, function (err, data) {
      if (err) {
        console.log('There was an error deleting your file: ', err.message);
        return;
      }
      console.log('Successfully deleted file.');
    });
  }

}
2.5 Form Upload Compoment
import { Component, OnInit } from '@angular/core';
import { UploadFileService } from '../upload-file.service';

@Component({
  selector: 'app-form-upload',
  templateUrl: './form-upload.component.html',
  styleUrls: ['./form-upload.component.css']
})
export class FormUploadComponent implements OnInit {

  selectedFiles: FileList;

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  upload() {
    const file = this.selectedFiles.item(0);
    this.uploadService.uploadfile(file);
  }

  selectFile(event) {
    this.selectedFiles = event.target.files;
  }
}

form-upload.component.html:




2.6 DetailsUpload Component

details-upload.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FileUpload } from '../file-upload';
import { UploadFileService } from '../upload-file.service';

@Component({
  selector: 'app-details-upload',
  templateUrl: './details-upload.component.html',
  styleUrls: ['./details-upload.component.css']
})
export class DetailsUploadComponent implements OnInit {

  @Input() fileUpload: FileUpload;

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  delete(file) {
    this.uploadService.deleteFile(file);
  }
}

details-upload.component.html

{{fileUpload.name}}

2.7 ListUpload Component

list-upload.component.ts

import { Component, OnInit } from '@angular/core';
import { UploadFileService } from '../upload-file.service';
import { Observable } from 'rxjs/Observable';
import { FileUpload } from '../file-upload';

@Component({
  selector: 'app-list-upload',
  templateUrl: './list-upload.component.html',
  styleUrls: ['./list-upload.component.css']
})
export class ListUploadComponent implements OnInit {

  showFile = false;
  fileUploads: Observable>;

  constructor(private uploadService: UploadFileService) { }

  ngOnInit() {
  }

  showFiles(enable: boolean) {
    this.showFile = enable;

    if (enable) {
      this.fileUploads = this.uploadService.getFiles();
    }
  }

}

list-upload.component.html


 

 
List of Files
2.8 App Component

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'JavaSampleApproach';
  description = 'Angular4-AmazonS3 Demo';
}

app.component.html

{{title}}

{{description}}



2.9 Check Result

Run the App, go to http://localhost:4200/.

amazon-s3-angular4-delete-file-demo

Click on Delete button for an item, then show Files again:

amazon-s3-angular4-delete-file-result

Check S3 Bucket https://console.aws.amazon.com/s3/buckets/jsa-angular4-bucket/jsa-s3:

amazon-s3-angular4-delete-file-result-bucket

IV. Source Code

Angular4AmazonS3-upload-read-delete-file

One thought on “Angular 4 Amazon S3 example – How to delete File from S3 Bucket”

  1. I don’t know if you want to give away the secretAccessKey: ‘SECRET-ACCESS-KEY’ on your frontend app like that. I think I would get a policy with an expiration to do this operation instead.

Leave a Reply

Your email address will not be published. Required fields are marked *