Merge pull request #943 from pnp/feature/attachments-label

Feature/attachments label

Author: joelfmrodrigues

docs/documentation/docs/controls/ListItemAttachments.md

@@ -59,6 +59,8 @@ The `ListItemAttachments` control can be configured with the following propertie
 | itemId | number | no | List Item Id  |
 | listId | string | yes | Guid of the list. |
 | webUrl | string | no | URL of the site. By default it uses the current site URL. |
+| label | string | no | Main text to display on the placeholder, next to the icon. |
+| 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 openend in a separate browser tab. Use this property set to `true` if you plan to use the component in Microsoft Teams. |
 

src/controls/listItemAttachments/IListItemAttachmentsProps.ts

@@ -8,4 +8,12 @@ export interface IListItemAttachmentsProps {
   disabled?: boolean;
   context: BaseComponentContext;
   openAttachmentsInNewWindow?: boolean; // JJ - 20200613 - needed to support Microsoft Teams
+  /**
+   * Main text to display on the placeholder, next to the icon
+   */
+  label?:string;
+  /**
+   * Description text to display on the placeholder, below the main text and icon
+   */
+  description?:string;
 }

src/controls/listItemAttachments/IUploadAttachmentState.ts

@@ -1,8 +1,7 @@
 
 export interface IUploadAttachmentState {
-      file: any;
       hideDialog: boolean;
       dialogMessage: string;
       isLoading: boolean;
-     
+
 }

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -120,22 +120,22 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
           dialogMessage: strings.ListItemAttachmentserrorLoadAttachments.replace('{0}', error.message)
         });
       });
-  }
-  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
-    });
-  }
+    }
+    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
+      });
+    }
   }
 
   /**
@@ -255,8 +255,8 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
           this.state.showPlaceHolder ?
             <Placeholder
               iconName='Upload'
-              iconText={strings.ListItemAttachmentslPlaceHolderIconText}
-              description={strings.ListItemAttachmentslPlaceHolderDescription}
+              iconText={this.props.label || strings.ListItemAttachmentslPlaceHolderIconText}
+              description={this.props.description || strings.ListItemAttachmentslPlaceHolderDescription}
               buttonLabel={strings.ListItemAttachmentslPlaceHolderButtonLabel}
               hideButton={this.props.disabled}
               onConfigure={() => this.setState({ fireUpload: true })} />
@@ -304,7 +304,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
                 </div>
               );
             })}
-        {
+        { !this.state.hideDialog &&
 
           <Dialog
             hidden={this.state.hideDialog}

src/controls/listItemAttachments/UploadAttachment.tsx

@@ -12,12 +12,12 @@ import styles from './ListItemAttachments.module.scss';
 export class UploadAttachment extends React.Component<IUploadAttachmentProps, IUploadAttachmentState> {
   private _spservice: SPservice;
   private fileInput;
+  private _isFileExplorerOpen = false;
 
   constructor(props: IUploadAttachmentProps) {
     super(props);
 
     this.state = {
-      file: null,
       hideDialog: true,
       dialogMessage: '',
       isLoading: false,
@@ -35,9 +35,10 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
    * @param prevState
    */
   public componentDidUpdate(prevProps: IUploadAttachmentProps, prevState: IUploadAttachmentState): void {
-    if (this.props.fireUpload) {
+    if (this.props.fireUpload && !this._isFileExplorerOpen) {
       this.fileInput.current.value = '';
       this.fileInput.current.click();
+      this._isFileExplorerOpen = true;
     }
   }
 
@@ -62,19 +63,16 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
     const file = e.target.files[0];
     return new Promise<void>((resolve,errorCallback)=>{
       reader.onloadend = async () => {
-        this.setState({
-          file: file
-        });
-  
+
         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);
           }
-  
+
+          this.props.onAttachmentUpload(file);
           this.setState({
             isLoading: false
           });
-          this.props.onAttachmentUpload(file);
           resolve();
         } catch (error) {
           this.setState({
@@ -84,10 +82,11 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
           });
           errorCallback(error);
         }
+        this._isFileExplorerOpen = false;
       };
       reader.readAsDataURL(file);
     });
-   
+
   }
 
   /**