FR (StorageImage): S3-image-component for Angular

[SilverLinings89]

On which framework/platform would you like to see this feature implemented?

Angular

Which UI component is this feature-request for?

Storage

Please describe your feature-request in detail.

Well, this used to exist. We use it for the profile pictures of our users. We store the profile pictures of our users in an S3 bucket and would love to have a component that can also cache images you have shown before. The other methods of downloading an item from S3 would require a custom implementation of caching, which is a nightmare.

An alternative would be to provide an option to set up a bucket for sharing static website delivery. We have many stages and deploy them automatically, and afaik we cannot set them up for static web content delivery from within amplify.

The old image component was exactly what we wanted and used heavily. It was deprecated without replacement, and for that reason, we cannot upgrade our amplify UI library version.

Please describe a solution you'd like.

The old connected S3 image component for angular with Ivy support, i.e. for modern angular versions.

We love contributors! Is this something you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[luisalbertoj]

This component is very useful. I hope it will be migrated to the new version of the library.

[wlee221]

Hi @luisalbertoj and @SilverLinings89!

Note that you can use the legacy components by using npm alias:

npm i @aws-amplify/ui-angular-v2@npm:@aws-amplify/ui-angular@^2.4.27

Then you can use the legacy components by registering LegacyAmplifyUiModule in your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
+ import { LegacyAmplifyUiModule } from '@aws-amplify/ui-angular-v2/legacy';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
+ imports: [BrowserModule, AmplifyAuthenticatorModule, LegacyAmplifyUiModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Obviously this is a workaround until we have better support for s3 components, but this will at least allow you to keep using the legacy components.