diff --git a/CHANGELOG.md b/CHANGELOG.md index ee13e5cc..cb48153b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,15 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### 3.11.4 (2024-12-02) + +### 3.11.4 (2024-12-02) + + +### Bug Fixes + +* ASC-27509 - file upload ([#750](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web/issues/750)) ([53a5b4e](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web/commit/53a5b4e1057762e61f839730a3568d253ec0602a)) + ### 3.11.3 (2024-11-28) ### 3.11.3 (2024-11-28) diff --git a/package.json b/package.json index 2ee892d1..e04d2956 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit-open-source", - "version": "3.11.3", + "version": "3.11.4", "engines": { "node": ">=16", "pnpm": ">=8" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 25adf781..7cfa7803 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,8 +90,8 @@ importers: specifier: ^2.6.2 version: 2.7.0(react@18.3.1) react-intl: - specifier: ^6.5.5 - version: 6.6.8(react@18.3.1)(typescript@4.9.5) + specifier: ^6.8.7 + version: 6.8.9(react@18.3.1)(typescript@4.9.5) react-loading-skeleton: specifier: ^3.3.1 version: 3.4.0(react@18.3.1) @@ -1346,26 +1346,41 @@ packages: '@formatjs/ecma402-abstract@2.0.0': resolution: {integrity: sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==} + '@formatjs/ecma402-abstract@2.2.4': + resolution: {integrity: sha512-lFyiQDVvSbQOpU+WFd//ILolGj4UgA/qXrKeZxdV14uKiAUiPAtX6XAn7WBCRi7Mx6I7EybM9E5yYn4BIpZWYg==} + '@formatjs/fast-memoize@2.2.0': resolution: {integrity: sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==} + '@formatjs/fast-memoize@2.2.3': + resolution: {integrity: sha512-3jeJ+HyOfu8osl3GNSL4vVHUuWFXR03Iz9jjgI7RwjG6ysu/Ymdr0JRCPHfF5yGbTE6JCrd63EpvX1/WybYRbA==} + '@formatjs/icu-messageformat-parser@2.7.8': resolution: {integrity: sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==} + '@formatjs/icu-messageformat-parser@2.9.4': + resolution: {integrity: sha512-Tbvp5a9IWuxUcpWNIW6GlMQYEc4rwNHR259uUFoKWNN1jM9obf9Ul0e+7r7MvFOBNcN+13K7NuKCKqQiAn1QEg==} + '@formatjs/icu-skeleton-parser@1.8.2': resolution: {integrity: sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==} - '@formatjs/intl-displaynames@6.6.8': - resolution: {integrity: sha512-Lgx6n5KxN16B3Pb05z3NLEBQkGoXnGjkTBNCZI+Cn17YjHJ3fhCeEJJUqRlIZmJdmaXQhjcQVDp6WIiNeRYT5g==} + '@formatjs/icu-skeleton-parser@1.8.8': + resolution: {integrity: sha512-vHwK3piXwamFcx5YQdCdJxUQ1WdTl6ANclt5xba5zLGDv5Bsur7qz8AD7BevaKxITwpgDeU0u8My3AIibW9ywA==} - '@formatjs/intl-listformat@7.5.7': - resolution: {integrity: sha512-MG2TSChQJQT9f7Rlv+eXwUFiG24mKSzmF144PLb8m8OixyXqn4+YWU+5wZracZGCgVTVmx8viCf7IH3QXoiB2g==} + '@formatjs/intl-displaynames@6.8.5': + resolution: {integrity: sha512-85b+GdAKCsleS6cqVxf/Aw/uBd+20EM0wDpgaxzHo3RIR3bxF4xCJqH/Grbzx8CXurTgDDZHPdPdwJC+May41w==} + + '@formatjs/intl-listformat@7.7.5': + resolution: {integrity: sha512-Wzes10SMNeYgnxYiKsda4rnHP3Q3II4XT2tZyOgnH5fWuHDtIkceuWlRQNsvrI3uiwP4hLqp2XdQTCsfkhXulg==} '@formatjs/intl-localematcher@0.5.4': resolution: {integrity: sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==} - '@formatjs/intl@2.10.4': - resolution: {integrity: sha512-56483O+HVcL0c7VucAS2tyH020mt9XTozZO67cwtGg0a7KWDukS/FzW3OnvaHmTHDuYsoPIzO+ZHVfU6fT/bJw==} + '@formatjs/intl-localematcher@0.5.8': + resolution: {integrity: sha512-I+WDNWWJFZie+jkfkiK5Mp4hEDyRSEvmyfYadflOno/mmKJKcB17fEpEH0oJu/OWhhCJ8kJBDz2YMd/6cDl7Mg==} + + '@formatjs/intl@2.10.15': + resolution: {integrity: sha512-i6+xVqT+6KCz7nBfk4ybMXmbKO36tKvbMKtgFz9KV+8idYFyFbfwKooYk8kGjyA5+T5f1kEPQM5IDLXucTAQ9g==} peerDependencies: typescript: ^4.7 || 5 peerDependenciesMeta: @@ -5054,6 +5069,9 @@ packages: intl-messageformat@10.5.14: resolution: {integrity: sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==} + intl-messageformat@10.7.7: + resolution: {integrity: sha512-F134jIoeYMro/3I0h08D0Yt4N9o9pjddU/4IIxMMURqbAtI2wu70X8hvG1V48W49zXHXv3RKSF/po+0fDfsGjA==} + invariant@2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} @@ -6420,8 +6438,8 @@ packages: peerDependencies: react: '>=16.8.2' - react-intl@6.6.8: - resolution: {integrity: sha512-M0pkhzcgV31h++2901BiRXWl69hp2zPyLxRrSwRjd1ErXbNoubz/f4M6DrRTd4OiSUrT4ajRQzrmtS5plG4FtA==} + react-intl@6.8.9: + resolution: {integrity: sha512-TUfj5E7lyUDvz/GtovC9OMh441kBr08rtIbgh3p0R8iF3hVY+V2W9Am7rb8BpJ/29BH1utJOqOOhmvEVh3GfZg==} peerDependencies: react: ^16.6.0 || 17 || 18 typescript: ^4.7 || 5 @@ -8870,45 +8888,70 @@ snapshots: '@formatjs/intl-localematcher': 0.5.4 tslib: 2.6.3 + '@formatjs/ecma402-abstract@2.2.4': + dependencies: + '@formatjs/fast-memoize': 2.2.3 + '@formatjs/intl-localematcher': 0.5.8 + tslib: 2.6.3 + '@formatjs/fast-memoize@2.2.0': dependencies: tslib: 2.6.3 + '@formatjs/fast-memoize@2.2.3': + dependencies: + tslib: 2.6.3 + '@formatjs/icu-messageformat-parser@2.7.8': dependencies: '@formatjs/ecma402-abstract': 2.0.0 '@formatjs/icu-skeleton-parser': 1.8.2 tslib: 2.6.3 + '@formatjs/icu-messageformat-parser@2.9.4': + dependencies: + '@formatjs/ecma402-abstract': 2.2.4 + '@formatjs/icu-skeleton-parser': 1.8.8 + tslib: 2.6.3 + '@formatjs/icu-skeleton-parser@1.8.2': dependencies: '@formatjs/ecma402-abstract': 2.0.0 tslib: 2.6.3 - '@formatjs/intl-displaynames@6.6.8': + '@formatjs/icu-skeleton-parser@1.8.8': dependencies: - '@formatjs/ecma402-abstract': 2.0.0 - '@formatjs/intl-localematcher': 0.5.4 + '@formatjs/ecma402-abstract': 2.2.4 tslib: 2.6.3 - '@formatjs/intl-listformat@7.5.7': + '@formatjs/intl-displaynames@6.8.5': dependencies: - '@formatjs/ecma402-abstract': 2.0.0 - '@formatjs/intl-localematcher': 0.5.4 + '@formatjs/ecma402-abstract': 2.2.4 + '@formatjs/intl-localematcher': 0.5.8 + tslib: 2.6.3 + + '@formatjs/intl-listformat@7.7.5': + dependencies: + '@formatjs/ecma402-abstract': 2.2.4 + '@formatjs/intl-localematcher': 0.5.8 tslib: 2.6.3 '@formatjs/intl-localematcher@0.5.4': dependencies: tslib: 2.6.3 - '@formatjs/intl@2.10.4(typescript@4.9.5)': + '@formatjs/intl-localematcher@0.5.8': dependencies: - '@formatjs/ecma402-abstract': 2.0.0 - '@formatjs/fast-memoize': 2.2.0 - '@formatjs/icu-messageformat-parser': 2.7.8 - '@formatjs/intl-displaynames': 6.6.8 - '@formatjs/intl-listformat': 7.5.7 - intl-messageformat: 10.5.14 + tslib: 2.6.3 + + '@formatjs/intl@2.10.15(typescript@4.9.5)': + dependencies: + '@formatjs/ecma402-abstract': 2.2.4 + '@formatjs/fast-memoize': 2.2.3 + '@formatjs/icu-messageformat-parser': 2.9.4 + '@formatjs/intl-displaynames': 6.8.5 + '@formatjs/intl-listformat': 7.7.5 + intl-messageformat: 10.7.7 tslib: 2.6.3 optionalDependencies: typescript: 4.9.5 @@ -13806,6 +13849,13 @@ snapshots: '@formatjs/icu-messageformat-parser': 2.7.8 tslib: 2.6.3 + intl-messageformat@10.7.7: + dependencies: + '@formatjs/ecma402-abstract': 2.2.4 + '@formatjs/fast-memoize': 2.2.3 + '@formatjs/icu-messageformat-parser': 2.9.4 + tslib: 2.6.3 + invariant@2.2.4: dependencies: loose-envify: 1.4.0 @@ -15357,17 +15407,17 @@ snapshots: dependencies: react: 18.3.1 - react-intl@6.6.8(react@18.3.1)(typescript@4.9.5): + react-intl@6.8.9(react@18.3.1)(typescript@4.9.5): dependencies: - '@formatjs/ecma402-abstract': 2.0.0 - '@formatjs/icu-messageformat-parser': 2.7.8 - '@formatjs/intl': 2.10.4(typescript@4.9.5) - '@formatjs/intl-displaynames': 6.6.8 - '@formatjs/intl-listformat': 7.5.7 + '@formatjs/ecma402-abstract': 2.2.4 + '@formatjs/icu-messageformat-parser': 2.9.4 + '@formatjs/intl': 2.10.15(typescript@4.9.5) + '@formatjs/intl-displaynames': 6.8.5 + '@formatjs/intl-listformat': 7.7.5 '@types/hoist-non-react-statics': 3.3.5 '@types/react': 17.0.80 hoist-non-react-statics: 3.3.2 - intl-messageformat: 10.5.14 + intl-messageformat: 10.7.7 react: 18.3.1 tslib: 2.6.3 optionalDependencies: diff --git a/src/core/components/Uploaders/Loader.tsx b/src/core/components/Uploaders/Loader.tsx index 594383e8..de5e9597 100644 --- a/src/core/components/Uploaders/Loader.tsx +++ b/src/core/components/Uploaders/Loader.tsx @@ -170,7 +170,10 @@ const FileLoader: React.FC = ({ 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 a14963ef..6a461ca4 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; uploading: Array }) => 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 d0048a7f..f7c57d80 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> @@ -68,7 +69,7 @@ interface ImagesUploadedProps { onChange: (data: { uploaded: Array; uploading: Array }) => 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 d88bcafc..12d0fa4a 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} /> }