aws-amplify · jordanvn · Sep 5, 2024 · Aug 27, 2024 · Aug 27, 2024 · Aug 28, 2024
@@ -53,7 +53,7 @@ body:
         - In-App Messaging
         - Liveness
         - Primitive components
-        - Storage (Storage Manager)
+        - Storage
         - Other
     validations:
       required: true

@@ -36,7 +36,7 @@ body:
         - In-App Messaging
         - Liveness
         - Primitive components
-        - Storage (Storage Manager)
+        - Storage
         - Other
     validations:
       required: true

@@ -42,7 +42,8 @@ Amplify UI is an open-source UI library with cloud-connected components that are
 | In-App Messaging                |    ✅     |        ✅        |             |         |
 | Geo (MapView)                   |    ✅     |                  |             |         |
 | Account Settings                |    ✅     |                  |             |         |
-| Storage (StorageManager)        |    ✅     |                  |             |         |
+| Storage (FileUploader)          |    ✅     |                  |             |         |
+| Storage (StorageImage)          |    ✅     |                  |             |         |
 | Liveness (FaceLivenessDetector) |    ✅     |                  |             |         |
 
 | **Primitives**   | **React** | **Angular** | **Vue** |

@@ -108,8 +108,8 @@ exports[`Sitemap Snapshot 1`] = `
 /react/connected-components/liveness/customization, 
 /react/connected-components/liveness/troubleshooting, 
 /react/connected-components/storage, 
+/react/connected-components/storage/fileuploader, 
 /react/connected-components/storage/storageimage, 
-/react/connected-components/storage/storagemanager, 
 /react/getting-started/accessibility, 
 /react/getting-started/figma, 
 /react/getting-started/installation, 

@@ -165,6 +165,14 @@ module.exports = withNextPluginPreval({
         destination: '/react/components/accordion',
         permanent: false,
       },
+      /**
+       * Renamed "Storage Manager" to "File Uploader"
+       */
+      {
+        source: '/react/connected-components/storage/storagemanager',
+        destination: '/react/connected-components/storage/fileuploader',
+        permanent: true,
+      },
       /**
        * Redirect traffic from CRA to Vite getting started page
        */

@@ -211,9 +211,9 @@ export const connectedComponents: ComponentNavItem[] = [
     tertiary: true,
   },
   {
-    href: '/connected-components/storage/storagemanager',
-    label: 'Storage Manager',
-    body: 'StorageManager component allows users to upload and manage files in your Amplify backend.',
+    href: '/connected-components/storage/fileuploader',
+    label: 'File Uploader',
+    body: 'FileUploader component allows users to upload and manage files in your Amplify backend.',
     platforms: ['react'],
     tertiary: true,
   },

@@ -5,9 +5,9 @@ export function NextSteps() {
   return (
     <CardLinkGroup title="Next steps" id="next-steps">
       <CardLink
-        title="Storage Manager component"
+        title="File Uploader component"
         icon={<MdCloudUpload />}
-        href={`storage/storagemanager`}
+        href={`storage/fileuploader`}
         desc="Let your users upload files to the cloud"
       />
     </CardLinkGroup>

@@ -1,6 +1,6 @@
 ---
-title: Storage Manager
-description: The Storage Manager lets your users upload and manage files to the cloud.
+title: FileUploader
+description: The FileUploader lets your users upload and manage files in the cloud.
 themeSource: packages/ui/src/theme/tokens/components/storagemanager.ts
 reactSource: packages/react-storage/src/components/StorageManager/StorageManager.tsx
 supportedFrameworks: react

@@ -13,12 +13,12 @@ const children = {
 const displayText = {
   name: `displayText`,
   description: 'Test strings that are used in the component',
-  type: `StorageManagerDisplayText`,
+  type: `FileUploaderDisplayText`,
 };
 
 const eventHandler = `(file: {key: string}) => void;`;
 
-export const STORAGE_MANAGER = [
+export const FILE_UPLOADER = [
   {
     name: `path`,
     description:
@@ -93,7 +93,7 @@ export const STORAGE_MANAGER = [
   {
     name: `displayText?`,
     description: 'Text to override in the component.',
-    type: 'StorageManagerDisplayText',
+    type: 'FileUploaderDisplayText',
   },
   {
     name: `useAccelerateEndpoint?`,
@@ -102,7 +102,7 @@ export const STORAGE_MANAGER = [
   },
   {
     name: `components?.Container?`,
-    description: 'The container the StorageManager is wrapped in.',
+    description: 'The container the FileUploader is wrapped in.',
     type: `React.ComponentType<ContainerProps>`,
   },
   {
@@ -132,8 +132,8 @@ export const STORAGE_MANAGER = [
   },
   {
     name: `ref?`,
-    description: 'Forward ref prop exposing StorageManager imperative methods.',
-    type: `React.ForwardedRef<StorageManagerHandle>`,
+    description: 'Forward ref prop exposing FileUploader imperative methods.',
+    type: `React.ForwardedRef<FileUploaderHandle>`,
   },
 ];
 

@@ -7,7 +7,7 @@ import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
 import { Example, ExampleCode } from '@/components/Example';
 import { Fragment } from '@/components/Fragment';
 import { InstallScripts } from '@/components/InstallScripts';
-import { STORAGE_MANAGER, FILE_PICKER, DROPZONE_PROPS, DISPLAY_TEXT } from './props';
+import { FILE_UPLOADER, FILE_PICKER, DROPZONE_PROPS, DISPLAY_TEXT } from './props';
 import {
   DefaultExample,
   ComponentOverridesExample,
@@ -24,6 +24,19 @@ import {
   UploadActionsExample,
 } from './examples'
 
+<Alert variation="info" heading="Storage Manager is renamed">
+  Beginning with _@aws-amplify/ui-react-storage_ version 3.3.0, the `StorageManager`
+  component has been renamed to `FileUploader`. To migrate, upgrade to the
+  latest version of _@aws-amplify/ui-react-storage_ and replace `StorageManager`
+  related imports with their corresponding `FileUploader` equivalents.
+  <br />
+  `StorageManager` will continue to receive official support until the next major
+  version release of _@aws-amplify/ui-react-storage_, at which point `StorageManager`
+  will be replaced by `FileUploader`.
+</Alert>
+
+<br />
+
 <DefaultExample />
 
 ## Basic Usage
@@ -34,13 +47,13 @@ import {
 
 <AppDirectoryAlert />
 
-To use the StorageManager component import it into your React application with the included styles. 
+To use the FileUploader component import it into your React application with the included styles. 
 
 <InstallScripts component="storage" />
 
 <ExampleCode>
 ```jsx
-import { StorageManager } from '@aws-amplify/ui-react-storage';
+import { FileUploader } from '@aws-amplify/ui-react-storage';
 import '@aws-amplify/ui-react/styles.css';
 ```
 </ExampleCode>
@@ -60,14 +73,14 @@ At a minimum you must include the `path` and `maxFileCount` props. `path` refers
 </Example>
 
 ### Private or Protected Buckets
-When uploading to private or protected S3 buckets, you'll need to wrap your app in the `Authenticator`, allowing the `StorageManager` component to infer the Cognito `identityId` of the currently signed-in user. This can be done directly with the `Authenticator` component or with `withAuthenticator`, as shown in [Add the Authenticator](/connected-components/authenticator#step-3-add-the-authenticator).
+When uploading to private or protected S3 buckets, you'll need to wrap your app in the `Authenticator`, allowing the `FileUploader` component to infer the Cognito `identityId` of the currently signed-in user. This can be done directly with the `Authenticator` component or with `withAuthenticator`, as shown in [Add the Authenticator](/connected-components/authenticator#step-3-add-the-authenticator).
 
-The example below shows configuring the StorageManager to upload to the `protected` folder under the users' identity id.
+The example below shows configuring the FileUploader to upload to the `protected` folder under the users' identity id.
 
 <Example>
   <ExampleCode>
     ```jsx
-    <StorageManager
+    <FileUploader
       acceptedFileTypes={['image/*']}
       path={({ identityId }) => `protected/${identityId}/`}
       maxFileCount={1}
@@ -78,6 +91,7 @@ The example below shows configuring the StorageManager to upload to the `protect
 </Example>
 
 ### Deprecated props
+
 <Accordion.Container>
   <Accordion.Item key={"title"} value={"title"}>
     <Accordion.Trigger>
@@ -124,11 +138,11 @@ The example below shows configuring the StorageManager to upload to the `protect
 
 ### Props
 
-<ReactPropsTable props={STORAGE_MANAGER} />
+<ReactPropsTable props={FILE_UPLOADER} />
 
 ## Manually Upload
 
-The default behavior of the Storage Manager component is to automatically start the upload after a file is selected. If you wish to change that, set the value of the `autoUpload` prop to false.
+The default behavior of the File Uploader component is to automatically start the upload after a file is selected. If you wish to change that, set the value of the `autoUpload` prop to false.
 
 <Example>
   <UploadActionsExample />
@@ -171,7 +185,7 @@ A resumable upload will upload the file in chunks. This allows users to pause an
 
 You might want to process or modify the file(s) and/or file name(s) before they are uploaded. One common situation is you may want to ensure files uploaded are at unique keys by hashing the file contents and using that as the key rather than the filename.
 
-You can pass a `processFile` function to the StorageManager which accepts an object with `file`: [File](https://developer.mozilla.org/en-US/docs/Web/API/File), and `key`: string, and should return an object with file, key, and any other Storage configurations. The `processFile` can either return synchronously or return a Promise. This example uses a Promise to read the contents of the file and create a hash for the key.
+You can pass a `processFile` function to the FileUploader which accepts an object with `file`: [File](https://developer.mozilla.org/en-US/docs/Web/API/File), and `key`: string, and should return an object with file, key, and any other Storage configurations. The `processFile` can either return synchronously or return a Promise. This example uses a Promise to read the contents of the file and create a hash for the key.
 
 <Example>
   <HashExample />
@@ -190,7 +204,7 @@ You can also add any other [Amplify Storage options](https://docs.amplify.aws/re
 
 ## Event Handling
 
-The StorageManager component has several event handlers: `onUploadStart`, `onUploadSuccess`, `onUploadError`, and `onFileRemove`
+The FileUploader component has several event handlers: `onUploadStart`, `onUploadSuccess`, `onUploadError`, and `onFileRemove`
 
 <Example>
   <EventExample />
@@ -206,7 +220,7 @@ Be careful setting state in the `onUploadSuccess` because that function is bound
 
 ## `path` Usage
 
-The `path` prop of the `StorageManager` is prepended to the `key` value (resolved from either the file itself or the returned `key` of `processFile`) submitted to S3. Using a `'/'` as the last character of `path` allows uploading to a specific folder inside the provided `accessLevel` folder.
+The `path` prop of the `FileUploader` is prepended to the `key` value (resolved from either the file itself or the returned `key` of `processFile`) submitted to S3. Using a `'/'` as the last character of `path` allows uploading to a specific folder inside the provided `accessLevel` folder.
 
 <Example>
   <ExampleCode>
@@ -233,12 +247,12 @@ You can add metadata by adding a `metadata` object in the return object of `proc
 
 Amazon S3 transfer acceleration optimizes transfer speeds from around the world into S3 buckets. When you use Transfer Acceleration, additional data transfer charges might apply. For more information about pricing, see [Amazon S3 pricing](https://aws.amazon.com/s3/pricing/).
 
-To use transfer acceleration you first need to [enable it on your S3 bucket](https://docs.amplify.aws/react/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration). Then add `useAccelerateEndpoint` on the `<StorageManager />` component. By default transfer acceleration is off. 
+To use transfer acceleration you first need to [enable it on your S3 bucket](https://docs.amplify.aws/react/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration). Then add `useAccelerateEndpoint` on the `<FileUploader />` component. By default transfer acceleration is off. 
 
 <ExampleCode>
 
 ```jsx
-<StorageManager
+<FileUploader
   acceptedFileTypes={['image/*']}
   maxFileCount={10}
   useAccelerateEndpoint
@@ -252,7 +266,7 @@ You can also choose whether or not to use transfer acceleration at the file leve
 <ExampleCode>
 
 ```jsx
-<StorageManager
+<FileUploader
   acceptedFileTypes={['image/*']}
   maxFileCount={10}
   processFile={({ file, key }) => {
@@ -271,7 +285,7 @@ You can also choose whether or not to use transfer acceleration at the file leve
 
 ### Text and labels
 
-All text in the StorageManager component is customizable with the `displayText` prop. 
+All text in the FileUploader component is customizable with the `displayText` prop. 
 
 <Example>
   <DisplayTextExample />
@@ -306,7 +320,7 @@ You can use the `displayText` prop to also support different languages. Use an o
 
 ### Component overrides
 
-Don't like how things look? Use your own components inside the StorageManager! You can pass your own components with the `components` prop. The available components to override are: `Container`, `FileList`, `FileListHeader`, `FileListFooter`, `DropZone`, and `FilePicker`. 
+Don't like how things look? Use your own components inside the FileUploader! You can pass your own components with the `components` prop. The available components to override are: `Container`, `FileList`, `FileListHeader`, `FileListFooter`, `DropZone`, and `FilePicker`. 
 
 _You can even use a completely different UI kit like MUI, Chakra, or your own design system!_
 
@@ -341,7 +355,7 @@ _You can even use a completely different UI kit like MUI, Chakra, or your own de
 
 ### Imperative handles
 
-The `files` state is managed within the `StorageManager` component itself. To allow for clearing the internal `files` state, `StorageManager` exposes a custom ref handle to the parent component with a `clearFiles` method.
+The `files` state is managed within the `FileUploader` component itself. To allow for clearing the internal `files` state, `FileUploader` exposes a custom ref handle to the parent component with a `clearFiles` method.
 
 <Example>
   <HandleExample />
@@ -364,6 +378,6 @@ The `files` state is managed within the `StorageManager` component itself. To al
 
 ### Target Classes
 
-If you like, you can target classes directly or use CSS variables to make changes to the look and feel of the Storage Manager. 
+If you like, you can target classes directly or use CSS variables to make changes to the look and feel of the File Uploader. 
 
-<ComponentStyleDisplay componentName="StorageManager" />
+<ComponentStyleDisplay componentName="FileUploader" />
@@ -63,7 +63,7 @@ To use Storage UI components with Amplify, you'll need to call `Amplify.configur
   <ExampleCode>
     ```tsx
     import { Amplify } from 'aws-amplify';
-    import { StorageImage, StorageManager } from '@aws-amplify/ui-react-storage';
+    import { StorageImage, FileUploader } from '@aws-amplify/ui-react-storage';
     import awsExports from './aws-exports';
 
     Amplify.configure(awsExports);
@@ -72,7 +72,7 @@ To use Storage UI components with Amplify, you'll need to call `Amplify.configur
       return (
         <>
           <StorageImage alt="sleepy-cat" path="public/cat.jpeg" />
-          <StorageManager path="my_prefix/public" maxFileCount={3} />
+          <FileUploader path="my_prefix/public" maxFileCount={3} />
         </>
       );
     };

@@ -830,8 +830,4 @@ The 3.x version of `@aws-amplify/ui-react-storage` has a minimum dependency of 6
 
 #### 1. public accessLevel becomes 'guest' in Storage components
 
-Starting in v6 of the Amplify JS libraries, `'public'` access level, meaning unauthentiated users can access it, became `'guest'`. The `accessLevel` property on StorageManager and StorageImage components have been updated to reflect this change. 
-
-#### 2. Removal of FileUploader
-
-The FileUploader component was the predecessor to the [`StorageManager`](../connected-components/storage/storagemanager) component. In this major version we are removing the FileUploader component. Please use the StorageManager component which covers all of the use-cases of FileUploader and more. 
+Starting in v6 of the Amplify JS libraries, `'public'` access level, meaning unauthentiated users can access it, became `'guest'`. The `accessLevel` property on FileUploader and StorageImage components have been updated to reflect this change.
@@ -32,14 +32,14 @@ The components and their icons that can be overridden are:
 * [Accordion](../components/accordion)
 * [Alert](../components/alert)
 * [Checkbox](../components/checkboxfield)
+* [FileUploader](../connected-components/storage/fileuploader)
 * [Menu](../components/menu)
 * [Pagination](../components/pagination)
 * [PasswordField](../components/passwordfield)
 * [Rating](../components/rating)
 * [SearchField](../components/searchfield)
 * [SelectField](../components/selectfield)
 * [StepperField](../components/stepperfield)
-* [StorageManager](../connected-components/storage/storagemanager)
 
 Here is the full list of icons you can customize with the IconProvider
 

@@ -15,7 +15,7 @@ const defaultConfig = {
 
 /**
  * https://docs.amplify.aws/lib/storage/custom-plugin/q/platform/js/
- * Mocking out the Storage class so we can render the StorageManager component
+ * Mocking out the Storage class so we can render the FileUploader component
  * without an Amplify backend.
  */
 // export default class MyStorageProvider implements StorageProvider {