format title and description on edit complete #1062

cypress/e2e/with_mock_data/items.cy.ts

@@ -633,6 +633,16 @@ describe('Items', () => {
           ],
           { force: true }
         );
+
+      cy.findByRole('button', { name: 'Edit file logo1.png' }).click();
+
+      cy.findByText('File name').should('be.visible');
+
+      cy.findByPlaceholderText('Enter file title').type('test');
+      cy.findByPlaceholderText('Enter file description').type('test');
+
+      cy.findByText('Save changes').click();
+
       cy.startSnoopingBrowserMockedRequest();
       cy.findByText('Upload 2 files').click();
 

src/common/images/uploadImagesDialog.component.test.tsx

@@ -58,7 +58,7 @@ describe('Upload image dialog', () => {
     expect(onClose).toHaveBeenCalled();
   });
 
-  it('posts an image successfully', async () => {
+  it('uploads an image with a title and description and verifies completion message', async () => {
     // Render the component
 
     createView();
@@ -90,6 +90,18 @@ describe('Upload image dialog', () => {
       expect(screen.getByText('image.png')).toBeInTheDocument();
     });
 
+    await user.click(
+      await screen.findByRole('button', { name: 'Edit file image.png' })
+    );
+
+    expect(await screen.findByText('File name')).toBeInTheDocument();
+    const [_, title, description] = screen.getAllByRole('textbox');
+
+    await user.type(title, 'test');
+    await user.type(description, 'test');
+
+    await user.click(await screen.findByText('Save changes'));
+
     await user.click(await screen.findByText('Upload 1 file'));
 
     expect(xhrPostSpy).toHaveBeenCalledWith('POST', '/images', true);

src/common/images/uploadImagesDialog.component.tsx

@@ -9,6 +9,7 @@ import { DashboardModal } from '@uppy/react';
 import XHR from '@uppy/xhr-upload';
 import React from 'react';
 import { settings } from '../../settings';
+import { getNonEmptyTrimmedString } from '../../utils';
 
 // Note: File systems use a factor of 1024 for GB, MB and KB instead of 1000, so here the former is expected despite them really being GiB, MiB and KiB.
 const MAX_FILE_SIZE_MB = 50;
@@ -60,6 +61,32 @@ const UploadImagesDialog = (props: UploadImagesDialogProps) => {
     });
   }, [entityId, uppy]);
 
+  uppy.on('dashboard:file-edit-complete', (file) => {
+    if (file) {
+      // Extract existing metadata
+      const { title, description, ...restMeta } = file.meta;
+
+      // Format title and description
+      const formattedTitle = getNonEmptyTrimmedString(title);
+      const formattedDescription = getNonEmptyTrimmedString(description);
+
+      // Prepare the updated metadata object
+      const updatedFileData = {
+        ...restMeta,
+        ...(formattedTitle && { title: formattedTitle }),
+        ...(formattedDescription && { description: formattedDescription }),
+      };
+
+      // Use patchFilesState to update the metadata
+      // Ensure you call the method properly
+      uppy.patchFilesState({
+        [file.id]: {
+          meta: updatedFileData,
+        },
+      });
+    }
+  });
+
   uppy.on('upload-error', (_file, _error, response) => {
     if (response?.body?.id) {
       // TODO: Implement logic to delete metadata using id