Merge pull request #1876 from carbon-design-system/fix-enforce-maxsize

fix(imagecard): enforce maxsize on upload

Author: kodiakhq[bot]

jest.config.js

@@ -84,9 +84,9 @@ module.exports = {
       functions: 50,
     },
     './src/components/ImageCard/ImageUploader.jsx': {
-      statements: 54,
+      statements: 52,
       branches: 39,
-      lines: 56,
+      lines: 53,
       functions: 26,
     },
     './src/components/ImageCard/ImageControls.jsx': { branches: 66 },

src/components/ImageCard/ImageCard.jsx

@@ -46,10 +46,12 @@ const defaultProps = {
     browseImages: 'Add from gallery',
     insertUrl: 'Insert from URL',
     urlInput: 'Type or insert URL',
-    errorTitle: 'Error: ',
+    errorTitle: 'Upload error: ',
+    fileTooLarge: 'Image file is too large',
   },
   locale: 'en',
   content: {},
+  maxFileSizeInBytes: 1048576,
   accept: null,
   onUpload: () => {},
   onBrowseClick: null,
@@ -68,6 +70,7 @@ const ImageCard = ({
   isResizable,
   error,
   isLoading,
+  maxFileSizeInBytes,
   i18n: { loadingDataLabel, ...otherLabels },
   renderIconByName,
   locale,
@@ -142,6 +145,7 @@ const ImageCard = ({
                     onBrowseClick={onBrowseClick}
                     width={width}
                     height={height}
+                    maxFileSizeInBytes={maxFileSizeInBytes}
                     onUpload={handleOnUpload}
                     i18n={pick(
                       otherLabels,
@@ -151,7 +155,9 @@ const ImageCard = ({
                       'uploadByURLButton',
                       'browseImages',
                       'insertUrl',
-                      'urlInput'
+                      'urlInput',
+                      'fileTooLarge',
+                      'errorTitle'
                     )}
                     hasInsertFromUrl={hasInsertFromUrl}
                   />

src/components/ImageCard/ImageUploader.jsx

@@ -23,7 +23,8 @@ const i18nDefaults = {
   browseImages: 'Add from gallery',
   insertUrl: 'Insert from URL',
   urlInput: 'Type or insert URL',
-  errorTitle: 'Error: ',
+  errorTitle: 'Upload error: ',
+  fileTooLarge: 'Image file is too large',
   wrongFileType: (accept) =>
     `This file is not one of the accepted file types, ${accept.join(', ')}`,
 };
@@ -32,6 +33,8 @@ const propTypes = {
   accept: PropTypes.arrayOf(PropTypes.string),
   onBrowseClick: PropTypes.func,
   onUpload: PropTypes.func,
+  /** the maximum file size in bytes */
+  maxFileSizeInBytes: PropTypes.number,
   hasInsertFromUrl: PropTypes.bool,
   i18n: PropTypes.shape({
     dropContainerLabelText: PropTypes.string,
@@ -41,11 +44,13 @@ const propTypes = {
     browseImages: PropTypes.string,
     insertUrl: PropTypes.string,
     urlInput: PropTypes.string,
+    fileTooLarge: PropTypes.string,
   }),
 };
 
 const defaultProps = {
   accept: ['APNG', 'AVIF', 'GIF', 'JPEG', 'JPG', 'PNG', 'WebP'],
+  maxFileSizeInBytes: 1048576,
   onBrowseClick: () => {},
   onUpload: () => {},
   hasInsertFromUrl: false,
@@ -58,6 +63,7 @@ const ImageUploader = ({
   i18n,
   onUpload,
   accept,
+  maxFileSizeInBytes,
   ...other
 }) => {
   const [fromURL, setFromURL] = useState(false);
@@ -96,7 +102,9 @@ const ImageUploader = ({
 
   const handleOnChange = (_event, files) => {
     const acceptedFiles = accept.map((i) => i.toLowerCase());
-    if (
+    if (files.addedFiles[0].size > maxFileSizeInBytes) {
+      setError(i18n.fileTooLarge);
+    } else if (
       acceptedFiles.includes(
         files.addedFiles[0].name
           .match(/([^/.]*?)(?=\?|#|$)/ || [])[0]

src/components/ImageCard/_image-uploader.scss

@@ -77,6 +77,7 @@
 
   .#{$prefix}--inline-notification {
     margin: auto;
+    margin-top: 1rem;
   }
 }
 

src/constants/CardPropTypes.js

@@ -443,6 +443,8 @@ export const ImageCardPropTypes = {
   values: PropTypes.shape({
     hotspots: PropTypes.array,
   }),
+  /** the maximum supported file size in bytes */
+  maxFileSizeInBytes: PropTypes.number,
   onUpload: PropTypes.func,
   onBrowseClick: PropTypes.func,
   accept: PropTypes.arrayOf(PropTypes.string),

src/utils/__tests__/__snapshots__/publicAPI.test.js.snap

@@ -12745,14 +12745,16 @@ Map {
         "browseImages": "Add from gallery",
         "dropContainerDescText": "Max file size is 1MB. Supported file types are: APNG, AVIF, GIF, JPEG, PNG, WebP",
         "dropContainerLabelText": "Drag file here or click to upload file",
-        "errorTitle": "Error: ",
+        "errorTitle": "Upload error: ",
+        "fileTooLarge": "Image file is too large",
         "insertUrl": "Insert from URL",
         "loadingDataLabel": "Loading hotspot data",
         "uploadByURLButton": "OK",
         "uploadByURLCancel": "Cancel",
         "urlInput": "Type or insert URL",
       },
       "locale": "en",
+      "maxFileSizeInBytes": 1048576,
       "onBrowseClick": null,
       "onUpload": [Function],
     },
@@ -13399,6 +13401,9 @@ Map {
       "locale": Object {
         "type": "string",
       },
+      "maxFileSizeInBytes": Object {
+        "type": "number",
+      },
       "onBlur": Object {
         "type": "func",
       },