diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/settings/CalendarPage.js | 18 |
2 files changed, 19 insertions, 0 deletions
diff --git a/modern/package.json b/modern/package.json index a9050fb5..e5489a6b 100644 --- a/modern/package.json +++ b/modern/package.json @@ -16,6 +16,7 @@ "canvas-tint-image": "^2.0.1", "mapbox-gl": "^1.13.1", "maplibre-gl": "^1.15.0", + "material-ui-dropzone": "^3.5.0", "moment": "^2.29.1", "react": "^17.0.2", "react-container-dimensions": "^1.4.1", diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js index de714c36..60d4ef76 100644 --- a/modern/src/settings/CalendarPage.js +++ b/modern/src/settings/CalendarPage.js @@ -4,6 +4,7 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, } from '@material-ui/core'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { DropzoneArea } from 'material-ui-dropzone'; import EditItemView from '../EditItemView'; import EditAttributesView from '../attributes/EditAttributesView'; import { useTranslation } from '../LocalizationProvider'; @@ -20,6 +21,19 @@ const CalendarPage = () => { const [item, setItem] = useState(); + const handleFiles = (files) => { + if (files.length > 0) { + const reader = new FileReader(); + reader.onload = (event) => { + const { result } = event.target; + setItem({ ...item, data: result.substr(result.indexOf(',') + 1) }); + }; + reader.readAsDataURL(files[0]); + } else { + setItem({ ...item, data: null }); + } + }; + return ( <EditItemView endpoint="calendars" item={item} setItem={setItem}> {item @@ -39,6 +53,10 @@ const CalendarPage = () => { label={t('sharedName')} variant="filled" /> + <DropzoneArea + filesLimit={1} + onChange={handleFiles} + /> </AccordionDetails> </Accordion> <Accordion> |