@oslokommune/punkt-react 15.4.1 → 15.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "15.4.1",
+  "version": "15.4.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^15.4.0",
+    "@oslokommune/punkt-elements": "^15.4.2",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^15.0.0",
-    "@oslokommune/punkt-css": "^15.4.0",
+    "@oslokommune/punkt-css": "^15.4.2",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "38243fb5d8d7bef2cacf6ba5c79cb4ec4478edcf"
+  "gitHead": "1186b7601af17e09107f3f8e55410af0fea62248"
 }

package/src/components/fileupload/Subcomponents.tsx

@@ -208,9 +208,12 @@ export const ThumbnailRenderer = ({
   onPreviewClick?: () => void
 }) => {
   const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null)
+  const [thumbnailLoadFailed, setThumbnailLoadFailed] = useState(false)
   const file = transferItem.file
 
   useEffect(() => {
+    setThumbnailLoadFailed(false)
+
     // Check if the file is an image
     if (file.type.startsWith('image/')) {
       // Create an object URL for the file
@@ -222,16 +225,27 @@ export const ThumbnailRenderer = ({
         URL.revokeObjectURL(url)
       }
     }
+
+    setThumbnailUrl(null)
   }, [file])
 
-  const img = (thumbnailUrl && <img src={thumbnailUrl} alt={transferItem.attributes['targetFilename']} />) || (
-    <PktIcon name="document-text" className="pkt-fileupload__queue-display__item__icon pkt-icon--medium" />
-  )
+  const img = (thumbnailUrl && !thumbnailLoadFailed && (
+    <img
+      src={thumbnailUrl}
+      alt={transferItem.attributes['targetFilename']}
+      onError={() => setThumbnailLoadFailed(true)}
+    />
+  )) || <PktIcon name="document-text" className="pkt-fileupload__queue-display__item__icon pkt-icon--medium" />
 
   const showExpandButton = !!onPreviewClick
+  const hasThumbnailPreview = !!thumbnailUrl && !thumbnailLoadFailed
 
   return (
-    <div className="pkt-fileupload__queue-display__item__thumbnail">
+    <div
+      className={`pkt-fileupload__queue-display__item__thumbnail${
+        hasThumbnailPreview ? '' : ' pkt-fileupload__queue-display__item__thumbnail--fallback'
+      }`}
+    >
       <PktButton
         className="pkt-fileupload__queue-display__item__thumbnail__image-wrapper"
         aria-label={`Forhåndsvis bilde ${transferItem.attributes['targetFilename']}`}
@@ -268,10 +282,13 @@ interface IImagePreviewModal {
 export const ImagePreviewModal = forwardRef(
   ({ isOpen, images, currentIndex, onClose, onNavigate }: IImagePreviewModal, ref: ForwardedRef<HTMLDialogElement>) => {
     const [imageUrl, setImageUrl] = useState<string | null>(null)
+    const [imageLoadFailed, setImageLoadFailed] = useState(false)
     const currentImage = images[currentIndex]
     const hasMultipleImages = images.length > 1
 
     useEffect(() => {
+      setImageLoadFailed(false)
+
       if (currentImage && currentImage.file.type.startsWith('image/')) {
         const url = URL.createObjectURL(currentImage.file)
         setImageUrl(url)
@@ -328,12 +345,15 @@ export const ImagePreviewModal = forwardRef(
           )}
 
           <div className="pkt-fileupload__image-preview__content">
-            {imageUrl && (
+            {imageUrl && !imageLoadFailed ? (
               <img
                 src={imageUrl}
                 alt={`${currentImage.attributes['targetFilename']} - ${currentIndex + 1} av ${images.length}`}
                 className="pkt-fileupload__image-preview__image"
+                onError={() => setImageLoadFailed(true)}
               />
+            ) : (
+              <PktIcon name="picture" className="pkt-fileupload__queue-display__item__icon pkt-icon--medium" />
             )}
           </div>