diff --git a/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js b/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js
new file mode 100644
index 0000000000..76a23e3e54
--- /dev/null
+++ b/components/molecule/photoUploader/demo/articles/HideDeleteButtonArticle.js
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+
+import {Article, Code, H2, Paragraph} from '@s-ui/documentation-library'
+
+import MoleculePhotoUploader from '../../src/index.js'
+import {
+ _addPhotoTextButton,
+ _addPhotoTextSkeleton,
+ _callbackPhotosRejected,
+ _callbackPhotosUploaded,
+ _callbackUploadPhoto,
+ _dragPhotoDividerTextInitialContent,
+ _dragPhotoTextInitialContent,
+ _dropPhotosHere,
+ _errorCorruptedPhotoUploaded,
+ _errorFileExcededMaxSize,
+ _errorFormatPhotoUploaded,
+ _errorInitialPhotoDownloadError,
+ _limitPhotosUploaded,
+ _limitPhotosUploadedNotification,
+ _mainPhotoLabel,
+ _maxPhotos,
+ _notificationErrorFormatPhotoUploaded,
+ _uploadingPhotosText
+} from '../config.js'
+import {
+ _addMorePhotosIcon,
+ _deleteIcon,
+ _dragPhotosIcon,
+ _infoIcon,
+ _rejectPhotosIcon,
+ _retryErrorPhotosIcon,
+ _rotateIcon
+} from '../icons.js'
+
+const HideDeleteButtonArticle = ({className}) => {
+ return (
+
+ Hide Delete Button
+
+ When showDeleteButton prop is set to false, the delete button will be hidden from the
+ thumb cards. This is useful when you want to prevent users from deleting uploaded photos.
+
+ Try uploading some photos below to see how the delete button is hidden:
+
+
+ )
+}
+
+HideDeleteButtonArticle.displayName = 'ShowDeleteButtonArticle'
+
+HideDeleteButtonArticle.propTypes = {
+ className: PropTypes.string
+}
+
+export default HideDeleteButtonArticle
diff --git a/components/molecule/photoUploader/demo/index.js b/components/molecule/photoUploader/demo/index.js
index f85f7b7516..21264c3026 100644
--- a/components/molecule/photoUploader/demo/index.js
+++ b/components/molecule/photoUploader/demo/index.js
@@ -1,6 +1,7 @@
import {Code, H1, Paragraph} from '@s-ui/documentation-library'
import DefaultArticle from './articles/DefaultArticle.js'
+import HideDeleteButtonArticle from './articles/HideDeleteButtonArticle.js'
import InitialPhotosArticle from './articles/InitialPhotosArticle.js'
import WithContentArticle from './articles/WithContentArticle.js'
import {CLASS_DEMO_SECTION} from './config.js'
@@ -15,6 +16,8 @@ const Demo = () => {
+
+
diff --git a/components/molecule/photoUploader/src/PhotosPreview/index.js b/components/molecule/photoUploader/src/PhotosPreview/index.js
index d1d20784f1..4921938a5c 100644
--- a/components/molecule/photoUploader/src/PhotosPreview/index.js
+++ b/components/molecule/photoUploader/src/PhotosPreview/index.js
@@ -43,6 +43,7 @@ const PhotosPreview = ({
dragIcon,
errorInitialPhotoDownloadErrorText,
files,
+ showDeleteButton,
inputId,
isPhotoUploaderFully,
mainPhotoLabel,
@@ -178,6 +179,7 @@ const PhotosPreview = ({
deleteButtonAriaLabel={deleteButtonAriaLabel}
deleteIcon={deleteIcon()}
dragIcon={dragIcon()}
+ showDeleteButton={showDeleteButton}
iconSize={thumbIconSize}
image={file}
index={index}
@@ -253,6 +255,7 @@ PhotosPreview.propTypes = {
dragIcon: PropTypes.node,
errorInitialPhotoDownloadErrorText: PropTypes.string.isRequired,
files: PropTypes.array.isRequired,
+ showDeleteButton: PropTypes.bool,
inputId: PropTypes.string.isRequired,
isPhotoUploaderFully: PropTypes.bool.isRequired,
mainPhotoLabel: PropTypes.string.isRequired,
diff --git a/components/molecule/photoUploader/src/ThumbCard/index.js b/components/molecule/photoUploader/src/ThumbCard/index.js
index dd552dab9e..686410b6d3 100644
--- a/components/molecule/photoUploader/src/ThumbCard/index.js
+++ b/components/molecule/photoUploader/src/ThumbCard/index.js
@@ -22,6 +22,7 @@ const ThumbCard = ({
deleteButtonAriaLabel,
deleteIcon,
dragIcon,
+ showDeleteButton = true,
iconSize = ATOM_ICON_SIZES.small,
image,
index,
@@ -66,23 +67,25 @@ const ThumbCard = ({
-
-
callbackDeleteItem(index)}
- size={atomButtonSizes.SMALL}
- tabIndex="0"
- type="button"
- >
-
-
-
+ {showDeleteButton && (
+
+
callbackDeleteItem(index)}
+ size={atomButtonSizes.SMALL}
+ tabIndex="0"
+ type="button"
+ >
+
+
+
+ )}
{hasErrors ? (