# @aws-amplify/ui-react-storage
## 2.1.2
### Patch Changes
- Updated dependencies [[`e7e75874d`](https://github.com/aws-amplify/amplify-ui/commit/e7e75874dea238046c94e4fdd965029620171254), [`0417bd41c`](https://github.com/aws-amplify/amplify-ui/commit/0417bd41c065673eb70dd916c9008d88671445c9)]:
- @aws-amplify/ui-react@5.0.7
- @aws-amplify/ui@5.6.9
- @aws-amplify/ui-react-core@2.1.28
## 2.1.1
### Patch Changes
- Updated dependencies [[`6b71ec46c`](https://github.com/aws-amplify/amplify-ui/commit/6b71ec46ccbf63c4605c9a57d3ecff098a42938a)]:
- @aws-amplify/ui-react@5.0.6
- @aws-amplify/ui@5.6.8
- @aws-amplify/ui-react-core@2.1.27
## 2.1.0
### Minor Changes
- [#4262](https://github.com/aws-amplify/amplify-ui/pull/4262) [`aea82ff1b`](https://github.com/aws-amplify/amplify-ui/commit/aea82ff1bb6e066ed8b70433f4d72cd34bf0ccae) Thanks [@zchenwei](https://github.com/zchenwei)! - feat(ui-react-storage): Add a new connected component `StorageImage`. It allows you load the images managed by Amplify Storage.
_Example:_
```jsx
import { StorageImage } from '@aws-amplify/ui-react-storage';
;
```
### Patch Changes
- Updated dependencies [[`78fdfd6c8`](https://github.com/aws-amplify/amplify-ui/commit/78fdfd6c8268c56204f905402162ad8cb40a0c8e), [`d3ee05415`](https://github.com/aws-amplify/amplify-ui/commit/d3ee054159e1de81861bcd9273be9b1c87924cf4), [`165a8abbd`](https://github.com/aws-amplify/amplify-ui/commit/165a8abbda8aa3e95fb9466fc60f8694c646d5bc), [`13098b36a`](https://github.com/aws-amplify/amplify-ui/commit/13098b36a75452d839955d141bd25f57538b1a22), [`f0b32d275`](https://github.com/aws-amplify/amplify-ui/commit/f0b32d27509cbc00013e96f6cfc735695b7784c8), [`c3a418d8d`](https://github.com/aws-amplify/amplify-ui/commit/c3a418d8d8bd057c27de59379033c2c538762141), [`37e490d39`](https://github.com/aws-amplify/amplify-ui/commit/37e490d3997a1dc55e2998c277790945921e6dc3), [`6d14bf3f3`](https://github.com/aws-amplify/amplify-ui/commit/6d14bf3f386523bacd6832e56cc5903f644da88e), [`aea82ff1b`](https://github.com/aws-amplify/amplify-ui/commit/aea82ff1bb6e066ed8b70433f4d72cd34bf0ccae)]:
- @aws-amplify/ui@5.6.7
- @aws-amplify/ui-react@5.0.5
- @aws-amplify/ui-react-core@2.1.26
## 2.0.4
### Patch Changes
- Updated dependencies [[`572730f7b`](https://github.com/aws-amplify/amplify-ui/commit/572730f7b16b87a6b2ab0c40116a4c8c5acdbd36)]:
- @aws-amplify/ui-react@5.0.4
## 2.0.3
### Patch Changes
- Updated dependencies [[`b0e16e78c`](https://github.com/aws-amplify/amplify-ui/commit/b0e16e78c6a41945aa79f3e14fa3f9e6cb0e5e76), [`d930e2ed1`](https://github.com/aws-amplify/amplify-ui/commit/d930e2ed17f3e638e2b62699ba2dd164b32f8118)]:
- @aws-amplify/ui-react@5.0.3
- @aws-amplify/ui@5.6.6
- @aws-amplify/ui-react-core@2.1.25
## 2.0.2
### Patch Changes
- Updated dependencies [[`23180b470`](https://github.com/aws-amplify/amplify-ui/commit/23180b470c7b3b78a5970d00f8c2dc5ce8773eff), [`3cecd0765`](https://github.com/aws-amplify/amplify-ui/commit/3cecd0765b46c77c49af24fae7cfb9054ebe2cdb)]:
- @aws-amplify/ui-react-core@2.1.24
- @aws-amplify/ui@5.6.5
- @aws-amplify/ui-react@5.0.2
## 2.0.1
### Patch Changes
- Updated dependencies [[`be856b057`](https://github.com/aws-amplify/amplify-ui/commit/be856b057750f9d2706c2a1e43c6ff1669e50a7b)]:
- @aws-amplify/ui-react@5.0.1
## 2.0.0
### Major Changes
- [#4048](https://github.com/aws-amplify/amplify-ui/pull/4048) [`c19278b0b`](https://github.com/aws-amplify/amplify-ui/commit/c19278b0bee7c9b499bd619c8ee0f458cbb5da83) Thanks [@calebpollman](https://github.com/calebpollman)! - What changed:
- Wrapped StorageManager with ForwardRef to allow for exposed imperative handles and potential future DOM manipulation.
- This allows for clearing of the files list from a separate component where the Storage Manager component is being used.
Why was the change made:
- There was no easy way to clear the list of files without unmounting the component.
- This capability is important when using Storage Manager inside a form. After submit, clear all entries including uploaded files.
How should a customer update their code:
- No changes are required by the customer since the added prop is optional in the Storage Manager component.
- If customers want to take advantage of this change, they can create a files ref and include it in the Storage Manager component, then made calls to clearFiles from the ref.
### Patch Changes
- Updated dependencies [[`c19278b0b`](https://github.com/aws-amplify/amplify-ui/commit/c19278b0bee7c9b499bd619c8ee0f458cbb5da83)]:
- @aws-amplify/ui-react@5.0.0
## 1.2.4
### Patch Changes
- [#4009](https://github.com/aws-amplify/amplify-ui/pull/4009) [`9c0935c6e`](https://github.com/aws-amplify/amplify-ui/commit/9c0935c6e0093c369a4aa2c8177b847f82df11b8) Thanks [@thaddmt](https://github.com/thaddmt)! - fix(storage): allow any file types when using drag/drop
## 1.2.3
### Patch Changes
- Updated dependencies [[`7f59b3c4d`](https://github.com/aws-amplify/amplify-ui/commit/7f59b3c4dd27205a35c1b07ddc0f06a0db9de776), [`ca591a2fc`](https://github.com/aws-amplify/amplify-ui/commit/ca591a2fc319556f705be74bacd141d48f3531bd)]:
- @aws-amplify/ui-react-core@2.1.23
- @aws-amplify/ui-react@4.6.4
- @aws-amplify/ui@5.6.4
## 1.2.2
### Patch Changes
- Updated dependencies [[`62425139f`](https://github.com/aws-amplify/amplify-ui/commit/62425139fb5e41a3b36b46aac1d31b965a2739fc)]:
- @aws-amplify/ui@5.6.3
- @aws-amplify/ui-react@4.6.3
- @aws-amplify/ui-react-core@2.1.22
## 1.2.1
### Patch Changes
- Updated dependencies [[`998a8c74f`](https://github.com/aws-amplify/amplify-ui/commit/998a8c74ff42c250d0d028efb20afa2d54528c86), [`82f3968b7`](https://github.com/aws-amplify/amplify-ui/commit/82f3968b7f750f069bda4ad7bfa9c34d7ee6091f)]:
- @aws-amplify/ui-react-core@2.1.21
- @aws-amplify/ui-react@4.6.2
- @aws-amplify/ui@5.6.2
## 1.2.0
### Minor Changes
- [#3798](https://github.com/aws-amplify/amplify-ui/pull/3798) [`89e67899c`](https://github.com/aws-amplify/amplify-ui/commit/89e67899c1b48b6bb6b235fa22b62e3f6c1e1112) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - feat(storage-manager): make processFile async. This allows for reading the file contents and performing async validations or mutations like creating a hash of the file contents.
```jsx
const processFile = async ({ file }) => {
const fileExtension = file.name.split('.').pop();
return file
.arrayBuffer()
.then((filebuffer) => window.crypto.subtle.digest('SHA-1', filebuffer))
.then((hashBuffer) => {
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray
.map((a) => a.toString(16).padStart(2, '0'))
.join('');
return { file, key: `${hashHex}.${fileExtension}` };
});
};
export const StorageManagerHashExample = () => {
return (
);
};
```
- [#3788](https://github.com/aws-amplify/amplify-ui/pull/3788) [`37d63424e`](https://github.com/aws-amplify/amplify-ui/commit/37d63424e23e971713f76d201ce829ec6974fc54) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - feat(storage-manager): add metadata and the rest of the Storage.put params
```jsx
const processFile = ({ file, key }) => {
return {
file,
key,
metadata: {
id: key,
},
};
};
export function StorageManagerMetadataExample() {
return (
);
}
```
### Patch Changes
- Updated dependencies [[`4ca838978`](https://github.com/aws-amplify/amplify-ui/commit/4ca838978d23a086f80859a7cb57f184ff49e2d4), [`1412aa4eb`](https://github.com/aws-amplify/amplify-ui/commit/1412aa4eb4837c44c4e5ecce66188e1e256f952c), [`d6a3676f2`](https://github.com/aws-amplify/amplify-ui/commit/d6a3676f2295ed39fa83b9d31a9540f3437ba129), [`37d63424e`](https://github.com/aws-amplify/amplify-ui/commit/37d63424e23e971713f76d201ce829ec6974fc54), [`9551c521b`](https://github.com/aws-amplify/amplify-ui/commit/9551c521b8bed4844f5d57a8cf842ed8b5bd6bee)]:
- @aws-amplify/ui@5.6.1
- @aws-amplify/ui-react@4.6.1
- @aws-amplify/ui-react-core@2.1.20
## 1.1.0
### Minor Changes
- [#3669](https://github.com/aws-amplify/amplify-ui/pull/3669) [`5d78e3b4b`](https://github.com/aws-amplify/amplify-ui/commit/5d78e3b4b554f355ecd3a80678e0b9df6be0b228) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - feat(storage-manager): add `onUploadStart` event handler and add the file key to `onUploadError`
```jsx
export function StorageManagerExample() {
const [files, setFiles] = React.useState({});
return (
{
setFiles((prevFiles) => {
return {
...prevFiles,
[key]: undefined,
};
});
}}
onUploadError={(error, { key }) => {
setFiles((prevFiles) => {
return {
...prevFiles,
[key]: {
status: 'error',
},
};
});
}}
onUploadSuccess={({ key }) => {
setFiles((prevFiles) => {
return {
...prevFiles,
[key]: {
status: 'success',
},
};
});
}}
onUploadStart={({ key }) => {
setFiles((prevFiles) => {
return {
...prevFiles,
[key]: {
status: 'uploading',
},
};
});
}}
/>
{Object.keys(files).map((key) => {
return files[key] ? (
{key}: {files[key].status}
) : null;
})}
);
}
```
### Patch Changes
- [#3672](https://github.com/aws-amplify/amplify-ui/pull/3672) [`fed85d4d7`](https://github.com/aws-amplify/amplify-ui/commit/fed85d4d7d54b5f845bc409a9a5f3ca5acd605c6) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - fix(storage): fix defaultFiles
Previously if you added `defaultFiles` to the StorageManager you would get weird behavior saying it was uploading when it actually wasn't. Also if you passed null or improper file objects you would get an error.
- Updated dependencies [[`bc3fd6d95`](https://github.com/aws-amplify/amplify-ui/commit/bc3fd6d951b1ab1b188722f59ce04118d04d16af), [`c3918d9ab`](https://github.com/aws-amplify/amplify-ui/commit/c3918d9aba1a9bedf8f1c8d45097f85b8ca9d482), [`747516159`](https://github.com/aws-amplify/amplify-ui/commit/747516159d504b551dab09cbe8f214fa7b4505df)]:
- @aws-amplify/ui@5.6.0
- @aws-amplify/ui-react@4.6.0
- @aws-amplify/ui-react-core@2.1.19
## 1.0.1
### Patch Changes
- [#3657](https://github.com/aws-amplify/amplify-ui/pull/3657) [`fefc4cb3d`](https://github.com/aws-amplify/amplify-ui/commit/fefc4cb3df12d344792b33ad100c6252c9fa2819) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - Adding in missing changeset from previous release.
- Updated dependencies [[`fefc4cb3d`](https://github.com/aws-amplify/amplify-ui/commit/fefc4cb3df12d344792b33ad100c6252c9fa2819)]:
- @aws-amplify/ui@5.5.10
- @aws-amplify/ui-react@4.5.1
- @aws-amplify/ui-react-core@2.1.18
## 1.0.0
### Major Changes
- [#3589](https://github.com/aws-amplify/amplify-ui/pull/3589) [`3c3fbf4d7`](https://github.com/aws-amplify/amplify-ui/commit/3c3fbf4d73d9381cb3ee6d5590eb97062143f589) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - FileUploader becomes StorageManager!
Creating a new package `@aws-amplify/ui-react-storage` to keep all future Storage related connected components, the first of which is the StorageManager.
The StorageManager is a partial re-write of the FileUploader to address some customer issues and make the component more scalable for the future.
Some notable changes from FileUploader -> StorageManager
- Component slots: You can override each part of the StorageManager with your custom UI
- Pre-upload process files: You can use this to programatically change file names before upload or perform optimizations and validations.
- Easy text updates: The StorageManager component has a `displayText` prop where you can pass in all the text the component uses.
```jsx
import { StorageManager } from '@aws-amplify/ui-react-storage';
export const DefaultStorageManagerExample = () => {
return (
);
};
```
### Patch Changes
- Updated dependencies [[`61f525f53`](https://github.com/aws-amplify/amplify-ui/commit/61f525f531978a894373b41a70bd788d507bb514), [`3c3fbf4d7`](https://github.com/aws-amplify/amplify-ui/commit/3c3fbf4d73d9381cb3ee6d5590eb97062143f589), [`72d5e06eb`](https://github.com/aws-amplify/amplify-ui/commit/72d5e06ebbf024735ec44c04ad6e61b62a7dd20a)]:
- @aws-amplify/ui-react@4.5.0