mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
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:
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user