From 3f5f7ceb158b01c8cff763bfc4d1ea3743e5a3f1 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Thu, 17 Nov 2022 17:07:12 +0200 Subject: [PATCH 1/7] Replace node path-import with custom getExtension function --- .../react/src/components/fileInput/FileInput.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/fileInput/FileInput.tsx b/packages/react/src/components/fileInput/FileInput.tsx index 172b782d74..1287343c40 100644 --- a/packages/react/src/components/fileInput/FileInput.tsx +++ b/packages/react/src/components/fileInput/FileInput.tsx @@ -1,5 +1,3 @@ -import path from 'path'; - import React, { ChangeEvent, useEffect, useRef, useState } from 'react'; import uniqueId from 'lodash.uniqueid'; @@ -14,6 +12,15 @@ import styles from './FileInput.module.scss'; type Language = 'en' | 'fi' | 'sv'; +// Return the extension of the path, from the last '.' to end of string in the last portion of the path. +const getExtension = (path: string): string => { + if (!path || typeof path !== 'string' || '' === path) { + throw new TypeError('Path must be a non-empty string. Path is now' + JSON.stringify(path)); + } + const lastDotIndex = path.lastIndexOf('.'); + return path.substring(lastDotIndex + 1); +}; + type FileInputProps = { /** * A comma-separated list of unique file type specifiers describing file types to allow. If present, the filename extension or filetype property is validated against the list. If the file(s) do not match the acceptance criteria, the component will not add the file(s), and it will show an error message with the file name. @@ -272,8 +279,8 @@ type ValidationError = { }; const validateAccept = (language: Language, accept: string) => (file: File): true | ValidationError => { - const extension = path.extname(file.name); - const fileType = file.type; + const extension: string = getExtension(file.name); + const fileType: string = file.type; const acceptedExtensions = accept.split(',').map((str) => str.trim()); const isMatchingType = !!acceptedExtensions.find( (acceptExtension) => acceptExtension.includes(fileType) || acceptExtension.includes(`${fileType.split('/')[0]}/*`), From c74647492d527496a93ec0d7bdd078ca4325316d Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Thu, 17 Nov 2022 17:42:03 +0200 Subject: [PATCH 2/7] Fix linter issue --- packages/react/src/components/fileInput/FileInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/fileInput/FileInput.tsx b/packages/react/src/components/fileInput/FileInput.tsx index 1287343c40..b57ad816b2 100644 --- a/packages/react/src/components/fileInput/FileInput.tsx +++ b/packages/react/src/components/fileInput/FileInput.tsx @@ -14,8 +14,8 @@ type Language = 'en' | 'fi' | 'sv'; // Return the extension of the path, from the last '.' to end of string in the last portion of the path. const getExtension = (path: string): string => { - if (!path || typeof path !== 'string' || '' === path) { - throw new TypeError('Path must be a non-empty string. Path is now' + JSON.stringify(path)); + if (!path || typeof path !== 'string' || path === '') { + throw new TypeError(`Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); } const lastDotIndex = path.lastIndexOf('.'); return path.substring(lastDotIndex + 1); From 8cb1d1a2f4f1dacb296fb8b3d413a9b25c2681b4 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Thu, 17 Nov 2022 17:49:15 +0200 Subject: [PATCH 3/7] Add more error handling --- .../react/src/components/fileInput/FileInput.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/fileInput/FileInput.tsx b/packages/react/src/components/fileInput/FileInput.tsx index b57ad816b2..4584a4241f 100644 --- a/packages/react/src/components/fileInput/FileInput.tsx +++ b/packages/react/src/components/fileInput/FileInput.tsx @@ -17,8 +17,18 @@ const getExtension = (path: string): string => { if (!path || typeof path !== 'string' || path === '') { throw new TypeError(`Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); } + const lastDotIndex = path.lastIndexOf('.'); - return path.substring(lastDotIndex + 1); + if(lastDotIndex === -1) { + throw new Error('File is missing extension'); + } + + const extensionWithDot = path.substring(lastDotIndex); + if (extensionWithDot.length <= 1) { + throw new Error('File is missing extension'); + } + + return extensionWithDot; }; type FileInputProps = { From e7229c05d0a893a1f7be7724f9e320ee0052f751 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Fri, 18 Nov 2022 08:32:01 +0200 Subject: [PATCH 4/7] Fix linter issue --- packages/react/src/components/fileInput/FileInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/fileInput/FileInput.tsx b/packages/react/src/components/fileInput/FileInput.tsx index 4584a4241f..d55048cec2 100644 --- a/packages/react/src/components/fileInput/FileInput.tsx +++ b/packages/react/src/components/fileInput/FileInput.tsx @@ -19,7 +19,7 @@ const getExtension = (path: string): string => { } const lastDotIndex = path.lastIndexOf('.'); - if(lastDotIndex === -1) { + if (lastDotIndex === -1) { throw new Error('File is missing extension'); } From c885e0fe65e6550024d8af96ca3a83aeed4e4a8e Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Fri, 18 Nov 2022 08:45:54 +0200 Subject: [PATCH 5/7] Write error to console rather than throwing error --- .../src/components/fileInput/FileInput.tsx | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/react/src/components/fileInput/FileInput.tsx b/packages/react/src/components/fileInput/FileInput.tsx index d55048cec2..0f287a1e30 100644 --- a/packages/react/src/components/fileInput/FileInput.tsx +++ b/packages/react/src/components/fileInput/FileInput.tsx @@ -12,25 +12,6 @@ import styles from './FileInput.module.scss'; type Language = 'en' | 'fi' | 'sv'; -// Return the extension of the path, from the last '.' to end of string in the last portion of the path. -const getExtension = (path: string): string => { - if (!path || typeof path !== 'string' || path === '') { - throw new TypeError(`Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); - } - - const lastDotIndex = path.lastIndexOf('.'); - if (lastDotIndex === -1) { - throw new Error('File is missing extension'); - } - - const extensionWithDot = path.substring(lastDotIndex); - if (extensionWithDot.length <= 1) { - throw new Error('File is missing extension'); - } - - return extensionWithDot; -}; - type FileInputProps = { /** * A comma-separated list of unique file type specifiers describing file types to allow. If present, the filename extension or filetype property is validated against the list. If the file(s) do not match the acceptance criteria, the component will not add the file(s), and it will show an error message with the file name. @@ -288,6 +269,28 @@ type ValidationError = { text: string; }; +// Return the extension of the path, from the last '.' to end of string in the last portion of the path. +const getExtension = (path: string): string => { + if (!path || typeof path !== 'string' || path === '') { + console.error(`HDS FileInput: Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); + return ''; + } + + const lastDotIndex = path.lastIndexOf('.'); + if (lastDotIndex === -1) { + console.error('HDS FileInput: File is missing extension'); + return ''; + } + + const extensionWithDot = path.substring(lastDotIndex); + if (extensionWithDot.length <= 1) { + console.error('HDS FileInput: File is missing extension'); + return ''; + } + + return extensionWithDot; +}; + const validateAccept = (language: Language, accept: string) => (file: File): true | ValidationError => { const extension: string = getExtension(file.name); const fileType: string = file.type; From 47cc28d11a2af57631d2ab4217c3d8bc00a4f837 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Fri, 18 Nov 2022 09:17:33 +0200 Subject: [PATCH 6/7] Replace console.error with console.warn --- packages/react/src/components/fileInput/FileInput.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/fileInput/FileInput.tsx b/packages/react/src/components/fileInput/FileInput.tsx index 0f287a1e30..c3451b11e4 100644 --- a/packages/react/src/components/fileInput/FileInput.tsx +++ b/packages/react/src/components/fileInput/FileInput.tsx @@ -272,19 +272,22 @@ type ValidationError = { // Return the extension of the path, from the last '.' to end of string in the last portion of the path. const getExtension = (path: string): string => { if (!path || typeof path !== 'string' || path === '') { - console.error(`HDS FileInput: Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); + // eslint-disable-next-line no-console + console.warn(`HDS FileInput: Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); return ''; } const lastDotIndex = path.lastIndexOf('.'); if (lastDotIndex === -1) { - console.error('HDS FileInput: File is missing extension'); + // eslint-disable-next-line no-console + console.warn('HDS FileInput: File is missing extension'); return ''; } const extensionWithDot = path.substring(lastDotIndex); if (extensionWithDot.length <= 1) { - console.error('HDS FileInput: File is missing extension'); + // eslint-disable-next-line no-console + console.warn('HDS FileInput: File is missing extension'); return ''; } From 66f468ccccfb144e80a74142c88fe99007e2868c Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Fri, 18 Nov 2022 09:19:03 +0200 Subject: [PATCH 7/7] Inline console message format with other components --- packages/react/src/components/fileInput/FileInput.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/fileInput/FileInput.tsx b/packages/react/src/components/fileInput/FileInput.tsx index c3451b11e4..2e968d6c6a 100644 --- a/packages/react/src/components/fileInput/FileInput.tsx +++ b/packages/react/src/components/fileInput/FileInput.tsx @@ -273,21 +273,21 @@ type ValidationError = { const getExtension = (path: string): string => { if (!path || typeof path !== 'string' || path === '') { // eslint-disable-next-line no-console - console.warn(`HDS FileInput: Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); + console.warn(`FileInput: Path must be a non-empty string. Path is now ${JSON.stringify(path)}`); return ''; } const lastDotIndex = path.lastIndexOf('.'); if (lastDotIndex === -1) { // eslint-disable-next-line no-console - console.warn('HDS FileInput: File is missing extension'); + console.warn('FileInput: File is missing extension'); return ''; } const extensionWithDot = path.substring(lastDotIndex); if (extensionWithDot.length <= 1) { // eslint-disable-next-line no-console - console.warn('HDS FileInput: File is missing extension'); + console.warn('FileInput: File is missing extension'); return ''; }