From 02382213c6729900403666bf9e7cafec9a73192d Mon Sep 17 00:00:00 2001 From: Martin Musale Date: Tue, 4 Jul 2023 12:39:27 +0100 Subject: [PATCH 1/3] Check the file type being uploaded before performing upload Signed-off-by: Martin Musale --- .../mgt-file-upload/mgt-file-upload.ts | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts index 7e454b8ba4..d00f9e1e16 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts @@ -1160,10 +1160,12 @@ export class MgtFileUpload extends MgtBaseComponent { let entry: FileSystemEntry; const collectFilesItems: File[] = []; - for (const uploadFileItem of filesItems as DataTransferItemList) { - if (uploadFileItem.kind === 'file') { - // Defensive code to validate if function exists in Browser - // Collect all Folders into Array + for (let uploadFileItem of filesItems) { + const dataTransferItemType = uploadFileItem instanceof DataTransferItem; + const fileType = uploadFileItem instanceof File; + + if (dataTransferItemType) { + uploadFileItem = uploadFileItem as DataTransferItem; const futureUpload = uploadFileItem as FutureDataTransferItem; if (futureUpload.getAsEntry) { entry = futureUpload.getAsEntry(); @@ -1195,14 +1197,17 @@ export class MgtFileUpload extends MgtBaseComponent { } } continue; - } else { - const fileItem = uploadFileItem.getAsFile(); - if (fileItem) { - this.writeFilePath(fileItem, ''); - collectFilesItems.push(fileItem); + } + + if (fileType) { + uploadFileItem = uploadFileItem as File; + if (uploadFileItem) { + this.writeFilePath(uploadFileItem, ''); + collectFilesItems.push(uploadFileItem); } } } + // Collect Files from folder if (folders.length > 0) { const folderFiles = await this.getFolderFiles(folders); From 1d649f3794e58209cab757fc4a1f75741573fb81 Mon Sep 17 00:00:00 2001 From: Martin Musale Date: Tue, 25 Jul 2023 12:50:04 +0300 Subject: [PATCH 2/3] Narrow down the DataTransferItem types using in operator This is by checking if the or instance methods are in the uploadFileItem object. Falsey value is cast to File type Signed-off-by: Martin Musale --- .../mgt-file-upload/mgt-file-upload.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts index d00f9e1e16..4008f3fe2a 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts @@ -1161,8 +1161,7 @@ export class MgtFileUpload extends MgtBaseComponent { const collectFilesItems: File[] = []; for (let uploadFileItem of filesItems) { - const dataTransferItemType = uploadFileItem instanceof DataTransferItem; - const fileType = uploadFileItem instanceof File; + const dataTransferItemType = 'getAsFile' in uploadFileItem || 'webkitGetAsEntry' in uploadFileItem; if (dataTransferItemType) { uploadFileItem = uploadFileItem as DataTransferItem; @@ -1197,14 +1196,10 @@ export class MgtFileUpload extends MgtBaseComponent { } } continue; - } - - if (fileType) { - uploadFileItem = uploadFileItem as File; - if (uploadFileItem) { - this.writeFilePath(uploadFileItem, ''); - collectFilesItems.push(uploadFileItem); - } + } else { + const file = uploadFileItem as File; + this.writeFilePath(file, ''); + collectFilesItems.push(file); } } From 62c832c336c1ee640f8a0accb609b523098f01d4 Mon Sep 17 00:00:00 2001 From: Gavin Barron Date: Tue, 25 Jul 2023 17:02:58 +0000 Subject: [PATCH 3/3] reworking conditional logic to use typeguards to properly narrow types --- .../mgt-file-upload/mgt-file-upload.ts | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts index 4008f3fe2a..e72f05f555 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts @@ -66,6 +66,13 @@ interface FutureDataTransferItem extends DataTransferItem { getAsEntry: typeof DataTransferItem.prototype.webkitGetAsEntry; } +const isFutureDataTransferItem = (item: DataTransferItem): item is FutureDataTransferItem => + 'getAsEntry' in item && typeof item.getAsEntry === 'function'; + +const isDataTransferItem = (item: DataTransferItem | File): item is DataTransferItem => + ('getAsFile' in item && typeof item.getAsFile === 'function') || + ('webkitGetAsEntry' in item && typeof item.webkitGetAsEntry === 'function'); + /** * Upload conflict behavior status */ @@ -1160,14 +1167,10 @@ export class MgtFileUpload extends MgtBaseComponent { let entry: FileSystemEntry; const collectFilesItems: File[] = []; - for (let uploadFileItem of filesItems) { - const dataTransferItemType = 'getAsFile' in uploadFileItem || 'webkitGetAsEntry' in uploadFileItem; - - if (dataTransferItemType) { - uploadFileItem = uploadFileItem as DataTransferItem; - const futureUpload = uploadFileItem as FutureDataTransferItem; - if (futureUpload.getAsEntry) { - entry = futureUpload.getAsEntry(); + for (const uploadFileItem of filesItems) { + if (isDataTransferItem(uploadFileItem)) { + if (isFutureDataTransferItem(uploadFileItem)) { + entry = uploadFileItem.getAsEntry(); if (isFileSystemDirectoryEntry(entry)) { folders.push(entry); } else { @@ -1188,18 +1191,16 @@ export class MgtFileUpload extends MgtBaseComponent { collectFilesItems.push(file); } } - } else if ('function' == typeof uploadFileItem.getAsFile) { + } else { const file = uploadFileItem.getAsFile(); if (file) { this.writeFilePath(file, ''); collectFilesItems.push(file); } } - continue; } else { - const file = uploadFileItem as File; - this.writeFilePath(file, ''); - collectFilesItems.push(file); + this.writeFilePath(uploadFileItem, ''); + collectFilesItems.push(uploadFileItem); } }