@transferwise/components 46.100.2 → 46.102.0

package/src/upload/Upload.tsx

@@ -10,7 +10,6 @@ import messages from './Upload.messages';
 import { UploadImageStep, ProcessingStep, CompleteStep } from './steps';
 import { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from './utils';
 import { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';
-import { ProcessIndicatorStatus } from '../processIndicator';
 
 export const MAX_SIZE_DEFAULT = 5000000;
 
@@ -31,10 +30,14 @@ export interface UploadProps extends WrappedComponentProps {
   };
   /**
    * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
-   * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
+   * `function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>`
    */
   fetcher?: PostDataFetcher;
-  maxSize?: number;
+  /**
+   * Filesize expressed in B.<br />If set to `null`, no size limit will be applied.
+   * @default 5000000 (5 MB)
+   */
+  maxSize?: number | null;
   psButtonText?: string;
   psButtonDisabled?: boolean;
   psProcessingText?: string;
@@ -114,9 +117,9 @@ export class Upload extends Component<UploadProps, UploadState> {
       case 413:
         return (
           csTooLargeMessage ||
-          intl.formatMessage(messages.csTooLargeMessage, {
-            maxSize: roundFileSize(maxSize),
-          })
+          (typeof maxSize === 'number'
+            ? intl.formatMessage(messages.csTooLargeMessage, { maxSize: roundFileSize(maxSize) })
+            : intl.formatMessage(messages.csTooLargeNoLimitMessage))
         );
       case 415:
         return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);
@@ -279,7 +282,7 @@ export class Upload extends Component<UploadProps, UploadState> {
       return false;
     }
 
-    if (!isSizeValid(file, maxSize)) {
+    if (typeof maxSize === 'number' && !isSizeValid(file, maxSize)) {
       this.asyncResponse(
         new ResponseError(
           new Response(null, {
@@ -344,6 +347,18 @@ export class Upload extends Component<UploadProps, UploadState> {
       uploadedImage,
     } = this.state;
 
+    const placeholder = ((): string => {
+      if (usPlaceholder) {
+        return usPlaceholder;
+      }
+
+      if (typeof maxSize === 'number') {
+        return intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) });
+      }
+
+      return intl.formatMessage(messages.usPlaceholderNoLimit);
+    })();
+
     return (
       <div
         className={clsx('droppable-area', {
@@ -370,10 +385,7 @@ export class Upload extends Component<UploadProps, UploadState> {
             usDisabled={usDisabled}
             usHelpImage={usHelpImage}
             usLabel={usLabel}
-            usPlaceholder={
-              usPlaceholder ||
-              intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })
-            }
+            usPlaceholder={placeholder}
           />
         )}
 
@@ -400,10 +412,7 @@ export class Upload extends Component<UploadProps, UploadState> {
             usDisabled={usDisabled}
             usHelpImage={null}
             usLabel={usLabel}
-            usPlaceholder={
-              usPlaceholder ||
-              intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })
-            }
+            usPlaceholder={placeholder}
             errorMessage={this.getErrorMessage(
               response != null &&
                 typeof response === 'object' &&

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -233,6 +233,13 @@ export const WithFileSizeErrorMessage: Story = {
   },
 };
 
+export const WithNoSizeLimit: Story = {
+  args: {
+    ...props,
+    sizeLimit: null,
+  },
+};
+
 export const WithCustomUploadButtonTitle: Story = {
   args: {
     ...props,

package/src/uploadInput/UploadInput.tsx

@@ -91,7 +91,7 @@ export type UploadInputProps = {
   maxFilesErrorMessage?: string;
 
   /**
-   * Error message to show when files over a allowed size limit are uploaded
+   * Error message to show when files over allowed size limit are uploaded
    */
   sizeLimitErrorMessage?: string;
 } & Pick<
@@ -269,7 +269,7 @@ const UploadInput = ({
           continue;
         }
 
-        if (!isSizeValid(file, sizeLimit * 1000)) {
+        if (typeof sizeLimit === 'number' && !isSizeValid(file, sizeLimit * 1000)) {
           const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);
           handleFileUploadFailure(file, failureMessage);
           continue;

package/src/uploadInput/uploadButton/UploadButton.spec.tsx

@@ -96,6 +96,12 @@ describe('UploadButton', () => {
       expect(screen.getByText('All file types, less than 5MB')).toBeInTheDocument();
     });
 
+    it('should show no file size limit if sizeLimit is set to `null`', () => {
+      renderComponent({ ...props, fileTypes: ['*'], sizeLimit: null });
+      expect(screen.getByText('All file types')).toBeInTheDocument();
+      expect(screen.queryByText(/less than/i)).not.toBeInTheDocument();
+    });
+
     it('should show custom description if provided', () => {
       const description = 'Test description';
       renderComponent({ ...props, fileTypes: ['*'], description });

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -42,9 +42,11 @@ export type UploadButtonProps = {
   fileTypes?: AllowedFileTypes;
 
   /**
-   * Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)
+   * Size limit in KBs (1000 KB = 1 MB).
+   * If set to `null`, no size limit will be applied.
+   * @default 5000
    */
-  sizeLimit?: number;
+  sizeLimit?: number | null;
 
   /**
    * Description for the upload button
@@ -173,10 +175,14 @@ const UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(
       const derivedFileDescription =
         fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
 
-      return formatMessage(MESSAGES.instructions, {
-        fileTypes: derivedFileDescription,
-        size: Math.round(sizeLimit / 1000),
-      });
+      if (typeof sizeLimit === 'number') {
+        return formatMessage(MESSAGES.instructions, {
+          fileTypes: derivedFileDescription,
+          size: Math.round(sizeLimit / 1000),
+        });
+      }
+
+      return derivedFileDescription;
     }
 
     function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {