fix(fileUploader): Rename maxFiles to maxFilesCount (#3377)

* Renamed maxFiles to maxFileCount * Added changeset --------- Co-authored-by: Erik Hanchett <ehhanche@amazon.com>
aws-amplify · Feb 2, 2023 · 6daf2e6 · 6daf2e6
1 parent 5138f67
commit 6daf2e6
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 14 deletions.
diff --git a/.changeset/stale-rabbits-pretend.md b/.changeset/stale-rabbits-pretend.md
@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react': patch
+---
+
+Renamed the maxFiles prop to maxFilesCount
diff --git a/...platform]/connected-components/storage/fileuploader/examples/FileUploaderThemeExample.tsx b/...platform]/connected-components/storage/fileuploader/examples/FileUploaderThemeExample.tsx
@@ -28,7 +28,7 @@ export const FileUploaderThemeExample = () => {
         accessLevel="public"
         hasMultipleFiles={true}
         maxSize={100000000}
-        maxFiles={3}
+        maxFileCount={3}
         provider="fast" // IGNORE
       />
     </ThemeProvider>

diff --git a/...c/pages/[platform]/connected-components/storage/fileuploader/examples/MaxFilesExample.tsx b/...c/pages/[platform]/connected-components/storage/fileuploader/examples/MaxFilesExample.tsx
@@ -3,7 +3,7 @@ import { FileUploader } from '@aws-amplify/ui-react';
 export const MaxFilesExample = () => {
   return (
     <FileUploader
-      maxFiles={3}
+      maxFileCount={3}
       variation="drop"
       acceptedFileTypes={['image/*']}
       accessLevel="public"

diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx
@@ -136,7 +136,7 @@ The following props set limits on what the File Uploader will accept.
 
 ### Max Number of Files
 
-The `maxFiles` prop accepts how many files at one time you can select to upload.  The default is unlimited.
+The `maxFileCount` prop accepts how many files at one time you can select to upload.  The default is unlimited.
 
 <Example>
   <MaxFilesExample />

diff --git a/examples/next/pages/ui/components/storage/file-uploader/index.page.tsx b/examples/next/pages/ui/components/storage/file-uploader/index.page.tsx
@@ -16,7 +16,7 @@ export default function FileUploaderEmail() {
       accessLevel="public"
       hasMultipleFiles={true}
       maxSize={100000000}
-      maxFiles={3}
+      maxFileCount={3}
       isResumable={true}
     />
   );

diff --git a/packages/react/src/components/Storage/FileUploader/FileUploader.tsx b/packages/react/src/components/Storage/FileUploader/FileUploader.tsx
@@ -24,7 +24,7 @@ export function FileUploader({
   acceptedFileTypes,
   shouldAutoProceed = false,
   isPreviewerVisible,
-  maxFiles,
+  maxFileCount,
   maxSize,
   hasMultipleFiles = true,
   onError,
@@ -76,7 +76,8 @@ export function FileUploader({
   // Displays if over max files
 
   const hasMaxFilesError =
-    fileStatuses.filter((file) => file.percentage !== 100).length > maxFiles;
+    fileStatuses.filter((file) => file.percentage !== 100).length >
+    maxFileCount;
 
   useEffect(() => {
     // Loading ends when all files are at 100%
@@ -379,7 +380,7 @@ export function FileUploader({
         isLoading={isLoading}
         isSuccessful={isSuccessful}
         hasMaxFilesError={hasMaxFilesError}
-        maxFiles={maxFiles}
+        maxFileCount={maxFileCount}
         onClear={onClear}
         onFileClick={onFileClick}
         aggregatePercentage={aggregatePercentage}

diff --git a/...ct/src/components/Storage/FileUploader/UploadPreviewer/__tests__/UploadPreviewer.test.tsx b/...ct/src/components/Storage/FileUploader/UploadPreviewer/__tests__/UploadPreviewer.test.tsx
@@ -35,7 +35,7 @@ const commonProps = {
   isLoading: false,
   isSuccessful: false,
   hasMaxFilesError: false,
-  maxFiles: 10,
+  maxFileCount: 10,
   onClear: () => null,
   onFileClick: () => null,
 };

diff --git a/packages/react/src/components/Storage/FileUploader/UploadPreviewer/index.tsx b/packages/react/src/components/Storage/FileUploader/UploadPreviewer/index.tsx
@@ -18,11 +18,13 @@ export function UploadPreviewer({
   isLoading,
   isSuccessful,
   hasMaxFilesError,
-  maxFiles,
+  maxFileCount,
   onClear,
   onFileClick,
 }: PreviewerProps): JSX.Element {
-  const headingMaxFiles = `${translate('Cannot choose more than')} ${maxFiles}`;
+  const headingMaxFiles = `${translate(
+    'Cannot choose more than'
+  )} ${maxFileCount}`;
   const getUploadedFilesLength = () =>
     fileStatuses.filter((file) => file?.fileState === 'success').length;
 

diff --git a/packages/react/src/components/Storage/FileUploader/__tests__/FileUploader.test.tsx b/packages/react/src/components/Storage/FileUploader/__tests__/FileUploader.test.tsx
@@ -573,7 +573,9 @@ describe('File Uploader', () => {
       ...mockReturnUseFileUploader,
     });
 
-    render(<FileUploader {...commonProps} maxFiles={1} isPreviewerVisible />);
+    render(
+      <FileUploader {...commonProps} maxFileCount={1} isPreviewerVisible />
+    );
 
     const uploadFilesText = await screen.findByText(/Upload 1 file/);
 
@@ -600,7 +602,9 @@ describe('File Uploader', () => {
       ...mockReturnUseFileUploader,
     });
 
-    render(<FileUploader {...commonProps} maxFiles={1} isPreviewerVisible />);
+    render(
+      <FileUploader {...commonProps} maxFileCount={1} isPreviewerVisible />
+    );
 
     const errorText = await screen.findByText(/Cannot choose more than 1/);
 

diff --git a/packages/react/src/components/Storage/FileUploader/types.ts b/packages/react/src/components/Storage/FileUploader/types.ts
@@ -17,7 +17,7 @@ export interface FileUploaderProps {
   isPreviewerVisible?: boolean;
   isResumable?: boolean;
   accessLevel: StorageAccessLevel;
-  maxFiles?: number;
+  maxFileCount?: number;
   maxSize?: number;
   onError?: (error: string) => void;
   onSuccess?: (event: { key: string }) => void;
@@ -39,7 +39,7 @@ export interface PreviewerProps {
   isLoading: boolean;
   isSuccessful: boolean;
   hasMaxFilesError: boolean;
-  maxFiles: number;
+  maxFileCount: number;
   onClear: () => void;
   onFileClick: () => void;
 }