Add error toasts for image drag and more restrictive image mime type rejection

This commit is contained in:
Mitchell McCaffrey 2021-06-06 19:27:01 +10:00
parent 7d1cff7358
commit acaf580ac7
3 changed files with 23 additions and 6 deletions

View File

@ -1,7 +1,12 @@
import React, { useState } from "react";
import { Box, Flex, Text } from "theme-ui";
import { useToasts } from "react-toast-notifications";
const supportFileTypes = ["image/jpeg", "image/gif", "image/png", "image/webp"];
function ImageDrop({ onDrop, dropText, children }) {
const { addToast } = useToasts();
const [dragging, setDragging] = useState(false);
function handleImageDragEnter(event) {
event.preventDefault();
@ -35,15 +40,27 @@ function ImageDrop({ onDrop, dropText, children }) {
if (response.ok) {
const file = await response.blob();
file.name = name;
imageFiles.push(file);
if (supportFileTypes.includes(file.type)) {
imageFiles.push(file);
} else {
addToast(`Unsupported file type for ${file.name}`);
}
}
} catch {}
} catch (e) {
if (e.message === "Failed to fetch") {
addToast("Unable to import image: failed to fetch");
} else {
addToast("Unable to import image");
}
}
}
const files = event.dataTransfer.files;
for (let file of files) {
if (file.type.startsWith("image")) {
if (supportFileTypes.includes(file.type)) {
imageFiles.push(file);
} else {
addToast(`Unsupported file type for ${file.name}`);
}
}
onDrop(imageFiles);
@ -75,7 +92,7 @@ function ImageDrop({ onDrop, dropText, children }) {
onDrop={handleImageDrop}
>
<Text sx={{ pointerEvents: "none" }}>
{dropText || "Drop image to upload"}
{dropText || "Drop image to import"}
</Text>
</Flex>
)}

View File

@ -202,7 +202,7 @@ function SelectMapModal({
<input
onChange={(event) => handleImagesUpload(event.target.files)}
type="file"
accept="image/*"
accept="image/jpeg, image/gif, image/png, image/webp"
style={{ display: "none" }}
multiple
ref={fileInputRef}

View File

@ -203,7 +203,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
<input
onChange={(event) => handleImagesUpload(event.target.files)}
type="file"
accept="image/*"
accept="image/jpeg, image/gif, image/png, image/webp"
style={{ display: "none" }}
ref={fileInputRef}
multiple