aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/package.json1
-rw-r--r--modern/src/settings/CalendarPage.js18
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>