diff --git a/src/components/post-form/__tests__/post-form.test.tsx b/src/components/post-form/__tests__/post-form.test.tsx index eb5582f7..61c7cf1d 100644 --- a/src/components/post-form/__tests__/post-form.test.tsx +++ b/src/components/post-form/__tests__/post-form.test.tsx @@ -643,6 +643,23 @@ describe('PostForm', () => { expect(table?.textContent).toContain('file name.jpg'); }); + it('shortens long pasted file-link filenames next to the upload button', async () => { + testState.uploadedFileName = null; + + await renderPostForm('/all'); + await clickByText(container, 'start_new_thread'); + + const table = container.querySelector('table'); + const textInputs = table?.querySelectorAll('input[type="text"]') || []; + const linkInput = textInputs[2]; + const longFilename = 'TELEMMGLPICT000378070158_17159651831200_trans_NvBQzQNjv4BqpVlberWd9EgFPZtcLiMQf0Rf_Wk3V23H2268P_XkPxc.jpeg'; + + await dispatchInput(linkInput as HTMLInputElement, `https://www.telegraph.co.uk/multimedia/${longFilename}`); + + expect(table?.textContent).toContain('TELEMMGLPICT...P_XkPxc.jpeg'); + expect(table?.textContent).not.toContain(longFilename); + }); + it('uses the shared loading ellipsis while a post form upload is running', async () => { testState.isUploading = true; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index cd9ff065..176d9e64 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -7,6 +7,7 @@ import getShortAddress from '../../lib/get-short-address'; import useCommunitiesPagesStore from '@bitsocial/bitsocial-react-hooks/dist/stores/communities-pages'; import { getDisplayMediaInfoType, getLinkMediaInfo } from '../../lib/utils/media-utils'; import { getExpiringMediaLinkAlert } from '../../lib/utils/media-link-validation-utils'; +import { truncateWithEllipsisInMiddle } from '../../lib/utils/string-utils'; import { getPublishURLFilename, isValidPublishURL, isValidURL } from '../../lib/utils/url-utils'; import { hasModQueueAccessRole } from '../../lib/utils/mod-access'; import { isAllView, isCatalogView, isModQueueView, isModView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; @@ -31,6 +32,13 @@ import capitalize from 'lodash/capitalize'; import debounce from 'lodash/debounce'; const FILE_LINK_PLACEHOLDER = 'https://website.com/image.jpg'; +const POST_FORM_FILE_DISPLAY_MAX_LENGTH = 28; + +const getPostFormFileDisplayLabel = (url: string, uploadedFileName: string | null | undefined, noFileLabel: string): string => { + const raw = getPublishURLFilename(url) || uploadedFileName; + if (!raw) return noFileLabel; + return truncateWithEllipsisInMiddle(raw, POST_FORM_FILE_DISPLAY_MAX_LENGTH); +}; export const LinkTypePreviewer = ({ link }: { link: string }) => { const { t } = useTranslation(); @@ -299,7 +307,9 @@ const PostFormFields = ({ isUploading={isUploading} showUploadControls={showUploadControls} /> - {isUploading ? : getPublishURLFilename(url) || uploadedFileName || t('no_file_chosen')} + + {isUploading ? : getPostFormFileDisplayLabel(url, uploadedFileName, t('no_file_chosen'))} + )}