The library is inspired by AngularJS To S3 Upload App
To install this library, run:
$ npm install ngx-s3-uploader --save 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', '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.');
}
});
}
}- Allow access token to be updated after initialization when Web Federated Identity method is used.
MIT © Jaime
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent