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

@@ -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}

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;
 

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;
 

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>
           }