u

src/components/article/ArticlePhoto.jsx

@@ -0,0 +1,28 @@
+import Box from '@mui/material/Box';
+
+export default function ArticlePhoto({ imageUrl }) {
+  return (
+    <Box
+      sx={{
+        width: 200,
+        height: 200,
+        maxWidth: '100%',
+        borderRadius: 2,
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: imageUrl ? 'transparent' : 'action.hover',
+      }}
+    >
+      {imageUrl ? (
+        <Box
+          component="img"
+          src={imageUrl}
+          alt=""
+          sx={{ width: '100%', height: '100%', objectFit: 'contain' }}
+        />
+      ) : null}
+    </Box>
+  );
+}

src/components/article/ArticlePhotoTile.jsx

@@ -0,0 +1,82 @@
+import { useRef, useState } from 'react';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import { article } from '../../api';
+import { PanelTile } from '../panels';
+import { requireObject } from '../../utils/apiShape';
+import { prepareArticlePhoto } from '../../utils/prepareArticlePhoto';
+import { pasteImageOrFallback } from '../../utils/pasteImage';
+import { primaryPhoto } from '../../utils/articleDetail';
+import ArticlePhoto from './ArticlePhoto';
+
+export default function ArticlePhotoTile({
+  article: articleData,
+  onArticleUpdated,
+  wide = 1,
+  minHeight = 0,
+  sx,
+  tileKey,
+}) {
+  const fileInputRef = useRef(null);
+  const [busy, setBusy] = useState(false);
+  const photo = primaryPhoto(articleData);
+  const imageUrl = photo?.url;
+
+  const uploadRawImage = async (rawBlob) => {
+    setBusy(true);
+    try {
+      const file = await prepareArticlePhoto(rawBlob);
+      const res = await article.uploadPhoto(articleData.sku, file);
+      requireObject(res, 'POST /api/article/:sku/photos');
+      requireObject(res.article, 'article');
+      onArticleUpdated?.(res.article);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handlePasteClick = () => {
+    if (busy) return;
+    void pasteImageOrFallback(() => {
+      fileInputRef.current?.click();
+    }).then((image) => {
+      if (image) void uploadRawImage(image);
+    });
+  };
+
+  const handleFileChange = (event) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+    void uploadRawImage(file);
+  };
+
+  return (
+    <>
+      <PanelTile
+        wide={wide}
+        minHeight={minHeight}
+        sx={sx}
+        tileKey={tileKey}
+        action={
+          imageUrl
+            ? undefined
+            : {
+                label: 'Bild einfügen',
+                icon: ContentPasteIcon,
+                onClick: handlePasteClick,
+                busy,
+              }
+        }
+      >
+        <ArticlePhoto imageUrl={imageUrl} />
+      </PanelTile>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        hidden
+        onChange={handleFileChange}
+      />
+    </>
+  );
+}

src/components/article/ArticleView.jsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import SingleLineTextEdit from '../SingleLineTextEdit';
+import ArticlePhotoTile from './ArticlePhotoTile';
 import { article } from '../../api';
 import { EditablePanelTile, PanelTile, PanelTileGrid } from '../panels';
 import { requireObject } from '../../utils/apiShape';
@@ -32,20 +33,6 @@ function PanelValue({ label, children }) {
   );
 }
 
-function ArticlePhoto() {
-  return (
-    <Box
-      sx={{
-        width: 200,
-        height: 200,
-        maxWidth: '100%',
-        bgcolor: 'action.hover',
-        borderRadius: 2,
-      }}
-    />
-  );
-}
-
 const headerTileSx = {
   minHeight: 0,
 };
@@ -155,9 +142,14 @@ export default function ArticleView({ article: articleData, onArticleUpdated })
         )}
       />
 
-      <PanelTile wide={1} tileKey={PANEL_TILE_KEYS.photo} minHeight={0} sx={headerTileSx}>
-        <ArticlePhoto />
-      </PanelTile>
+      <ArticlePhotoTile
+        wide={1}
+        tileKey={PANEL_TILE_KEYS.photo}
+        minHeight={0}
+        sx={headerTileSx}
+        article={articleData}
+        onArticleUpdated={onArticleUpdated}
+      />
 
       <PanelTile wide={1} tileKey={PANEL_TILE_KEYS.stock} title="Bestand">
         <PanelValue>