diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
index 24a54e677ac5..f0eca529d762 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
@@ -18,6 +18,7 @@ import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui';
import { formatToHumanReadableDate } from '~/utils/date-utils';
import { getFileAbsoluteURI } from '~/utils/file/getFileAbsoluteURI';
+import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';
const StyledLeftContent = styled.div`
align-items: center;
@@ -62,7 +63,12 @@ const StyledLinkContainer = styled.div`
export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
const theme = useTheme();
const [isEditing, setIsEditing] = useState(false);
- const [attachmentName, setAttachmentName] = useState(attachment.name);
+
+ const { name: originalFileName, extension: attachmentFileExtension } =
+ getFileNameAndExtension(attachment.name);
+
+ const [attachmentFileName, setAttachmentFileName] =
+ useState(originalFileName);
const fieldContext = useMemo(
() => ({ recoilScopeId: attachment?.id ?? '' }),
@@ -85,16 +91,36 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
setIsEditing(true);
};
- const handleOnBlur = () => {
+ const saveAttachmentName = () => {
setIsEditing(false);
+
+ const newFileName = `${attachmentFileName}${attachmentFileExtension}`;
+
updateOneAttachment({
idToUpdate: attachment.id,
- updateOneRecordInput: { name: attachmentName },
+ updateOneRecordInput: { name: newFileName },
});
};
- const handleOnChange = (newName: string) => {
- setAttachmentName(newName);
+ const handleOnBlur = () => {
+ saveAttachmentName();
+ };
+
+ const handleOnChange = (newFileName: string) => {
+ setAttachmentFileName(newFileName);
+ };
+
+ const handleOnKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ saveAttachmentName();
+ }
+ };
+
+ const handleDownload = () => {
+ downloadFile(
+ attachment.fullPath,
+ `${attachmentFileName}${attachmentFileExtension}`,
+ );
};
return (
@@ -104,11 +130,11 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
{isEditing ? (
) : (
@@ -129,9 +155,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
{
- downloadFile(attachment.fullPath, attachment.name);
- }}
+ onDownload={handleDownload}
onRename={handleRename}
/>
diff --git a/packages/twenty-front/src/utils/file/getFileNameAndExtension.ts b/packages/twenty-front/src/utils/file/getFileNameAndExtension.ts
new file mode 100644
index 000000000000..231648cd5c93
--- /dev/null
+++ b/packages/twenty-front/src/utils/file/getFileNameAndExtension.ts
@@ -0,0 +1,8 @@
+export const getFileNameAndExtension = (filenameWithExtension: string) => {
+ const lastDotIndex = filenameWithExtension.lastIndexOf('.');
+
+ return {
+ name: filenameWithExtension.substring(0, lastDotIndex),
+ extension: filenameWithExtension.substring(lastDotIndex),
+ };
+};