drop

src/components/manifest/ManifestHeader.jsx

@@ -7,6 +7,7 @@ import TextField from '@mui/material/TextField';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
 import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
 import { PanelTile } from 'dashgui/panels';
+import FileDropzone from '../FileDropzone';
 import { manifestConfig, partyDisplayName } from './manifestConfig';
 
 class ManifestHeader extends PureComponent {
@@ -122,16 +123,42 @@ class ManifestHeader extends PureComponent {
             />
           ) : null}
           {onPdfUpload ? (
-            <Button
-              variant="outlined"
-              size="small"
-              startIcon={pdfUploading ? <CircularProgress size={16} color="inherit" /> : <UploadFileIcon />}
+            <FileDropzone
+              accept="application/pdf,.pdf"
               disabled={saving || pdfUploading}
-              onClick={this.handleUploadClick}
-              sx={{ whiteSpace: 'nowrap', height: 40, alignSelf: { xs: 'stretch', sm: 'center' }, px: 2 }}
+              onFileDrop={onPdfUpload}
+              sx={{
+                alignSelf: { xs: 'stretch', sm: 'center' },
+                flexShrink: 0,
+                width: { xs: '100%', sm: 175 },
+              }}
             >
-              {pdfUploading ? 'Wird analysiert…' : 'PDF hochladen'}
-            </Button>
+              {({ isDragging }) => (
+                <Button
+                  variant="outlined"
+                  size="small"
+                  startIcon={pdfUploading ? <CircularProgress size={16} color="inherit" /> : <UploadFileIcon />}
+                  disabled={saving || pdfUploading}
+                  onClick={this.handleUploadClick}
+                  sx={{
+                    whiteSpace: 'nowrap',
+                    height: 40,
+                    width: '100%',
+                    px: 2,
+                    boxSizing: 'border-box',
+                    bgcolor: isDragging ? 'action.hover' : 'transparent',
+                    borderColor: isDragging ? 'primary.main' : undefined,
+                    transition: 'background-color 0.15s, border-color 0.15s',
+                  }}
+                >
+                  {pdfUploading
+                    ? 'Wird analysiert…'
+                    : isDragging
+                    ? 'PDF hier ablegen'
+                    : 'PDF hochladen'}
+                </Button>
+              )}
+            </FileDropzone>
           ) : null}
         </Stack>
         {onPdfUpload ? (