From 8e9d6a9852347460141cffeab0373ed80cde80db Mon Sep 17 00:00:00 2001
From: "Pitchaya T." <33589608+ptchayap@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:59:07 +0700
Subject: [PATCH] fix: ASC-27509 - file upload (#750)

* fix: cannot upload the same file again

* fix: show modal to discard files after upload failed
---
 src/core/components/Uploaders/Loader.tsx      |  5 ++++-
 .../post/Creator/components/FilesUploaded.tsx | 22 ++++++++++++++++---
 .../Creator/components/ImagesUploaded.tsx     | 22 ++++++++++++++++---
 src/social/components/post/Creator/index.tsx  |  3 ---
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/core/components/Uploaders/Loader.tsx b/src/core/components/Uploaders/Loader.tsx
index 594383e83..de5e95975 100644
--- a/src/core/components/Uploaders/Loader.tsx
+++ b/src/core/components/Uploaders/Loader.tsx
@@ -170,7 +170,10 @@ const FileLoader: React.FC<FileLoaderProps> = ({
         accept={mimeType}
         multiple={multiple}
         disabled={disabled}
-        onChange={onLoad}
+        onChange={(e) => {
+          e.target.value && onLoad(e);
+          e.target.value = '';
+        }}
         onClick={onClick}
       />
       {children}
diff --git a/src/social/components/post/Creator/components/FilesUploaded.tsx b/src/social/components/post/Creator/components/FilesUploaded.tsx
index a14963ef6..6a461ca40 100644
--- a/src/social/components/post/Creator/components/FilesUploaded.tsx
+++ b/src/social/components/post/Creator/components/FilesUploaded.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
 import File from '~/core/components/Uploaders/File';
 import useFileUpload from '~/core/hooks/useFileUpload';
 import { useShallowCompareEffect } from 'react-use';
+import { useConfirmContext } from '~/core/providers/ConfirmProvider';
 
 const StylesFileRows = styled.div<{ uploadLoading?: boolean }>`
   display: grid;
@@ -64,7 +65,7 @@ interface FilesProps {
   onChange: (data: { uploaded: Array<Amity.File>; uploading: Array<File> }) => void;
   onLoadingChange: (loading: boolean) => void;
   uploadLoading: boolean;
-  onError: (error: string) => void;
+  onError?: (error: string) => void;
   rowDataQaAnchor?: string;
 }
 
@@ -85,7 +86,22 @@ const Files = ({
     onError,
   });
 
-  const { allFiles } = useFileUploadProps;
+  const { info } = useConfirmContext();
+
+  const { allFiles, rejected, reset } = useFileUploadProps;
+
+  useEffect(() => {
+    if (rejected && rejected.length > 0) {
+      info({
+        title: 'Error',
+        content: 'There was an issue uploading file. Please try again later.',
+        onOk: () => reset(),
+        okText: 'Discard',
+        onCancel: () => reset(),
+        OkButton: undefined,
+      });
+    }
+  }, [rejected]);
 
   if (allFiles.length === 0) return null;
 
diff --git a/src/social/components/post/Creator/components/ImagesUploaded.tsx b/src/social/components/post/Creator/components/ImagesUploaded.tsx
index d0048a7f2..f7c57d807 100644
--- a/src/social/components/post/Creator/components/ImagesUploaded.tsx
+++ b/src/social/components/post/Creator/components/ImagesUploaded.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled, { css } from 'styled-components';
 
 import GalleryGrid from '~/core/components/GalleryGrid';
 import Image from '~/core/components/Uploaders/Image';
 import useFileUpload, { isAmityFile } from '~/core/hooks/useFileUpload';
+import { useConfirmContext } from '~/core/providers/ConfirmProvider';
 
 const StyledGalleryGrid = styled(GalleryGrid)<
   { uploadLoading?: boolean } & React.ComponentProps<typeof GalleryGrid<Amity.File | File>>
@@ -68,7 +69,7 @@ interface ImagesUploadedProps {
   onChange: (data: { uploaded: Array<Amity.File>; uploading: Array<File> }) => void;
   onLoadingChange: (loading: boolean) => void;
   uploadLoading: boolean;
-  onError: (error: string) => void;
+  onError?: (error: string) => void;
 }
 
 const ImagesUploaded = ({
@@ -87,7 +88,22 @@ const ImagesUploaded = ({
     onError,
   });
 
-  const { allFiles } = useFileUploadProps;
+  const { info } = useConfirmContext();
+
+  const { allFiles, rejected, reset } = useFileUploadProps;
+
+  useEffect(() => {
+    if (rejected && rejected.length > 0) {
+      info({
+        title: 'Error',
+        content: 'There was an issue uploading media. Please try again later.',
+        onOk: () => reset(),
+        okText: 'Discard',
+        onCancel: () => reset(),
+        OkButton: undefined,
+      });
+    }
+  }, [rejected]);
 
   if (allFiles.length === 0) return null;
 
diff --git a/src/social/components/post/Creator/index.tsx b/src/social/components/post/Creator/index.tsx
index d88bcafc6..12d0fa4a5 100644
--- a/src/social/components/post/Creator/index.tsx
+++ b/src/social/components/post/Creator/index.tsx
@@ -361,7 +361,6 @@ const PostCreatorBar = ({
                   setPostImages(uploaded);
                   setIncomingImages(uploading);
                 }}
-                onError={setError}
               />
               <VideosUploaded
                 files={incomingVideos}
@@ -372,7 +371,6 @@ const PostCreatorBar = ({
                   setPostVideos(uploaded);
                   setIncomingVideos(uploading);
                 }}
-                onError={setError}
               />
               <FilesUploaded
                 files={incomingFiles}
@@ -383,7 +381,6 @@ const PostCreatorBar = ({
                   setPostFiles(uploaded);
                   setIncomingFiles(uploading);
                 }}
-                onError={setError}
               />
             </UploadsContainer>
           }