feat(FileUpload): add onReupload prop in case of error state (#2201)

razorpay · May 29, 2024 · 2a4d167 · 2a4d167
1 parent c564d19
commit 2a4d167
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 6 deletions.
diff --git a/.changeset/eight-elephants-grin.md b/.changeset/eight-elephants-grin.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat(FileUpload): add `onReupload` prop to use in case of error state
diff --git a/packages/blade/src/components/FileUpload/FileUpload.web.tsx b/packages/blade/src/components/FileUpload/FileUpload.web.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, forwardRef } from 'react';
+import { useState, useCallback, useMemo, useRef, forwardRef } from 'react';
 import type { FileUploadProps, BladeFile, BladeFileList } from './types';
 import { StyledFileUploadWrapper } from './StyledFileUploadWrapper';
 import {
@@ -24,6 +24,7 @@ import type { BladeElementRef } from '~utils/types';
 import { getHintType } from '~components/Input/BaseInput/BaseInput';
 import { makeAccessible } from '~utils/makeAccessible';
 import { formHintLeftLabelMarginLeft } from '~components/Input/BaseInput/baseInputTokens';
+import { useMergeRefs } from '~utils/useMergeRefs';
 
 const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadProps> = (
   {
@@ -33,6 +34,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
     onChange,
     onPreview,
     onRemove,
+    onReupload,
     onDismiss,
     onDrop,
     isDisabled,
@@ -53,6 +55,8 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
   },
   ref,
 ): React.ReactElement => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const mergedRef = useMergeRefs(ref, inputRef);
   const { platform } = useTheme();
   const [selectedFiles, setSelectedFiles] = useState<BladeFileList>(fileList ?? []);
   const [errorMessage, setErrorMessage] = useState(errorText);
@@ -262,7 +266,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
                     onBlur: () => setIsActive(false),
                     ...accessibilityProps,
                   }}
-                  ref={ref}
+                  ref={mergedRef}
                 />
 
                 <Box
@@ -305,6 +309,20 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
               setSelectedFiles(newFiles);
               onRemove?.({ file: selectedFiles[0] });
             }}
+            onReupload={() => {
+              const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);
+              setSelectedFiles(newFiles);
+              inputRef.current?.click();
+
+              // TODO - Remove this in the next major release
+              // Fallback to onRemove if onReupload isn't provided to avoid breaking changes in the API
+              if (onReupload) {
+                onReupload({ file: selectedFiles[0] });
+              } else {
+                onRemove?.({ file: selectedFiles[0] });
+              }
+              setIsActive(false);
+            }}
             onDismiss={() => {
               const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id);
               setSelectedFiles(newFiles);
@@ -353,6 +371,19 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
                 setSelectedFiles(newFiles);
                 onRemove?.({ file });
               }}
+              onReupload={() => {
+                const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
+                setSelectedFiles(newFiles);
+                inputRef.current?.click();
+                // TODO - Remove this in the next major release
+                // Fallback to onRemove if onReupload isn't provided to avoid breaking changes in the API
+                if (onReupload) {
+                  onReupload({ file: selectedFiles[0] });
+                } else {
+                  onRemove?.({ file: selectedFiles[0] });
+                }
+                setIsActive(false);
+              }}
               onDismiss={() => {
                 const newFiles = selectedFiles.filter(({ id }) => id !== file.id);
                 setSelectedFiles(newFiles);

diff --git a/packages/blade/src/components/FileUpload/FileUploadItem.tsx b/packages/blade/src/components/FileUpload/FileUploadItem.tsx
@@ -2,19 +2,21 @@ import { memo } from 'react';
 import { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper';
 import type { FileUploadItemProps } from './types';
 import { FileUploadItemIcon } from './FileUploadItemIcon';
-import { TrashIcon, EyeIcon, CloseIcon, CheckCircleIcon } from '~components/Icons';
+import { TrashIcon, EyeIcon, CloseIcon, CheckCircleIcon, RefreshIcon } from '~components/Icons';
 import { BaseBox } from '~components/Box/BaseBox';
 import { Text } from '~components/Typography';
 import { Divider } from '~components/Divider';
 import { IconButton } from '~components/Button/IconButton';
 import { ProgressBar } from '~components/ProgressBar';
 import isUndefined from '~utils/lodashButBetter/isUndefined';
+import { BaseLink } from '~components/Link/BaseLink';
 
 const FileUploadItem = memo(
   ({
     file,
     onPreview,
     onRemove,
+    onReupload,
     onDismiss,
     size: containerSize,
   }: FileUploadItemProps): React.ReactElement => {
@@ -73,14 +75,29 @@ const FileUploadItem = memo(
                   } ${isUploading && uploadPercent ? `(${uploadPercent}%)` : ''}`}
               </Text>
             </BaseBox>
-            {status === 'error' || status === 'uploading' ? (
+            {status === 'uploading' ? (
               <BaseBox>
                 <IconButton
                   accessibilityLabel="Remove File"
                   icon={CloseIcon}
                   onClick={() => onDismiss?.({ file })}
                 />
               </BaseBox>
+            ) : status === 'error' ? (
+              <BaseBox display="flex" flexDirection="row" alignItems="center">
+                <BaseLink
+                  marginX="spacing.1"
+                  variant="button"
+                  icon={RefreshIcon}
+                  color="negative"
+                  size="small"
+                  onClick={() => {
+                    onReupload?.({ file });
+                  }}
+                >
+                  Re-upload
+                </BaseLink>
+              </BaseBox>
             ) : (
               <BaseBox display="flex" flexDirection="row" alignItems="center">
                 {onPreview ? (

diff --git a/packages/blade/src/components/FileUpload/StyledFileUploadItemWrapper.tsx b/packages/blade/src/components/FileUpload/StyledFileUploadItemWrapper.tsx
@@ -23,7 +23,7 @@ const StyledFileUploadItemWrapper = styled(BaseBox)<StyledFileUploadItemWrapperP
       display: 'flex',
       justifyContent: 'space-between',
       borderStyle: 'solid',
-      height: makeSize(fileUploadHeightTokens[size]),
+      minHeight: makeSize(fileUploadHeightTokens[size]),
       width: '100%',
       backgroundColor: getIn(theme.colors, fileUploadItemBackgroundColors[status].default),
       transitionProperty: 'background-color',

diff --git a/packages/blade/src/components/FileUpload/types.ts b/packages/blade/src/components/FileUpload/types.ts
@@ -81,6 +81,10 @@ type FileUploadCommonProps = {
    * Callback function triggered when a file is removed
    */
   onRemove?: ({ file }: { file: File }) => void;
+  /**
+   * Callback function triggered when a file upload is retried
+   */
+  onReupload?: ({ file }: { file: File }) => void;
   /**
    * Callback function triggered when a file upload is dismissed
    */
@@ -146,7 +150,7 @@ type FileUploadProps = (FileUploadPropsWithA11yLabel | FileUploadPropsWithLabel)
 
 type FileUploadItemProps = Pick<
   FileUploadProps,
-  'onPreview' | 'onRemove' | 'onDismiss' | 'size'
+  'onPreview' | 'onRemove' | 'onDismiss' | 'onReupload' | 'size'
 > & {
   file: BladeFile;
 };