Fix #9892 thumb max size filter restored (#9893)

* Fix #9892 thumb max size filter restored
geosolutions-it · Jan 18, 2024 · 7eb4d3d · 7eb4d3d
1 parent a666db2
commit 7eb4d3d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/web/client/components/background/BackgroundDialog.jsx b/web/client/components/background/BackgroundDialog.jsx
@@ -316,6 +316,7 @@ export default class BackgroundDialog extends React.Component {
             {<Form style={{width: '100%'}}>
                 {this.renderThumbnailErrors()}
                 <Thumbnail
+                    checkOriginalFileSize
                     onUpdate={(data, url) => this.setState({thumbnail: {data, url}})}
                     onError={(errors) => this.setState({thumbnailErrors: errors})}
                     message={<Message msgId="backgroundDialog.thumbnailMessage"/>}

diff --git a/web/client/components/maps/forms/Thumbnail.jsx b/web/client/components/maps/forms/Thumbnail.jsx
@@ -41,7 +41,8 @@ class MapThumbnail extends React.Component {
         onRemoveThumbnail: PropTypes.func,
         // I18N
         message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-        suggestion: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+        suggestion: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+        checkOriginalFileSize: PropTypes.bool
     };
 
     static contextTypes = {
@@ -113,6 +114,7 @@ class MapThumbnail extends React.Component {
                 ref="imgThumbnail"
                 thumbnail={this.getThumbnailUrl()}
                 className={null}
+                checkOriginalFileSize={this.props.checkOriginalFileSize}
                 dropZoneProps={{
                     className: 'dropzone alert alert-info',
                     rejectClassName: 'alert-danger'

diff --git a/web/client/components/misc/Thumbnail.jsx b/web/client/components/misc/Thumbnail.jsx
@@ -45,6 +45,7 @@ const getThumbnail = (files, options) => {
  * @prop {node} message display node message inside thumbnail
  * @prop {string} thumbnail source of thumbnail
  * @prop {number} maxFileSize max size of file
+ * @prop {boolean} checkOriginalFileSize if true it checks maxFileSize compared to source image
  * @prop {array} supportedImageTypes array of images supported mime types
  * @prop {options} thumbnailOptions options to scale the thumbnail to fit a specific size
  * @prop {object} dropZoneProps props for dropzone component
@@ -64,6 +65,7 @@ const Thumbnail = forwardRef(({
     removeTooltipId = 'removeThumbnail',
     style = {},
     maxFileSize = 500000,
+    checkOriginalFileSize = false,
     supportedImageTypes = ['image/png', 'image/jpeg', 'image/jpg'],
     thumbnailOptions,
     dropZoneProps = {
@@ -89,9 +91,13 @@ const Thumbnail = forwardRef(({
 
     const handleDrop = (files) => {
         const imageType = files?.[0]?.type;
+        const imageSize = files?.[0]?.size;
         const isASupportedImage = supportedImageTypes.indexOf(imageType) !== -1;
+        if (checkOriginalFileSize && imageSize >= maxFileSize) {
+            return onError(['SIZE'], files);
+        }
         setPending(true);
-        getThumbnail(files, thumbnailOptions)
+        return getThumbnail(files, thumbnailOptions)
             .then(({ data, size }) => {
                 if (!mounted.current) {
                     return null;
@@ -112,6 +118,7 @@ const Thumbnail = forwardRef(({
                 setPending(false);
                 return onError(e);
             });
+
     };
 
     const handleRemove = (event) => {