change attachment file and preview load

Author: ltdu

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -22,9 +22,13 @@ import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import utilities from './utilities';
 import { Placeholder } from "../placeholder";
 
+interface IPreviewImageCollection {
+  [fileName: string]: IDocumentCardPreviewImage;
+}
+
 export class ListItemAttachments extends React.Component<IListItemAttachmentsProps, IListItemAttachmentsState> {
   private _spservice: SPservice;
-  private previewImages: IDocumentCardPreviewImage[];
+  private previewImages: IPreviewImageCollection;
   private _utilities: utilities;
 
   constructor(props: IListItemAttachmentsProps) {
@@ -53,45 +57,54 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
     this.loadAttachments();
   }
 
+  private async loadAttachmentPreview(file: IListItemAttachmentFile): Promise<IDocumentCardPreviewImage> {
+    return this._utilities.GetFileImageUrl(file).then(previewImageUrl => {
+      return {
+        name: file.FileName,
+        previewImageSrc: previewImageUrl,
+        iconSrc: '',
+        imageFit: ImageFit.center,
+        width: 187,
+        height: 130,
+      };
+    });
+  }
+
   /**
    * Load Item Attachments
    */
   private async loadAttachments() {
-    this.previewImages = [];
-    try {
-      const files: IListItemAttachmentFile[] = await this._spservice.getListItemAttachments(this.props.listId, this.props.itemId);
-
-      for (const file of files) {
-        const _previewImage = await this._utilities.GetFileImageUrl(file);
-        this.previewImages.push({
-          name: file.FileName,
-          previewImageSrc: _previewImage,
-          iconSrc: '',
-          imageFit: ImageFit.center,
-          width: 187,
-          height: 130,
+    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;
         });
-      }
 
-      this.setState({
-        hideDialog: true,
-        dialogMessage: '',
-        attachments: files,
-        showPlaceHolder: files.length === 0 ? true : false
+        this.setState({
+          fireUpload: false,
+          hideDialog: true,
+          dialogMessage: '',
+          attachments: files,
+          showPlaceHolder: files.length === 0 ? true : false
+        });
       });
-    } catch (error) {
+    }).catch((error: Error) => {
       this.setState({
-        hideDialog: true,
+        fireUpload: false,
+        hideDialog: false,
         dialogMessage: strings.ListItemAttachmentserrorLoadAttachments.replace('{0}', error.message)
       });
-    }
+    });
   }
 
   /**
    * Close the dialog
    */
   private _closeDialog = () => {
     this.setState({
+      fireUpload: false,
       hideDialog: true,
       dialogMessage: '',
       file: null,
@@ -116,6 +129,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
    */
   private onDeleteAttachment = (file: IListItemAttachmentFile) => {
     this.setState({
+      fireUpload: false,
       hideDialog: false,
       deleteAttachment: true,
       file: file,
@@ -131,13 +145,15 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
     const { file } = this.state;
 
     this.setState({
+      fireUpload: false,
       disableButton: true,
     });
 
     try {
       await this._spservice.deleteAttachment(file.FileName, this.props.listId, this.props.itemId, this.props.webUrl);
 
       this.setState({
+        fireUpload: false,
         hideDialog: false,
         deleteAttachment: false,
         disableButton: false,
@@ -146,6 +162,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       });
     } catch (error) {
       this.setState({
+        fireUpload: false,
         hideDialog: false,
         file: null,
         deleteAttachment: false,
@@ -179,22 +196,22 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
               onConfigure={() => this.setState({ fireUpload: true })} />
             :
 
-            this.state.attachments.map((file, i: number) => {
+            this.state.attachments.map(file => {
+              const fileName = file.FileName;
+              const previewImage = this.previewImages[fileName];
               return (
-                <div className={styles.documentCardWrapper}>
+                <div key={fileName} className={styles.documentCardWrapper}>
                   <TooltipHost
-                    content={file.FileName}
+                    content={fileName}
                     calloutProps={{ gapSpace: 0, isBeakVisible: true }}
                     closeDelay={200}
                     directionalHint={DirectionalHint.rightCenter}>
 
                     <DocumentCard
                       onClickHref={`${file.ServerRelativeUrl}?web=1`}
                       className={styles.documentCard}>
-                      <DocumentCardPreview previewImages={[this.previewImages[i]]} />
-                      <Label className={styles.fileLabel}>
-                        {file.FileName}
-                      </Label>
+                      <DocumentCardPreview previewImages={[previewImage]} />
+                      <Label className={styles.fileLabel}>{fileName}</Label>
                       <DocumentCardActions
                         actions={
                           [

src/services/SPService.ts

@@ -77,7 +77,7 @@ export default class SPService implements ISPService {
       const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
       if (data.ok) {
         const results = await data.json();
-        if (results && results.value && results.value.length > 0) {
+        if (results && results.value) {
           return results.value;
         }
       }