fix(post-form): shorten long uploaded file labels in the form

Telegraph and other hosts can produce very long filenames that overflow the
narrow post form upload row; truncate them more aggressively than post media
links and expose the full name via title tooltip.
This commit is contained in:
Tommaso Casaburi
2026-05-21 15:34:21 +07:00
parent 0fe18a5646
commit 75d90c8264
2 changed files with 28 additions and 1 deletions
@@ -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<HTMLInputElement>('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;
+11 -1
View File
@@ -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}
/>
<span>{isUploading ? <LoadingEllipsis string={t('uploading')} /> : getPublishURLFilename(url) || uploadedFileName || t('no_file_chosen')}</span>
<span title={getPublishURLFilename(url) || uploadedFileName || undefined}>
{isUploading ? <LoadingEllipsis string={t('uploading')} /> : getPostFormFileDisplayLabel(url, uploadedFileName, t('no_file_chosen'))}
</span>
</td>
</tr>
)}