import all0 from "/src/fragments/ui/web/installation.mdx";

<Fragments fragments={{all: all0}} />

## Usage

<FilterContent framework="react">

```jsx
import React from "react";
import { Amplify } from "aws-amplify";
import { AmplifyS3ImagePicker } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

const App = () => <AmplifyS3ImagePicker />;
```

</FilterContent>

<FilterContent framework="angular">

import all1 from "/src/fragments/ui/angular/configure-module.mdx";

<Fragments fragments={{all: all1}} />

_app.component.html_

```html
<amplify-s3-image-picker></amplify-s3-image-picker>
```

</FilterContent>

<FilterContent framework="vue">

import all3 from "/src/fragments/ui/vue/configure-app.mdx";

<Fragments fragments={{all: all3}} />

_App.vue_

```html
<template>
  <amplify-s3-image-picker />
</template>
```

</FilterContent>

<UiComponentProps tag="amplify-s3-image-picker" propType="attr" useTableHeaders></UiComponentProps>

## Migration

To migrate from using the `aws-amplify-<framework>` library to the latest `@aws-amplify/ui-<framework>` library use the steps below:

import all4 from "/src/fragments/ui/web/installation-diff.mdx";

<Fragments fragments={{all: all4}} />

### Usage

<FilterContent framework="react">

```diff
- import { S3Image } from 'aws-amplify-react';
+ import { AmplifyS3ImagePicker } from '@aws-amplify/ui-react';

const App = () => (

+ <AmplifyS3ImagePicker />
- <S3Image picker/>

);
```

</FilterContent>

<FilterContent framework="angular">

import all5 from "/src/fragments/ui/angular/configure-module-diff.mdx";

<Fragments fragments={{all: all5}} />

_app.component.html_

```diff
+ <amplify-s3-image-picker></amplify-s3-image-picker>
- <s3-image picker></s3-image>
```

</FilterContent>

<FilterContent framework="vue">

import all7 from "/src/fragments/ui/vue/configure-app-diff.mdx";

<Fragments fragments={{all: all7}} />

_App.vue_

```diff
 <template>
- <s3-image picker/>
+ <amplify-s3-image-picker/>
 </template>
```

</FilterContent>

If you want to use `S3Image` without `picker` property enabled, please see the documentation for [`S3Image`](/ui/storage/s3-image).