Improve file download for image in sessions (file name + download but…

…ton directly on the input)

src/components/form/ImageTextFieldElement.tsx

@@ -3,30 +3,50 @@ import { useState } from 'react'
 import { FieldValues } from 'react-hook-form/dist/types/fields'
 import { TextFieldElement, TextFieldElementProps, useWatch } from 'react-hook-form-mui'
 import { Box, IconButton, InputAdornment } from '@mui/material'
-import { Image } from '@mui/icons-material'
+import { Download, Image } from '@mui/icons-material'
 import { SidePanelImageUpload } from '../sidepanel/SidePanelImageUpload'
 import { Event } from '../../types'
+import { triggerFileDownload } from '../../utils/triggerFileDownload'
 
 export const ImageTextFieldElement = <TFieldValues extends FieldValues = FieldValues>({
  event,
  maxImageSize = 500,
+ fileSuffix = '',
  ...otherProps
-}: TextFieldElementProps<TFieldValues> & { event: Event; maxImageSize?: number }) => {
+}: TextFieldElementProps<TFieldValues> & { event: Event; maxImageSize?: number; fileSuffix?: string }) => {
  const fieldValue = useWatch({ name: otherProps.name })
  const [isSidePanelOpen, setSidePanelOpen] = useState(false)
 
  const openSidePanel = () => {
  setSidePanelOpen(true)
  }
 
+ const fieldValueExtension = fieldValue?.split('.').pop()
+
  return (
  <>
  <TextFieldElement
  {...otherProps}
  InputProps={{
  endAdornment: (
  <Box display="flex" alignItems="center" ml={1} sx={{ cursor: 'pointer' }}>
- {fieldValue && <img src={fieldValue} width={30} onClick={openSidePanel} alt="Preview" />}
+ {fieldValue && (
+ <>
+ <img src={fieldValue} width={30} onClick={openSidePanel} alt="Preview" />
+ <IconButton
+ aria-label="download image"
+ disabled={!fieldValue}
+ onClick={async () => {
+ await triggerFileDownload(
+ fieldValue,
+ `OpenPlanner-session-${fileSuffix}.${fieldValueExtension}`
+ )
+ }}
+ edge="end">
+ <Download />
+ </IconButton>
+ </>
+ )}
  <InputAdornment position="end">
  <IconButton
  aria-label="add image"

src/components/sidepanel/SidePanelVideoPreview.tsx

@@ -34,11 +34,8 @@ export const SidePanelVideoPreview = ({
  border: '4px solid #EEE',
  }}
  />
- <a href={videoUrl} download={'video.mp4'}>
- Download
- </a>
  <Button
- variant="contained"
+ variant="outlined"
  endIcon={<Download />}
  disabled={!videoUrl}
  sx={{ mt: 2 }}

src/events/page/sessions/EventSessionForm.tsx

@@ -266,6 +266,7 @@ export const EventSessionForm = ({ event, session, onSubmit }: EventSessionFormP
  variant="filled"
  disabled={isSubmitting}
  maxImageSize={1500}
+ fileSuffix={session?.title}
  />
  </Grid>
  </Grid>
@@ -337,6 +338,7 @@ export const EventSessionForm = ({ event, session, onSubmit }: EventSessionFormP
  label="Teaser image url"
  name="teaserImageUrl"
  variant="filled"
+ fileSuffix={session?.title}
  disabled={false}
  />
  </Grid>