Issue 53148: Uncaught TypeError from webkitGetAsEntry()

Author: labkey-nicka

packages/components/src/internal/components/files/FileAttachmentContainer.tsx

@@ -31,6 +31,14 @@ import { ALL_FILES_LIMIT_KEY } from './models';
 
 const isDirectoryEntry = (entry: FileSystemEntry): entry is FileSystemDirectoryEntry => entry.isDirectory;
 const isFileEntry = (entry: FileSystemEntry): entry is FileSystemFileEntry => entry.isFile;
+export const getTransferItemDirectoryEntry = (
+    transferItems: DataTransferItemList,
+    index: number
+): FileSystemDirectoryEntry | undefined => {
+    const entry = transferItems?.[index]?.webkitGetAsEntry();
+    if (entry && isDirectoryEntry(entry)) return entry;
+    return undefined;
+};
 
 interface Props {
     acceptedFormats?: string; // comma separated list of allowed extensions i.e. '.png, .jpg, .jpeg'
@@ -173,7 +181,7 @@ export class FileAttachmentContainer extends React.PureComponent<Props, State> {
         const invalidNames = new Set<string>();
 
         Array.from(fileList).forEach((file, index) => {
-            if (transferItems && transferItems[index].webkitGetAsEntry().isDirectory) {
+            if (getTransferItemDirectoryEntry(transferItems, index)) {
                 if (!allowDirectories) {
                     invalidDirectories.push(file.name);
                     invalidNames.add(file.name);
@@ -312,7 +320,7 @@ export class FileAttachmentContainer extends React.PureComponent<Props, State> {
                 newFiles[file.name] = file;
                 haveValidFiles = true;
 
-                if (transferItems && transferItems[index].webkitGetAsEntry().isDirectory) {
+                if (getTransferItemDirectoryEntry(transferItems, index)) {
                     hasDirectory = true;
                 }
             }
@@ -325,8 +333,8 @@ export class FileAttachmentContainer extends React.PureComponent<Props, State> {
                 this.dirCbCount = 0;
                 this.fileCbCount = 0;
                 Array.from(fileList).forEach((file, index) => {
-                    const entry = transferItems[index].webkitGetAsEntry();
-                    if (isDirectoryEntry(entry)) {
+                    const entry = getTransferItemDirectoryEntry(transferItems, index);
+                    if (entry) {
                         delete files[file.name];
                         this.getFilesFromDirectory(files, entry, this, () => {
                             this._handleFiles(files);

packages/components/src/internal/components/forms/input/FileInput.tsx

@@ -29,6 +29,8 @@ import { FILELINK_RANGE_URI } from '../../domainproperties/constants';
 
 import { fileMatchesAcceptedFormat } from '../../files/actions';
 
+import { getTransferItemDirectoryEntry } from '../../files/FileAttachmentContainer';
+
 import { DisableableInput, DisableableInputProps, DisableableInputState } from './DisableableInput';
 
 export interface FileInputProps extends DisableableInputProps {
@@ -42,11 +44,11 @@ export interface FileInputProps extends DisableableInputProps {
     labelClassName?: string;
     maxFileSize?: number;
     name?: string;
+    onChange?: (fileMap: Record<string, File>) => void;
     queryColumn?: QueryColumn;
     renderFieldLabel?: (queryColumn: QueryColumn, label?: string, description?: string) => ReactNode;
     showLabel?: boolean;
     toggleDisabledTooltip?: string;
-    onChange?: (fileMap: Record<string, File>) => void;
 }
 
 type FileInputImplProps = FileInputProps & FormsyInjectedProps<any>;
@@ -107,7 +109,7 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
             return;
         }
 
-        if (transferItems && transferItems[0].webkitGetAsEntry().isDirectory) {
+        if (getTransferItemDirectoryEntry(transferItems, 0)) {
             this.setState({ error: 'Folders are not supported, only one file allowed' });
             return;
         }
@@ -122,7 +124,9 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
         }
 
         if (maxFileSize && file.size > maxFileSize) {
-            this.setState({ error: `File size must not exceed ${Math.round(maxFileSize / 1024).toLocaleString()} KB.` });
+            this.setState({
+                error: `File size must not exceed ${Math.round(maxFileSize / 1024).toLocaleString()} KB.`,
+            });
             return;
         }
         if (emptyFileNotAllowed && file.size === 0) {