Ngx-s3-uploader NPM

ngx-s3-uploader

The library is inspired by AngularJS To S3 Upload App

Angular version	Integration branch	Library version
5 and below	angular1-5	^0.5.0
6 and above	master	^9.0.0

Installation

To install this library, run:

$ npm install ngx-s3-uploader --save

Usage

    import { S3UploaderModule } from 'ngx-s3-uploader';

    @NgModule({
        imports: [
            S3UploaderModule.forRoot({
              region: 'REGION',
              bucket: 'BUCKET_NAME',
              credentials: { accessKeyId: 'ACCESS_KEY_ID', secretAccessKey: 'SECRET_ACCESS_KEY' },
            })
        ],
        ...
    })
    export class AppModule {}

Warning

While it is possible to do so, we recommend you not hard code credentials inside an application or browser script. Hard coding credentials poses a risk of exposing your access key ID and secret access key. See Best Practices in the IAM User Guide.

The recommended way to obtain AWS credentials for your browser scripts is to use the Amazon Cognito Identity credentials. See Identity Pools for instructions to create identity pools.

    import { S3UploaderModule } from 'ngx-s3-uploader';

    @NgModule({
        imports: [
            S3UploaderModule.forRoot({
              region: 'REGION',
              bucket: 'BUCKET_NAME',
              credentials: { identityPoolId: 'IDENTITY_POOL_ID' },
            })
        ],
        ...
    })
    export class AppModule {}

Alternatively you can authenticate with the Web Federated Identity method.

    import { S3UploaderModule } from 'ngx-s3-uploader';

    @NgModule({
        imports: [
            S3UploaderModule.forRoot({
              region: 'REGION',
              bucket: 'BUCKET_NAME',
              credentials: { roleArn: 'ROLE_ARN', roleName: 'ROLE_SESSION_NAME', providerId: 'PROVIDER_ID', token: 'ACCESS_TOKEN' },
            })
        ],
        ...
    })
    export class AppModule {}

As the role session name is adviced to pass the name or identifier that is associated with the user.

Now you can use s3-uploader directive in your Angular application:

  <s3-uploader (success)="uploaded($event)" (error)="uploadError($event)"></s3-uploader>

success will be called in case of success with the response data from the successful upload.

A map containing:

Location (String) -- the URL of the uploaded object.
ETag (String) -- the ETag of the uploaded object.
Bucket (String) -- the bucket to which the object was uploaded.
Key (String) -- the key to which the object was uploaded.

error will be called if an error occurred.

If you need direct access to the service you can inject it using Dependency Injection:

    import { S3UploaderService } from 'ngx-s3-uploader';

    @Component({})
    export class AppComponent {
        constructor(private s3UploaderService: S3UploaderService) {}

        private upload(file): void {
            this.s3UploaderService.upload(file, 'ACL_TO_APPLY','KEY<optional>', 'BUCKET_NAME<optional>')
                .subscribe(
                    (data) => {
                        //...
                    },
                    (error) => {
                        //...
                    });
        }
    }

You can also use this service to update logins when using Amazon Cognito Identity:

    import { S3UploaderService } from 'ngx-s3-uploader';

    @Component({})
    export class AppComponent {
        constructor(private s3UploaderService: S3UploaderService) {}

        private facebookLogin(): void {
            FB.login((response) => {
              if (response.authResponse) {
                this.s3UploaderService.authenticate('graph.facebook.com', response.authResponse.accessToken);
              } else {
                console.log('There was a problem logging you in.');
              }
            });
        }
    }