fix: handle duplicate and long file name

Expensify · Oct 24, 2024 · fc154dc · fc154dc
1 parent cfceae4
commit fc154dc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/src/components/AttachmentPicker/types.ts b/src/components/AttachmentPicker/types.ts
@@ -4,7 +4,7 @@ import type {FileObject} from '@components/AttachmentModal';
 import type CONST from '@src/CONST';
 
 type PickerOptions = {
-    /** A callback that will be called with the selected attachment. */
+    /** A callback that will be called with the selected attachments. */
     onPicked: (files: FileObject[]) => void;
     /** A callback that will be called without a selected attachment. */
     onCanceled?: () => void;

diff --git a/src/components/UploadFile.tsx b/src/components/UploadFile.tsx
@@ -78,13 +78,9 @@ function UploadFile({
             }
         }
 
-        if (fileLimit) {
-            if (files.length > 0) {
-                if (files.length > fileLimit) {
-                    setError(translate('attachmentPicker.tooManyFiles', {fileLimit}));
-                    return;
-                }
-            }
+        if (fileLimit && files.length > 0 && files.length > fileLimit) {
+            setError(translate('attachmentPicker.tooManyFiles', {fileLimit}));
+            return;
         }
 
         if (acceptedFileTypes.length > 0) {
@@ -96,8 +92,12 @@ function UploadFile({
             }
         }
 
-        onInputChange(files);
-        onUpload(files);
+        const uploadedFilesNames = uploadedFiles.map((uploadedFile) => uploadedFile.name);
+
+        const newFilesToUpload = files.filter((file) => !uploadedFilesNames.includes(file.name));
+
+        onInputChange(newFilesToUpload);
+        onUpload(newFilesToUpload);
     };
 
     return (
@@ -122,15 +122,15 @@ function UploadFile({
             </AttachmentPicker>
             {uploadedFiles.map((file) => (
                 <View
-                    style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.border, styles.p5, styles.mt3]}
+                    style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.border, styles.p5, styles.mt3, styles.wrpap]}
                     key={file.uri}
                 >
                     <Icon
                         src={Expensicons.Paperclip}
                         fill={theme.icon}
                         medium
                     />
-                    <Text style={[styles.ml2, styles.mr2, styles.textBold]}>{file.name}</Text>
+                    <Text style={[styles.ml2, styles.mr2, styles.textBold, styles.breakWord]}>{file.name}</Text>
                     <PressableWithFeedback
                         onPress={() => onRemove(file?.uri ?? '')}
                         role={CONST.ROLE.BUTTON}