No need to provide itemId in ListItemAttachments

Author: Marcin Wojciechowski

src/controls/listItemAttachments/IListItemAttachmentsState.ts

@@ -8,4 +8,6 @@ export interface IListItemAttachmentsState {
       disableButton: boolean;
       showPlaceHolder: boolean;
       fireUpload: boolean;
+      filesToUpload?: File[];
+      itemId?: number;
 }

src/controls/listItemAttachments/IUploadAttachmentProps.ts

@@ -2,11 +2,11 @@ import { BaseComponentContext } from '@microsoft/sp-component-base';
 
 export interface IUploadAttachmentProps {
   listId: string;
-  itemId: number;
+  itemId?: number;
   className?: string;
-  webUrl?:string;
+  webUrl?: string;
   disabled?: boolean;
   context: BaseComponentContext;
-  fireUpload?:boolean;
-  onAttachmentUpload: () => void;
+  fireUpload?: boolean;
+  onAttachmentUpload: (file?: File) => void;
 }

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -29,14 +29,13 @@ interface IPreviewImageCollection {
 
 export class ListItemAttachments extends React.Component<IListItemAttachmentsProps, IListItemAttachmentsState> {
   private _spservice: SPservice;
-  private previewImages: IPreviewImageCollection;
+  private previewImages: IPreviewImageCollection = {};
   private _utilities: utilities;
 
   constructor(props: IListItemAttachmentsProps) {
     super(props);
 
     telemetry.track('ReactListItemAttachments', {});
-
     this.state = {
       file: null,
       hideDialog: true,
@@ -45,7 +44,9 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       deleteAttachment: false,
       disableButton: false,
       showPlaceHolder: false,
-      fireUpload: false
+      fireUpload: false,
+      filesToUpload: [],
+      itemId: props.itemId
     };
 
     // Get SPService Factory
@@ -73,26 +74,43 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
     });
   }
 
-  /**
-   * Load Item Attachments
-   */
-  private async loadAttachments() {
-    this._spservice.getListItemAttachments(this.props.listId, this.props.itemId).then((files: IListItemAttachmentFile[]) => {
-      const filePreviewImages = files.map(file => this.loadAttachmentPreview(file));
-      return Promise.all(filePreviewImages).then(filePreviews => {
-        this.previewImages = {};
-        filePreviews.forEach(preview => {
-          this.previewImages[preview.name] = preview;
-        });
+  public async uploadAttachments(itemId: number){
+    if(this.state.filesToUpload){
+      await Promise.all(this.state.filesToUpload.map(file=>this._spservice.addAttachment(
+        this.props.listId,
+        itemId,
+        file.name,
+        file,
+        this.props.webUrl)));
+    }
+    this.setState({
+      filesToUpload: [],
+      itemId: itemId
+    },this.loadAttachments);
+  }
+  protected loadAttachmentsPreview(files: IListItemAttachmentFile[]){
+    const filePreviewImages = files.map(file => this.loadAttachmentPreview(file));
+    return Promise.all(filePreviewImages).then(filePreviews => {
+      filePreviews.forEach(preview => {
+        this.previewImages[preview.name] = preview;
+      });
 
-        this.setState({
+      this.setState({
           fireUpload: false,
           hideDialog: true,
           dialogMessage: '',
           attachments: files,
           showPlaceHolder: files.length === 0 ? true : false
         });
-      });
+    });
+  }
+  /**
+   * Load Item Attachments
+   */
+  private async loadAttachments() {
+    if(this.state.itemId){
+    this._spservice.getListItemAttachments(this.props.listId, this.state.itemId).then(async (files: IListItemAttachmentFile[]) => {
+      await this.loadAttachmentsPreview(files);
     }).catch((error: Error) => {
       this.setState({
         fireUpload: false,
@@ -101,6 +119,22 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       });
     });
   }
+  else if(this.state.filesToUpload && this.state.filesToUpload.length > 0){
+    let files = this.state.filesToUpload.map(file=>({
+      FileName: file.name,
+      ServerRelativeUrl: undefined
+    }));
+    await this.loadAttachmentsPreview(files);
+  }
+  else{
+    this.setState({
+      fireUpload: false,
+      hideDialog: true,
+      dialogMessage: '',
+      showPlaceHolder: true
+    });
+  }
+  }
 
   /**
    * Close the dialog
@@ -120,8 +154,15 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
   /**
    * Attachment uploaded event handler
    */
-  private _onAttachmentUpload = () => {
+  private _onAttachmentUpload = (file: File) => {
     // load Attachments
+    if(!this.state.itemId){
+      let files = this.state.filesToUpload || [];
+      files.push(file);
+      this.setState({
+        filesToUpload: [...files]
+      });
+    }
     this.loadAttachments();
   }
 
@@ -153,8 +194,26 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
     });
 
     try {
-      await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.props.itemId, this.props.webUrl);
+      if(this.state.itemId){
+        await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.state.itemId, this.props.webUrl);
+      }
+      else{
+        let filesToUpload = this.state.filesToUpload;
+        let fileToRemove = filesToUpload.find(f=>f.name === file.FileName);
+        if(fileToRemove){
+          filesToUpload.splice(filesToUpload.indexOf(fileToRemove),1);
+        }
+        let attachments = this.state.attachments;
+        let attachmentToRemove = attachments.find(attachment => attachment.FileName === file.FileName);
+        if(attachmentToRemove){
+          attachments.splice(attachments.indexOf(attachmentToRemove),1);
 
+        }
+        this.setState({
+          filesToUpload: [...filesToUpload],
+          attachments: [...attachments]
+        });
+      }
       this.setState({
         fireUpload: false,
         hideDialog: false,
@@ -183,7 +242,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       <div className={styles.ListItemAttachments}>
         <UploadAttachment
           listId={this.props.listId}
-          itemId={this.props.itemId}
+          itemId={this.state.itemId}
           disabled={this.props.disabled}
           context={this.props.context}
           onAttachmentUpload={this._onAttachmentUpload}

src/controls/listItemAttachments/UploadAttachment.tsx

@@ -67,12 +67,14 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
       });
 
       try {
-        await this._spservice.addAttachment(this.props.listId, this.props.itemId, file.name, file, this.props.webUrl);
+        if(this.props.itemId && this.props.itemId > 0){
+          await this._spservice.addAttachment(this.props.listId, this.props.itemId, file.name, file, this.props.webUrl);
+        }
 
         this.setState({
           isLoading: false
         });
-        this.props.onAttachmentUpload();
+        this.props.onAttachmentUpload(file);
       } catch (error) {
         this.setState({
           hideDialog: false,