Merge branch 'gautamdsheth-filePickerUploadFix' into dev

Author: AJIXuMuK

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.module.scss

@@ -2,6 +2,8 @@
 
 .localTabSinglePreview {
   margin-bottom: 20px;
+  display: inline-block;
+  text-align: center;
 }
 
 .localTabSinglePreviewImage {
@@ -11,6 +13,10 @@
   image-orientation: from-image;
 }
 
+.localTabFilename {
+  color: $ms-color-neutralPrimary;
+}
+
 .localTabLabel {
   color: $ms-color-themePrimary;
   cursor: pointer;

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx

@@ -19,7 +19,7 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
   }
 
   public render(): React.ReactElement<IUploadFilePickerTabProps> {
-    const { filePickerResult } = this.state;
+    const { filePickerResult, filePreview } = this.state;
     const fileName: string = filePickerResult ? filePickerResult.fileName : null;
     const acceptedFilesExtensions = this.props.accepts ? this.props.accepts.join(",") : null;
 
@@ -35,23 +35,26 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
             accept={acceptedFilesExtensions} multiple={false} onChange={(event: React.ChangeEvent<HTMLInputElement>) => this._handleFileUpload(event)}
           />
           {
-            fileName &&
+            fileName && filePreview &&
             /** Display image preview */
             <div className={styles.localTabSinglePreview}>
-              {
-                this.state.filePreview &&
-                <img className={styles.localTabSinglePreviewImage} src={this.state.filePreview} alt={this.state.filePickerResult.fileName} />
-              }
+                <img className={styles.localTabSinglePreviewImage} src={filePreview} alt={filePickerResult.fileName} />
+                <span>{fileName}</span>
             </div>
           }
+          <div>
+            <label className={styles.localTabFilename}>{
+              (!filePreview && fileName ? fileName : "")
+            }</label>
+          </div>
           <label className={styles.localTabLabel} htmlFor="fileInput">{
             (fileName ? strings.ChangeFileLinkLabel : strings.ChooseFileLinkLabel)
           }</label>
         </div>
         <div className={styles.actionButtonsContainer}>
           <div className={styles.actionButtons}>
             <PrimaryButton
-              disabled={!this.state.filePickerResult}
+              disabled={!filePickerResult}
               onClick={() => this._handleSave()} className={styles.actionButton}>{strings.AddFileButtonLabel}</PrimaryButton>
             <DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
           </div>
@@ -93,7 +96,8 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
       };
     }
     this.setState({
-      filePickerResult
+      filePickerResult,
+      filePreview: undefined
     });
   }
 

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1007,7 +1007,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         <div>
           <FilePicker
             bingAPIKey="<BING API KEY>"
-            accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
+            //accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
             buttonLabel="Upload image"
             buttonIcon="FileImage"
             onSave={this._onFilePickerSave}