@amityco/react-native-social-uikit 4.0.0-RC10 → 4.0.0-RC11

package/lib/typescript/src/v4/component/CommunityStories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/CommunityStories/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAqBtE,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;+EAEqD,iBAAiB;AAiLvE,wBAAsC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/CommunityStories/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAsBtE,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;+EAEqD,iBAAiB;AAyLvE,wBAAsC"}

package/lib/typescript/src/v4/component/CommunityStories/styles.d.ts

@@ -85,6 +85,11 @@ export declare const useStyles: () => {
         alignItems: "center";
         width: number;
     };
+    errorIcon: {
+        position: "absolute";
+        right: number;
+        bottom: number;
+    };
     storyCreateIcon: {
         position: "absolute";
         left: number;

package/lib/typescript/src/v4/component/CommunityStories/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/CommunityStories/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqGrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/CommunityStories/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GrB,CAAC"}

package/lib/typescript/src/v4/component/LoadingImage/index.d.ts

@@ -3,6 +3,7 @@ interface OverlayImageProps {
     source: string;
     onClose?: (originalPath: string, field?: string, postId?: string) => void;
     onLoadFinish?: (fileId: string, fileUrl: string, fileName: string, index: number, originalPath: string) => void;
+    onUploadError?: (hasError: boolean, source: string) => void;
     index?: number;
     isUploaded: boolean;
     fileId?: string;
@@ -11,6 +12,6 @@ interface OverlayImageProps {
     postId?: string;
     setIsUploading?: (arg: boolean) => void;
 }
-declare const LoadingImage: ({ source, onClose, index, onLoadFinish, isUploaded, fileId, isEditMode, fileCount, postId, setIsUploading, }: OverlayImageProps) => React.JSX.Element;
+declare const LoadingImage: ({ source, onClose, index, onLoadFinish, onUploadError, isUploaded, fileId, isEditMode, fileCount, postId, setIsUploading, }: OverlayImageProps) => React.JSX.Element;
 export default LoadingImage;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/v4/component/LoadingImage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/LoadingImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAehE,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AACD,QAAA,MAAM,YAAY,GAAI,8GAWnB,iBAAiB,sBA4HnB,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/LoadingImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAWhE,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;IACV,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AACD,QAAA,MAAM,YAAY,GAAI,6HAYnB,iBAAiB,sBAiInB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/v4/component/LoadingImage/styles.d.ts

@@ -14,6 +14,7 @@ export declare const useStyles: () => {
         height: "100%";
         resizeMode: "cover";
         borderRadius: number;
+        position: "relative";
     };
     overlay: {
         justifyContent: "center";
@@ -24,6 +25,25 @@ export declare const useStyles: () => {
         top: 0;
         bottom: 0;
     };
+    failedOverlay: {
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+        borderRadius: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    errorOverlay: {
+        position: "absolute";
+        top: "50%";
+        left: number;
+        right: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
     progressBar: {
         marginVertical: number;
     };
@@ -40,6 +60,7 @@ export declare const useStyles: () => {
         padding: number;
         backgroundColor: string;
         borderRadius: number;
+        zIndex: number;
     };
 };
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/v4/component/LoadingImage/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/LoadingImage/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/LoadingImage/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DrB,CAAC"}

package/lib/typescript/src/v4/component/LoadingVideo/index.d.ts

@@ -3,6 +3,7 @@ interface OverlayImageProps {
     source: string;
     onClose?: (originalPath: string, fileId?: string, postId?: string) => void;
     onLoadFinish?: (fileId: string, fileUrl: string, fileName: string, index: number, originalPath: string, thumbNail: string) => void;
+    onUploadError?: (hasError: boolean, source: string) => void;
     index?: number;
     isUploaded: boolean;
     fileId?: string;
@@ -13,6 +14,6 @@ interface OverlayImageProps {
     postId?: string;
     setIsUploading?: (arg: boolean) => void;
 }
-declare const LoadingVideo: ({ source, onClose, index, onLoadFinish, isUploaded, thumbNail, onPlay, fileId, isEditMode, fileCount, postId, setIsUploading, }: OverlayImageProps) => React.JSX.Element;
+declare const LoadingVideo: ({ source, onClose, index, onLoadFinish, onUploadError, isUploaded, thumbNail, onPlay, fileId, isEditMode, fileCount, postId, setIsUploading, }: OverlayImageProps) => React.JSX.Element;
 export default LoadingVideo;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/v4/component/LoadingVideo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/LoadingVideo/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAyBhE,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,KACd,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AACD,QAAA,MAAM,YAAY,GAAI,iIAanB,iBAAiB,sBAsKnB,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/LoadingVideo/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAuBhE,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,KACd,IAAI,CAAC;IACV,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AACD,QAAA,MAAM,YAAY,GAAI,gJAcnB,iBAAiB,sBA4KnB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/v4/component/MyStories/StoryCircleItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryCircleItem.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/MyStories/StoryCircleItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAevD,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC;CAChC;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CA6EzC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"StoryCircleItem.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/MyStories/StoryCircleItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAgBvD,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC;CAChC;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CAmFzC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/src/v4/component/MyStories/styles.d.ts

@@ -76,6 +76,11 @@ export declare const useStyles: () => {
         left: number;
         top: number;
     };
+    errorIcon: {
+        position: "absolute";
+        left: number;
+        bottom: number;
+    };
     scrollContainer: {
         paddingVertical: number;
     };

package/lib/typescript/src/v4/component/MyStories/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/MyStories/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/component/MyStories/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0-RC10",
+  "version": "4.0.0-RC11",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/Toast/Toast.tsx

@@ -53,6 +53,7 @@ const Toast: FC = () => {
       alignSelf: 'center',
       flexDirection: 'row',
       alignItems: 'center',
+      gap: 12,
     },
     message: {
       lineHeight: 24,

package/src/providers/file-provider.tsx

@@ -38,29 +38,51 @@ export async function uploadImageFile(
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<'image'>[]> {
   return await new Promise(async (resolve, reject) => {
-    const formData = new FormData();
-    const parts = filePath.split('/');
-    const fileName = parts[parts.length - 1];
-    const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
-    const uri =
-      Platform.OS === 'android' ? filePath : filePath.replace('file://', '');
+    try {
+      const formData = new FormData();
+      const parts = filePath.split('/');
+      const fileName = parts[parts.length - 1];
+      const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
+      const uri =
+        Platform.OS === 'android' ? filePath : filePath.replace('file://', '');
 
-    formData.append('files', {
-      name: fileName,
-      type: fileType,
-      uri: uri,
-    });
+      formData.append('files', {
+        name: fileName,
+        type: fileType,
+        uri: uri,
+      });
 
-    const { data: file } = await FileRepository.uploadImage(
-      formData,
-      (percent) => {
-        perCentCallback && perCentCallback(percent);
+      const { data: file } = await FileRepository.uploadImage(
+        formData,
+        (percent) => {
+          perCentCallback && perCentCallback(percent);
+        }
+      );
+
+      if (file) {
+        resolve(file);
+      } else {
+        reject({ message: 'Upload failed - no file data returned' });
+      }
+    } catch (error: any) {
+      if (
+        error?.message?.includes('INVALID_IMAGE') ||
+        error?.message?.includes('Inappropriate')
+      ) {
+        reject({
+          message: 'Inappropriate image',
+          details: 'Please choose a different image to upload.',
+          code: 'INVALID_IMAGE',
+        });
+      } else {
+        reject({
+          message: 'Upload failed',
+          details:
+            error?.message ||
+            "We couldn't complete your upload. Please try again.",
+          originalError: error,
+        });
       }
-    );
-    if (file) {
-      resolve(file);
-    } else {
-      reject('Upload error');
     }
   });
 }

package/src/svg/svg-xml-list.ts

@@ -429,3 +429,9 @@ export const infoIcon = (
 ): string => `<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 2.25006C4.25 2.25006 1.25 5.28131 1.25 9.00006C1.25 12.7501 4.25 15.7501 8 15.7501C11.7188 15.7501 14.75 12.7501 14.75 9.00006C14.75 5.28131 11.6875 2.25006 8 2.25006ZM8 1.25006C12.25 1.25006 15.75 4.75006 15.75 9.00006C15.75 13.2813 12.25 16.7501 8 16.7501C3.71875 16.7501 0.25 13.2813 0.25 9.00006C0.25 4.75006 3.71875 1.25006 8 1.25006ZM6.875 12.0001H7.25V8.25006H6.875C6.65625 8.25006 6.5 8.09381 6.5 7.87506V7.62506C6.5 7.43756 6.65625 7.25006 6.875 7.25006H8.375C8.5625 7.25006 8.75 7.43756 8.75 7.62506V12.0001H9.125C9.3125 12.0001 9.5 12.1876 9.5 12.3751V12.6251C9.5 12.8438 9.3125 13.0001 9.125 13.0001H6.875C6.65625 13.0001 6.5 12.8438 6.5 12.6251V12.3751C6.5 12.1876 6.65625 12.0001 6.875 12.0001ZM8 4.50006C8.53125 4.50006 9 4.96881 9 5.50006C9 6.06256 8.53125 6.50006 8 6.50006C7.4375 6.50006 7 6.06256 7 5.50006C7 4.96881 7.4375 4.50006 8 4.50006Z" fill="${color}"/>
 </svg>`;
+export const errorIcon = (
+  color: string = '#fff'
+): string => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7.25" fill="#FA4D30" stroke="#fff" strokeWidth="1.5"></circle>
+<path d="M9.25 10.75C9.25 11.453 8.687 12 8 12c-.703 0-1.25-.547-1.25-1.25 0-.688.547-1.25 1.25-1.25.688 0 1.25.563 1.25 1.25zM6.89 4.406A.378.378 0 017.267 4h1.453c.219 0 .39.188.375.406l-.203 4.25A.387.387 0 018.516 9H7.469a.387.387 0 01-.375-.344l-.203-4.25z" fill="${color}"/>
+</svg>`;

package/src/v4/PublicApi/Pages/AmityPostComposerPage/AmityPostComposerPage.tsx

@@ -107,12 +107,16 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const [deletedPostIds, setDeletedPostIds] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState(false);
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
+  const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
+  const [videoErrors, setVideoErrors] = useState<Set<string>>(new Set());
   const privateCommunityId = !community?.isPublic && community?.communityId;
   const title = isEditMode
     ? 'Edit Post'
     : community?.displayName ?? 'My Timeline';
   const isInputValid =
     !isUploading &&
+    imageErrors.size === 0 &&
+    videoErrors.size === 0 &&
     inputMessage.trim().length <= MAXIMUM_POST_CHARACTERS &&
     (inputMessage.trim().length > 0 ||
       displayImages.length > 0 ||
@@ -598,10 +602,45 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     }
   }, [displayVideos.length, processMedia]);
 
+  const handleImageUploadError = useCallback(
+    (hasError: boolean, source: string) => {
+      setImageErrors((prev) => {
+        const newSet = new Set(prev);
+        if (hasError) {
+          newSet.add(source);
+        } else {
+          newSet.delete(source);
+        }
+        return newSet;
+      });
+    },
+    []
+  );
+
+  const handleVideoUploadError = useCallback(
+    (hasError: boolean, source: string) => {
+      setVideoErrors((prev) => {
+        const newSet = new Set(prev);
+        if (hasError) {
+          newSet.add(source);
+        } else {
+          newSet.delete(source);
+        }
+        return newSet;
+      });
+    },
+    []
+  );
+
   const handleOnCloseImage = useCallback(
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
       setDeletedPostIds((prev) => [...prev, postId]);
+      setImageErrors((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(originalPath);
+        return newSet;
+      });
       setDisplayImages((prevData) => {
         const newData = prevData.filter(
           (item: IDisplayImage) => item.url !== originalPath
@@ -615,6 +654,11 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
       setDeletedPostIds((prev) => [...prev, postId]);
+      setVideoErrors((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(originalPath);
+        return newSet;
+      });
       setDisplayVideos((prevData) => {
         const newData = prevData.filter(
           (item: IDisplayImage) => item.url !== originalPath
@@ -760,6 +804,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
                       onClose={handleOnCloseImage}
                       index={index} //TODO: Fix this without index
                       onLoadFinish={handleOnFinishImage}
+                      onUploadError={handleImageUploadError}
                       isUploaded={item.isUploaded}
                       fileId={item.fileId}
                       fileCount={displayImages.length}
@@ -783,6 +828,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
                       onClose={handleOnCloseVideo}
                       index={index} //TODO: Fix this without index
                       onLoadFinish={handleOnFinishVideo}
+                      onUploadError={handleVideoUploadError}
                       isUploaded={item.isUploaded}
                       fileId={item.fileId}
                       thumbNail={item.thumbNail as string}

package/src/v4/PublicApi/Pages/AmityViewStoryPage/Components/AmityViewStoryItem.tsx

@@ -43,6 +43,8 @@ import { Typography } from '../../../../component/Typography/Typography';
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../../../providers/amity-ui-kit-provider';
 import { useUIKitDispatch } from '../../../../../redux/store';
+import { informative } from '~/v4/assets/icons/toast';
+import { close as closeIcon } from '../../../../assets/icons';
 
 interface IAmityViewStoryItem {
   communityData: Amity.Community;
@@ -96,7 +98,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
   const [isLiked, setIsLiked] = useState<boolean>(myReactions?.length > 0);
   const [openCommentSheet, setOpenCommentSheet] = useState(false);
   const [load, setLoad] = useState(true);
-  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
@@ -248,10 +249,20 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
       );
       if (deleted) {
         current === 0 && previous();
-        dispatch(showToastMessage({ toastMessage: 'Story deleted' }));
+        dispatch(
+          showToastMessage({
+            toastMessage: 'Story deleted',
+            isSuccessToast: true,
+          })
+        );
       }
     } catch (err) {
-      dispatch(showToastMessage({ toastMessage: 'Delete Story Error!' }));
+      dispatch(
+        showToastMessage({
+          toastMessage: 'Failed to delete story. Please try again.',
+          isSuccessToast: false,
+        })
+      );
     } finally {
       setLoading(false);
       sheetRef?.current?.close();
@@ -288,6 +299,30 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
     sheetRef.current?.open();
   }, [progress]);
 
+  const onPressMenuButtonFailed = useCallback(() => {
+    progress.stopAnimation(() => setPressed(true));
+    Alert.alert(
+      'Failed to upload story',
+      'Would you like to discard uploading?',
+      [
+        { text: 'Cancel', onPress: () => sheetRef?.current?.close() },
+        { text: 'Delete', style: 'destructive', onPress: deleteStory },
+      ]
+    );
+  }, [deleteStory, progress]);
+
+  const isFailedImageUpload =
+    currentStory?.dataType === 'image' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.imageData?.fileUrl);
+
+  const isFailedVideoUpload =
+    currentStory?.dataType === 'video' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.videoData?.fileUrl);
+
   return (
     <View style={[styles.container]}>
       <SafeAreaView>
@@ -296,7 +331,13 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <Video
               onLoadStart={() => setLoad(true)}
               onProgress={({ currentTime }) => setCurrentSeek(currentTime)}
-              source={{ uri: currentStory?.videoData.fileUrl }}
+              source={{
+                uri:
+                  currentStory?.videoData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
               style={styles.video}
               resizeMode="contain"
               controls={false}
@@ -308,12 +349,15 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           ) : currentStory?.dataType === 'image' ? (
             <Image
               onLoadStart={() => setLoad(true)}
-              onError={({ nativeEvent: { error: err } }) =>
-                err && setError(true)
-              }
               onLoadEnd={() => start()}
-              source={{ uri: currentStory?.imageData.fileUrl }}
-              style={[styles.image]}
+              source={{
+                uri:
+                  currentStory?.imageData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
+              style={[styles.image, isFailedImageUpload && { opacity: 0.6 }]}
               resizeMode="contain"
             />
           ) : null}
@@ -322,11 +366,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               <ActivityIndicator size="large" color={'white'} />
             </View>
           )}
-          {error && (
-            <View style={styles.spinnerContainer}>
-              <Text style={styles.error}>Story load error</Text>
-            </View>
-          )}
         </View>
       </SafeAreaView>
       <GestureRecognizer onSwipeUp={onPressComment} style={styles.flexCol}>
@@ -399,7 +438,12 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
                 </TouchableOpacity>
               )}
               <TouchableOpacity hitSlop={5} onPress={() => onClose()}>
-                <Text style={styles.whiteText}>X</Text>
+                <SvgXml
+                  xml={closeIcon()}
+                  width="28"
+                  height="28"
+                  color="white"
+                />
               </TouchableOpacity>
             </View>
           </View>
@@ -465,49 +509,70 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           </TouchableOpacity>
         )}
       </GestureRecognizer>
-      <View style={styles.footer}>
-        {hasStoryImpressionPermission ? (
-          <TouchableOpacity
-            style={[
-              styles.seenContainer,
-              { backgroundColor: storyViewerBgColor },
-            ]}
-          >
-            <SvgXml xml={seenIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{reachCount}</Text>
-          </TouchableOpacity>
-        ) : (
-          <View style={styles.seenContainer} />
-        )}
-        <View style={styles.seenContainer}>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              { backgroundColor: storyCommentBgColor },
-            ]}
-            onPress={onPressComment}
-          >
-            <SvgXml xml={storyCommentIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{commentsCounts}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: storyReactionBgColor,
-              },
-            ]}
-            onPress={onPressReaction}
-          >
-            <SvgXml
-              xml={isLiked ? storyLikedIcon : storyLikeIcon}
-              width="25"
-              height="25"
-            />
-            <Text style={styles.seen}>{totalReaction}</Text>
-          </TouchableOpacity>
+      {(isFailedImageUpload || isFailedVideoUpload) && hasStoryPermission ? (
+        <View style={styles.errorContainer}>
+          <View style={styles.errorContainerLeft}>
+            <SvgXml xml={informative('white')} width="20" height="20" />
+            <Typography.Body style={styles.errorText}>
+              Failed to upload story
+            </Typography.Body>
+          </View>
+          {
+            <TouchableOpacity
+              hitSlop={5}
+              style={styles.threeDotsMenu}
+              onPress={onPressMenuButtonFailed}
+            >
+              <SvgXml xml={storyThreedotsMenu()} width="20" height="20" />
+            </TouchableOpacity>
+          }
         </View>
-      </View>
+      ) : (
+        <View style={styles.footer}>
+          {hasStoryImpressionPermission ? (
+            <TouchableOpacity
+              style={[
+                styles.seenContainer,
+                { backgroundColor: storyViewerBgColor },
+              ]}
+            >
+              <SvgXml xml={seenIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{reachCount}</Text>
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.seenContainer} />
+          )}
+          <View style={styles.seenContainer}>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                { backgroundColor: storyCommentBgColor },
+              ]}
+              onPress={onPressComment}
+            >
+              <SvgXml xml={storyCommentIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{commentsCounts}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                {
+                  backgroundColor: storyReactionBgColor,
+                },
+              ]}
+              onPress={onPressReaction}
+            >
+              <SvgXml
+                xml={isLiked ? storyLikedIcon : storyLikeIcon}
+                width="25"
+                height="25"
+              />
+              <Text style={styles.seen}>{totalReaction}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
       {openCommentSheet && (
         <Modal
           style={styles.bottomSheet}

package/src/v4/PublicApi/Pages/AmityViewStoryPage/styles.ts

@@ -14,6 +14,7 @@ export const useStyles = () => {
       flex: 1,
       width: width,
       backgroundColor: '#000',
+      position: 'relative',
     },
     flex: {
       flex: 1,
@@ -73,7 +74,7 @@ export const useStyles = () => {
       fontSize: 14,
     },
     avatarSubText: {
-      color: theme.colors.background,
+      color: 'white',
       fontSize: 12,
     },
     closeIconContainer: {
@@ -219,6 +220,27 @@ export const useStyles = () => {
       color: theme.colors.base,
       fontSize: 14,
     },
+    errorContainer: {
+      width: '100%',
+      position: 'absolute',
+      bottom: 120,
+      left: 0,
+      backgroundColor: theme.colors.alert,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+    },
+    errorContainerLeft: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    errorText: {
+      color: 'white',
+    },
   });
 
   return styles;