Added drag and drop support to map upload
This commit is contained in:
parent
64f284ebb7
commit
279d83122f
@ -18,8 +18,7 @@ function AddMapButton({ onMapChanged }) {
|
||||
|
||||
const mapDataRef = useRef(null);
|
||||
const [mapSource, setMapSource] = useState(null);
|
||||
function handleImageUpload(event) {
|
||||
const file = event.target.files[0];
|
||||
function handleImageUpload(file) {
|
||||
const url = URL.createObjectURL(file);
|
||||
let image = new Image();
|
||||
image.onload = function () {
|
||||
|
@ -1,5 +1,13 @@
|
||||
import React, { useRef } from "react";
|
||||
import { Box, Button, Image as UIImage, Flex, Label, Input } from "theme-ui";
|
||||
import React, { useRef, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Image as UIImage,
|
||||
Flex,
|
||||
Label,
|
||||
Input,
|
||||
Text,
|
||||
} from "theme-ui";
|
||||
|
||||
import Modal from "../components/Modal";
|
||||
|
||||
@ -22,6 +30,30 @@ function AddMapModal({
|
||||
fileInputRef.current.click();
|
||||
}
|
||||
}
|
||||
|
||||
const [dragging, setDragging] = useState(false);
|
||||
function handleImageDragEnter(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setDragging(true);
|
||||
}
|
||||
|
||||
function handleImageDragLeave(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setDragging(false);
|
||||
}
|
||||
|
||||
function handleImageDrop(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (file.type.startsWith("image")) {
|
||||
onImageUpload(file);
|
||||
}
|
||||
setDragging(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onRequestClose={onRequestClose}>
|
||||
<Box
|
||||
@ -30,19 +62,24 @@ function AddMapModal({
|
||||
e.preventDefault();
|
||||
onDone();
|
||||
}}
|
||||
onDragEnter={handleImageDragEnter}
|
||||
>
|
||||
<Label pt={2} pb={1}>
|
||||
Add map
|
||||
</Label>
|
||||
<input
|
||||
onChange={onImageUpload}
|
||||
onChange={(event) => onImageUpload(event.target.files[0])}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
ref={fileInputRef}
|
||||
/>
|
||||
|
||||
<Flex sx={{ flexDirection: "column" }}>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Label pt={2} pb={1}>
|
||||
Add map
|
||||
</Label>
|
||||
<UIImage
|
||||
my={2}
|
||||
sx={{
|
||||
@ -91,6 +128,30 @@ function AddMapModal({
|
||||
Select Image
|
||||
</Button>
|
||||
)}
|
||||
{dragging && (
|
||||
<Flex
|
||||
bg="muted"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "copy",
|
||||
}}
|
||||
onDragLeave={handleImageDragLeave}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.dropEffect = "copy";
|
||||
}}
|
||||
onDrop={handleImageDrop}
|
||||
>
|
||||
<Text sx={{ pointerEvents: "none" }}>Drop map to upload</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Modal>
|
||||
|
Loading…
Reference in New Issue
Block a user