Merge pull request #2058 from pnp/copilot/fix-etag-errors-attachments

Fix ETag conflict errors when using ListItemAttachments with DynamicForm

Author: AJIXuMuK

docs/documentation/docs/controls/DynamicForm.md

@@ -120,6 +120,56 @@ The `DynamicForm` can be configured with the following properties:
 | thumbnailFieldButtons | IStyle | styles for button when field type is 'Thumbnail' |
 | selectedFileContainer | IStyle | styles for File Selection Control |
 
+## Public Methods
+
+The `DynamicForm` control exposes the following public methods that can be called using a ref:
+
+### updateETag(itemData: any): void
+
+Updates the ETag stored in the component's state. This is useful when the list item has been modified externally (e.g., by adding/removing attachments using the ListItemAttachments control) and you need to update the ETag to prevent 412 conflict errors on save.
+
+**Parameters:**
+- `itemData` - The updated item data containing the new ETag (typically from SharePoint REST API response with `odata.etag` property)
+
+**Example:**
+
+```TypeScript
+import * as React from 'react';
+import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
+import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
+
+export class MyComponent extends React.Component {
+  private dynamicFormRef = React.createRef<DynamicForm>();
+
+  private onAttachmentChange = (itemData: any): void => {
+    // Update the DynamicForm's ETag when attachments are modified
+    if (this.dynamicFormRef.current) {
+      this.dynamicFormRef.current.updateETag(itemData);
+    }
+  }
+
+  public render() {
+    return (
+      <div>
+        <ListItemAttachments
+          listId={this.props.listId}
+          itemId={this.props.itemId}
+          context={this.props.context}
+          onAttachmentChange={this.onAttachmentChange}
+        />
+        <DynamicForm
+          ref={this.dynamicFormRef}
+          context={this.props.context}
+          listId={this.props.listId}
+          listItemId={this.props.itemId}
+          respectETag={true}
+        />
+      </div>
+    );
+  }
+}
+```
+
 ## How to use styles property
 
 Property styles of Dynamic Form gives you a set of properties which you can use to modify styles.

docs/documentation/docs/controls/ListItemAttachments.md

@@ -63,5 +63,53 @@ The `ListItemAttachments` control can be configured with the following propertie
 | description | string | no | Description text to display on the placeholder, below the main text and icon. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |
 | openAttachmentsInNewWindow | boolean | no | Specifies if the attachment should be opened in a separate browser tab. Use this property set to `true` if you plan to use the component in Microsoft Teams. |
+| onAttachmentChange | (itemData: any) => void | no | Callback function invoked when attachments are added or removed. Receives the updated item data including the new ETag. This is useful when using the control within a form (like DynamicForm) that tracks ETags for optimistic concurrency control. |
+
+## Usage with DynamicForm
+
+When using `ListItemAttachments` within a `DynamicForm` or any component that uses ETags for optimistic concurrency control, you should use the `onAttachmentChange` callback to update the ETag when attachments are modified:
+
+```TypeScript
+import * as React from 'react';
+import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
+import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
+
+export class MyFormComponent extends React.Component<any, any> {
+  private dynamicFormRef = React.createRef<DynamicForm>();
+
+  /**
+   * Callback invoked when attachments are added or removed
+   * Updates the ETag in DynamicForm to prevent 412 conflicts
+   */
+  private onAttachmentChange = (itemData: any): void => {
+    if (this.dynamicFormRef.current) {
+      this.dynamicFormRef.current.updateETag(itemData);
+    }
+  }
+
+  public render(): React.ReactElement {
+    return (
+      <div>
+        <ListItemAttachments
+          listId={listId}
+          itemId={itemId}
+          context={this.props.context}
+          onAttachmentChange={this.onAttachmentChange}
+        />
+        
+        <DynamicForm
+          ref={this.dynamicFormRef}
+          context={this.props.context}
+          listId={listId}
+          listItemId={itemId}
+          respectETag={true}
+        />
+      </div>
+    );
+  }
+}
+```
+
+This prevents 412 ETag conflict errors when saving the form after adding or removing attachments.
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemAttachments)

src/controls/dynamicForm/DynamicForm.tsx

@@ -121,6 +121,21 @@ export class DynamicFormBase extends React.Component<
     this._customFormatter = new CustomFormattingHelper(this._formulaEvaluation);
   }
 
+  /**
+   * Updates the ETag stored in the component's state.
+   * This is useful when the list item has been modified externally (e.g., by adding/removing attachments)
+   * and you need to update the ETag to prevent 412 conflict errors on save.
+   * 
+   * @param itemData - The updated item data containing the new ETag
+   */
+  public updateETag(itemData: any): void { // eslint-disable-line @typescript-eslint/no-explicit-any
+    if (itemData && itemData["odata.etag"]) {
+      this.setState({
+        etag: itemData["odata.etag"]
+      });
+    }
+  }
+
   /**
    * Lifecycle hook when component is mounted
    */

src/controls/listItemAttachments/IListItemAttachmentsProps.ts

@@ -16,4 +16,9 @@ export interface IListItemAttachmentsProps {
    * Description text to display on the placeholder, below the main text and icon
    */
   description?:string;
+  /**
+   * Callback function to notify parent components when attachments are modified and the item ETag changes
+   * @param itemData - The updated item data including the new ETag
+   */
+  onAttachmentChange?: (itemData: any) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
 }

src/controls/listItemAttachments/IUploadAttachmentProps.ts

@@ -10,4 +10,9 @@ export interface IUploadAttachmentProps {
   fireUpload?: boolean;
   onAttachmentUpload: (file?: File) => void;
   onUploadDialogClosed: () => void;
+  /**
+   * Callback function to notify parent components when attachments are modified and the item ETag changes
+   * @param itemData - The updated item data including the new ETag
+   */
+  onAttachmentChange?: (itemData: any) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
 }

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -77,14 +77,20 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
 
   public async uploadAttachments(itemId: number): Promise<void> {
     if (this.state.filesToUpload) {
+      let updatedItem: any = null; // eslint-disable-line @typescript-eslint/no-explicit-any
       for (const file of this.state.filesToUpload) {
-        await this._spservice.addAttachment(
+        updatedItem = await this._spservice.addAttachment(
           this.props.listId,
           itemId,
           file.name,
           file,
           this.props.webUrl);
       }
+      
+      // Notify parent component of the ETag change (use the last updated item)
+      if (updatedItem && this.props.onAttachmentChange) {
+        this.props.onAttachmentChange(updatedItem);
+      }
     }
     return new Promise<void>((resolve, reject) => {
       this.setState({
@@ -201,7 +207,12 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
 
     try {
       if (this.state.itemId) {
-        await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.state.itemId, this.props.webUrl);
+        const updatedItem = await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.state.itemId, this.props.webUrl);
+        
+        // Notify parent component of the ETag change
+        if (updatedItem && this.props.onAttachmentChange) {
+          this.props.onAttachmentChange(updatedItem);
+        }
       }
       else {
         const filesToUpload = this.state.filesToUpload;
@@ -254,6 +265,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
           onAttachmentUpload={this._onAttachmentUpload}
           fireUpload={this.state.fireUpload}
           onUploadDialogClosed={() => this.setState({ fireUpload: false })}
+          onAttachmentChange={this.props.onAttachmentChange}
         />
 
         {

src/controls/listItemAttachments/UploadAttachment.tsx

@@ -66,7 +66,12 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
 
         try {
           if(this.props.itemId && this.props.itemId > 0){
-            await this._spservice.addAttachment(this.props.listId, this.props.itemId, file.name, file, this.props.webUrl);
+            const updatedItem = await this._spservice.addAttachment(this.props.listId, this.props.itemId, file.name, file, this.props.webUrl);
+            
+            // Notify parent component of the ETag change
+            if (updatedItem && this.props.onAttachmentChange) {
+              this.props.onAttachmentChange(updatedItem);
+            }
           }
 
           this.props.onAttachmentUpload(file);

src/services/SPService.ts

@@ -393,15 +393,24 @@ export default class SPService implements ISPService {
    * @param listId
    * @param itemId
    * @param webUrl
+   * @returns Updated list item with new ETag
    */
-  public async deleteAttachment(fileName: string, listId: string, itemId: number, webUrl?: string): Promise<void> {
+  public async deleteAttachment(fileName: string, listId: string, itemId: number, webUrl?: string): Promise<any> { // eslint-disable-line @typescript-eslint/no-explicit-any
     try {
       const spOpts: ISPHttpClientOptions = {
         headers: { "X-HTTP-Method": 'DELETE', }
       };
       const webAbsoluteUrl = !webUrl ? this._webAbsoluteUrl : webUrl;
       const apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/items(@itemId)/AttachmentFiles/getByFileName(@fileName)/RecycleObject?@listId=guid'${encodeURIComponent(listId)}'&@itemId=${encodeURIComponent(String(itemId))}&@fileName='${encodeURIComponent(fileName.replace(/'/g, "''"))}'`;
       await this._context.spHttpClient.post(apiUrl, SPHttpClient.configurations.v1, spOpts);
+      
+      // Fetch the updated item to get the new ETag
+      const itemApiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/items(@itemId)?@listId=guid'${encodeURIComponent(listId)}'&@itemId=${encodeURIComponent(String(itemId))}`;
+      const itemData = await this._context.spHttpClient.get(itemApiUrl, SPHttpClient.configurations.v1);
+      if (itemData.ok) {
+        return await itemData.json();
+      }
+      return null;
     } catch (error) {
       console.dir(error);
       return Promise.reject(error);
@@ -416,8 +425,9 @@ export default class SPService implements ISPService {
    * @param fileName
    * @param file
    * @param webUrl
+   * @returns Updated list item with new ETag
    */
-  public async addAttachment(listId: string, itemId: number, fileName: string, file: File, webUrl?: string): Promise<void> {
+  public async addAttachment(listId: string, itemId: number, fileName: string, file: File, webUrl?: string): Promise<any> { // eslint-disable-line @typescript-eslint/no-explicit-any
     try {
       // Remove special characters in FileName
       //Updating the escape characters for filename as per the doucmentations
@@ -436,7 +446,14 @@ export default class SPService implements ISPService {
       const webAbsoluteUrl = !webUrl ? this._webAbsoluteUrl : webUrl;
       const apiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/items(@itemId)/AttachmentFiles/add(FileName=@fileName)?@listId=guid'${encodeURIComponent(listId)}'&@itemId=${encodeURIComponent(String(itemId))}&@fileName='${encodeURIComponent(fileName.replace(/'/g, "''"))}'`;
       await this._context.spHttpClient.post(apiUrl, SPHttpClient.configurations.v1, spOpts);
-      return;
+      
+      // Fetch the updated item to get the new ETag
+      const itemApiUrl = `${webAbsoluteUrl}/_api/web/lists(@listId)/items(@itemId)?@listId=guid'${encodeURIComponent(listId)}'&@itemId=${encodeURIComponent(String(itemId))}`;
+      const itemData = await this._context.spHttpClient.get(itemApiUrl, SPHttpClient.configurations.v1);
+      if (itemData.ok) {
+        return await itemData.json();
+      }
+      return null;
     } catch (error) {
       return Promise.reject(error);
     }