diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yaml b/.github/ISSUE_TEMPLATE/1.bug_report.yaml index 72a15e3f990..71b07701ec1 100644 --- a/.github/ISSUE_TEMPLATE/1.bug_report.yaml +++ b/.github/ISSUE_TEMPLATE/1.bug_report.yaml @@ -53,7 +53,7 @@ body: - In-App Messaging - Liveness - Primitive components - - Storage (Storage Manager) + - Storage - Other validations: required: true diff --git a/.github/ISSUE_TEMPLATE/2.feature_request.yaml b/.github/ISSUE_TEMPLATE/2.feature_request.yaml index 0468f324253..efeb82d8a17 100644 --- a/.github/ISSUE_TEMPLATE/2.feature_request.yaml +++ b/.github/ISSUE_TEMPLATE/2.feature_request.yaml @@ -36,7 +36,7 @@ body: - In-App Messaging - Liveness - Primitive components - - Storage (Storage Manager) + - Storage - Other validations: required: true diff --git a/README.md b/README.md index f2bfc8b5b8a..4d04ec6b0ae 100644 --- a/README.md +++ b/README.md @@ -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** | diff --git a/docs/__tests__/__snapshots__/sitemap.test.ts.snap b/docs/__tests__/__snapshots__/sitemap.test.ts.snap index eb9c2373ac3..5d590263cb6 100644 --- a/docs/__tests__/__snapshots__/sitemap.test.ts.snap +++ b/docs/__tests__/__snapshots__/sitemap.test.ts.snap @@ -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, diff --git a/docs/next.config.js b/docs/next.config.js index 5399dfba57f..6cfb25ff4f8 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -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 */ diff --git a/docs/src/data/links.tsx b/docs/src/data/links.tsx index 17f2a6867e1..35f6399b0c0 100644 --- a/docs/src/data/links.tsx +++ b/docs/src/data/links.tsx @@ -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, }, diff --git a/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx b/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx index 6f7d49d1c42..c70a7ee8d50 100644 --- a/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx +++ b/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx @@ -5,9 +5,9 @@ export function NextSteps() { return ( } - href={`storage/storagemanager`} + href={`storage/fileuploader`} desc="Let your users upload files to the cloud" /> diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/ComponentOverrides.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/ComponentOverrides.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/ComponentOverrides.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/ComponentOverrides.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Default.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Default.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Default.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Default.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/DisplayText.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/DisplayText.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/DisplayText.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/DisplayText.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Event.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Event.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Event.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Event.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/FileTypes.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileTypes.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/FileTypes.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileTypes.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Handle.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Handle.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Handle.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Handle.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Hash.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Hash.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Hash.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Hash.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Metadata.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Metadata.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Metadata.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Metadata.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/PathProp.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/PathProp.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/PathProp.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/PathProp.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Resumable.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Resumable.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Resumable.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Resumable.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Theme.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Theme.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/UploadActions.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/UploadActions.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/UploadActions.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/UploadActions.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/i18n.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/i18n.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/i18n.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/i18n.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/index.ts b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/index.ts rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/index.page.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx similarity index 85% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/index.page.mdx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx index 777d631f04e..75e2c6f6eb7 100644 --- a/docs/src/pages/[platform]/connected-components/storage/storagemanager/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx @@ -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 diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/props.ts b/docs/src/pages/[platform]/connected-components/storage/fileuploader/props.ts similarity index 95% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/props.ts rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/props.ts index e516ee4b560..7ff4ae22a7f 100644 --- a/docs/src/pages/[platform]/connected-components/storage/storagemanager/props.ts +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/props.ts @@ -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`, }, { @@ -132,8 +132,8 @@ export const STORAGE_MANAGER = [ }, { name: `ref?`, - description: 'Forward ref prop exposing StorageManager imperative methods.', - type: `React.ForwardedRef`, + description: 'Forward ref prop exposing FileUploader imperative methods.', + type: `React.ForwardedRef`, }, ]; diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx similarity index 74% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/react.mdx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index 699721b0b7d..1d25a6d9700 100644 --- a/docs/src/pages/[platform]/connected-components/storage/storagemanager/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -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' + + 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. +
+ `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`. + + +
+ ## Basic Usage @@ -34,13 +47,13 @@ import { -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. ```jsx -import { StorageManager } from '@aws-amplify/ui-react-storage'; +import { FileUploader } from '@aws-amplify/ui-react-storage'; import '@aws-amplify/ui-react/styles.css'; ``` @@ -60,14 +73,14 @@ At a minimum you must include the `path` and `maxFileCount` props. `path` refers ### 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. ```jsx - `protected/${identityId}/`} maxFileCount={1} @@ -78,6 +91,7 @@ The example below shows configuring the StorageManager to upload to the `protect ### Deprecated props + @@ -124,11 +138,11 @@ The example below shows configuring the StorageManager to upload to the `protect ### Props - + ## 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. @@ -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. @@ -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` @@ -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. @@ -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 `` 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 `` component. By default transfer acceleration is off. ```jsx - ```jsx - { @@ -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. @@ -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. @@ -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. - + diff --git a/docs/src/pages/[platform]/connected-components/storage/react.mdx b/docs/src/pages/[platform]/connected-components/storage/react.mdx index c93d06b70c8..ceba8f33a18 100644 --- a/docs/src/pages/[platform]/connected-components/storage/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/react.mdx @@ -63,7 +63,7 @@ To use Storage UI components with Amplify, you'll need to call `Amplify.configur ```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 ( <> - + ); }; diff --git a/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx b/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx index 36cb132235e..82a9d3f88f9 100644 --- a/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx +++ b/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx @@ -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. diff --git a/docs/src/pages/[platform]/theming/icons/react.mdx b/docs/src/pages/[platform]/theming/icons/react.mdx index 8644075a654..32e35893e02 100644 --- a/docs/src/pages/[platform]/theming/icons/react.mdx +++ b/docs/src/pages/[platform]/theming/icons/react.mdx @@ -32,6 +32,7 @@ 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) @@ -39,7 +40,6 @@ The components and their icons that can be overridden are: * [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 diff --git a/docs/src/utils/storageMock.ts b/docs/src/utils/storageMock.ts index d6ee2bcdde8..fadba6d254e 100644 --- a/docs/src/utils/storageMock.ts +++ b/docs/src/utils/storageMock.ts @@ -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 {