Fix typescript strict issues for Upload andnd CommandButtonComponent

src/Common/Upload/Upload.tsx

@@ -23,7 +23,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
 }: UploadProps) => {
   const [selectedFilesTitle, setSelectedFilesTitle] = useState<string[]>([]);
 
-  const fileRef = useRef<HTMLInputElement>();
+  const fileRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
 
   const onImportLinkKeyPress = (event: KeyboardEvent<HTMLAnchorElement>): void => {
     if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
@@ -39,12 +39,14 @@ export const Upload: FunctionComponent<UploadProps> = ({
     const { files } = event.target;
 
     const newFileList = [];
-    for (let i = 0; i < files.length; i++) {
-      newFileList.push(files.item(i).name);
-    }
-    if (newFileList) {
-      setSelectedFilesTitle(newFileList);
-      props.onUpload(event);
+    if (files) {
+      for (let i = 0; i < files.length; i++) {
+        newFileList.push(files[i].name);
+      }
+      if (newFileList) {
+        setSelectedFilesTitle(newFileList);
+        props.onUpload(event);
+      }
     }
   };
   const title = label + " to upload";

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -114,8 +114,14 @@ export interface CommandButtonComponentProps {
 }
 
 export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {
-  private dropdownElt: HTMLElement;
-  private expandButtonElt: HTMLElement;
+  private dropdownElt: HTMLDivElement | undefined;
+  private expandButtonElt: HTMLDivElement | undefined;
+
+  constructor(props: CommandButtonComponentProps) {
+    super(props);
+    this.dropdownElt = undefined;
+    this.expandButtonElt = undefined;
+  }
 
   public componentDidUpdate(): void {
     if (!this.dropdownElt || !this.expandButtonElt) {
@@ -135,15 +141,19 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
 
   private onLauncherKeyDown(event: React.KeyboardEvent<HTMLDivElement>): boolean {
     if (event.keyCode === KeyCodes.DownArrow) {
-      $(this.dropdownElt).hide();
-      $(this.dropdownElt).show().focus();
-      event.stopPropagation();
-      return false;
+      if (this.dropdownElt) {
+        $(this.dropdownElt).hide();
+        $(this.dropdownElt).show().focus();
+        event.stopPropagation();
+        return false;
+      }
     }
     if (event.keyCode === KeyCodes.UpArrow) {
-      $(this.dropdownElt).hide();
-      event.stopPropagation();
-      return false;
+      if (this.dropdownElt) {
+        $(this.dropdownElt).hide();
+        event.stopPropagation();
+        return false;
+      }
     }
     return true;
   }
@@ -185,8 +195,8 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
       <div
         className="commandExpand"
         tabIndex={0}
-        ref={(ref: HTMLElement) => {
-          this.expandButtonElt = ref;
+        ref={(instance: HTMLDivElement) => {
+          this.expandButtonElt = instance;
         }}
         onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => this.onLauncherKeyDown(e)}
       >
@@ -198,8 +208,8 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
         </div>
         <div
           className="commandDropdownContainer"
-          ref={(ref: HTMLElement) => {
-            this.dropdownElt = ref;
+          ref={(instance: HTMLDivElement) => {
+            this.dropdownElt = instance;
           }}
         >
           <div className="commandDropdown">

tsconfig.strict.json

@@ -139,7 +139,9 @@
     "./src/userContext.test.ts",
     "src/Common/EntityValue.tsx",
     "./src/Platform/Hosted/Components/SwitchAccount.tsx",
-    "./src/Platform/Hosted/Components/SwitchSubscription.tsx"
+    "./src/Platform/Hosted/Components/SwitchSubscription.tsx",
+    "./src/Common/Upload/Upload.tsx"
+
   ],
   "include": [
     "src/CellOutputViewer/transforms/**/*",