fix: clicking "download" in an image modal opens image in new tab

frontend/src/components/ModalImageCors/index.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import ModalImage from "react-modal-image";
+import api from "../../services/api";
+
+const useStyles = makeStyles(theme => ({
+	messageMedia: {
+		objectFit: "cover",
+		width: 250,
+		height: 200,
+		borderTopLeftRadius: 8,
+		borderTopRightRadius: 8,
+		borderBottomLeftRadius: 8,
+		borderBottomRightRadius: 8,
+	},
+}));
+
+const ModalImageCors = ({ imageUrl }) => {
+	const classes = useStyles();
+	const [fetching, setFetching] = useState(true);
+	const [url, setUrl] = useState("");
+
+	useEffect(() => {
+		if (!imageUrl) return;
+		const fetchImage = async () => {
+			const { data, headers } = await api.get(imageUrl, {
+				responseType: "blob",
+			});
+			const blobUrl = window.URL.createObjectURL(
+				new Blob([data], { type: headers["content-type"] })
+			);
+			setUrl(blobUrl);
+			setFetching(false);
+		};
+		fetchImage();
+	}, [imageUrl]);
+
+	return (
+		<ModalImage
+			className={classes.messageMedia}
+			smallSrcSet={fetching ? imageUrl : url}
+			medium={fetching ? imageUrl : url}
+			large={fetching ? imageUrl : url}
+			alt="image"
+		/>
+	);
+};
+
+export default ModalImageCors;

frontend/src/components/Ticket/index.js

@@ -4,7 +4,6 @@ import { useParams, useHistory } from "react-router-dom";
 import { toast } from "react-toastify";
 import { isSameDay, parseISO, format } from "date-fns";
 import openSocket from "socket.io-client";
-import ModalImage from "react-modal-image";
 import clsx from "clsx";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -34,6 +33,7 @@ import TicketInfo from "../TicketInfo";
 import TicketActionButtons from "../TicketActionButtons";
 
 import MessageOptionsMenu from "../MessageOptionsMenu";
+import ModalImageCors from "../ModalImageCors";
 
 const drawerWidth = 320;
 
@@ -423,15 +423,7 @@ const Ticket = () => {
 
 	const checkMessageMedia = message => {
 		if (message.mediaType === "image") {
-			return (
-				<ModalImage
-					className={classes.messageMedia}
-					smallSrcSet={message.mediaUrl}
-					medium={message.mediaUrl}
-					large={message.mediaUrl}
-					alt="image"
-				/>
-			);
+			return <ModalImageCors imageUrl={message.mediaUrl} />;
 		}
 		if (message.mediaType === "audio") {
 			return (