Added custom download logic for attachments (#903)

* Fixed eslint errors

* Added custom logic to download attachments

package.json

@@ -108,7 +108,6 @@
     "eslint-plugin-react-hooks": "4.5.0",
     "eslint-plugin-unused-imports": "2.0.0",
     "express": "^4.18.2",
-    "file-saver": "2.0.5",
     "formik": "2.2.9",
     "fuse.js": "6.6.2",
     "husky": "8.0.1",

src/apis/file_download.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+const newAxiosInstance = axios.create();
+
+const getFile = url => newAxiosInstance.get(url, { responseType: "blob" });
+
+const fileDownloadApi = { getFile };
+
+export default fileDownloadApi;

src/components/Attachments/Attachment.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 
-import saveAs from "file-saver";
 import { removeBy } from "neetocommons/pure";
 import { withEventTargetValue } from "neetocommons/utils";
 import { MenuVertical, Close } from "neetoicons";
@@ -20,6 +19,7 @@ import directUploadsApi from "apis/direct_uploads";
 
 import { ATTACHMENT_OPTIONS } from "./constants";
 import FileIcon from "./FileIcon";
+import { downloadFile } from "./utils";
 
 const { Menu, MenuItem } = Dropdown;
 
@@ -38,16 +38,13 @@ const Attachment = ({
   const [isDeleting, setIsDeleting] = useState(false);
   const [newFilename, setNewFilename] = useState("");
 
-  const handleDownload = () => {
-    saveAs(attachment.url, attachment.filename);
-  };
+  const handleDownload = () =>
+    downloadFile(attachment.url, attachment.filename);
 
   const handleRename = async () => {
     try {
       const { signedId } = attachment;
-      const payload = {
-        blob: { filename: newFilename },
-      };
+      const payload = { blob: { filename: newFilename } };
 
       const {
         blob: { filename },
@@ -169,7 +166,7 @@ const Attachment = ({
               <Dropdown
                 buttonSize="small"
                 buttonStyle="text"
-                disabled={disabled}
+                {...{ disabled }}
                 icon={MenuVertical}
               >
                 <Menu>

src/components/Attachments/Preview.jsx

@@ -1,12 +1,13 @@
 import React, { useRef } from "react";
 
-import saveAs from "file-saver";
 import { findIndexBy } from "neetocommons/pure";
 import { Download, Left, Right } from "neetoicons";
 import { Modal, Typography, Button } from "neetoui";
 import { isEmpty } from "ramda";
 import { Trans, useTranslation } from "react-i18next";
 
+import { downloadFile } from "./utils";
+
 const Preview = ({
   onClose,
   attachments,
@@ -38,10 +39,16 @@ const Preview = ({
     downloadRef.current?.focus();
   };
 
-  const handleDownload = () => {
-    saveAs(url, filename);
+  const handleKeyDown = event => {
+    if (event.key === "ArrowRight") {
+      handleRightArrowClick();
+    } else if (event.key === "ArrowLeft") {
+      handleLeftArrowClick();
+    }
   };
 
+  const handleDownload = () => downloadFile(url, filename);
+
   const setPreview = () => {
     switch (contentType.split("/")[0]) {
       case "image":
@@ -74,14 +81,8 @@ const Preview = ({
       className="ne-attachments-preview"
       isOpen={!isEmpty(selectedAttachment)}
       size="large"
-      onClose={onClose}
-      onKeyDown={event => {
-        if (event.key === "ArrowRight") {
-          handleRightArrowClick();
-        } else if (event.key === "ArrowLeft") {
-          handleLeftArrowClick();
-        }
-      }}
+      {...{ onClose }}
+      onKeyDown={handleKeyDown}
     >
       <Modal.Header className="ne-attachments-preview__header">
         <Typography style="h2">{filename}</Typography>

src/components/Attachments/utils.js

@@ -2,6 +2,8 @@ import i18n from "i18next";
 import { Toastr } from "neetoui";
 import { mergeRight } from "ramda";
 
+import fileDownloadApi from "apis/file_download";
+
 import { DEFAULT_UPPY_CONFIG } from "./constants";
 
 const { t } = i18n;
@@ -56,3 +58,25 @@ export const handleDrop = ({ uppy, config, previousAttachmentsCount }) => {
 
   return true;
 };
+
+export const downloadFile = async (fileUrl, filename) => {
+  try {
+    const response = await fileDownloadApi.getFile(fileUrl);
+    const blob = new Blob([response.data]);
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement("a");
+    a.href = url;
+    a.setAttribute("download", filename);
+
+    a.style.display = "none";
+    document.body.appendChild(a);
+
+    a.click();
+
+    URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  } catch (error) {
+    Toastr.error(error);
+  }
+};

yarn.lock

@@ -7827,11 +7827,6 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-[email protected]:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
-  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
-
 file-system-cache@^1.0.5:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.1.0.tgz#984de17b976b75a77a27e08d6828137c1aa80fa1"