Merge pull request ohcnetwork#1183 from coronasafe/download-file

Download file
yogeshbhutkar · May 24, 2021 · 5dd797b · 5dd797b
2 parents 66e56af + fa2cc39
commit 5dd797b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
@@ -142,6 +142,7 @@ export const FileUpload = (props: FileUploadProps) => {
   const classes = useStyles();
   const [modalStyle] = React.useState(getModalStyle);
   const [open, setOpen] = React.useState(false);
+  const [downloadURL, setDownloadURL] = useState<string>();
 
   const UPLOAD_HEADING: { [index: string]: string } = {
     PATIENT: "Upload Patient Files",
@@ -157,6 +158,7 @@ export const FileUpload = (props: FileUploadProps) => {
   };
 
   const handleClose = () => {
+    setDownloadURL("");
     setOpen(false);
   };
 
@@ -222,6 +224,7 @@ export const FileUpload = (props: FileUploadProps) => {
     var data = { file_type: type, associating_id: getAssociatedId() };
     var responseData = await dispatch(retrieveUpload(data, id));
     // window.open(responseData.data.read_signed_url, "_blank");
+    downloadFileUrl(responseData.data.read_signed_url);
     setFileUrl(responseData.data.read_signed_url);
   };
 
@@ -412,6 +415,15 @@ export const FileUpload = (props: FileUploadProps) => {
       });
   };
 
+  // For creating the Download File URL
+  const downloadFileUrl = (url: string) => {
+    fetch(url)
+      .then((res) => res.blob())
+      .then((blob) => {
+        setDownloadURL(URL.createObjectURL(blob));
+      });
+  };
+
   return (
     <div className={hideBack ? "py-2" : "p-4"}>
       <Modal
@@ -422,18 +434,33 @@ export const FileUpload = (props: FileUploadProps) => {
       >
         {fileUrl && fileUrl.length > 0 ? (
           <>
-            <div className="absolute right-2">
-              <Button
-                color="primary"
-                variant="contained"
-                style={{ marginLeft: "auto" }}
-                startIcon={<Close />}
-                onClick={() => {
-                  handleClose();
-                }}
-              >
-                Close
-              </Button>
+            <div className="flex absolute right-2">
+              {downloadURL && downloadURL.length > 0 && (
+                <div>
+                  <a
+                    href={downloadURL}
+                    download
+                    className="text-white p-4 rounded m-2 bg-green-500"
+                  >
+                    <GetAppIcon>load</GetAppIcon>
+                    Download
+                  </a>
+                </div>
+              )}
+
+              <div>
+                <Button
+                  color="primary"
+                  variant="contained"
+                  style={{ marginLeft: "auto" }}
+                  startIcon={<Close />}
+                  onClick={() => {
+                    handleClose();
+                  }}
+                >
+                  Close
+                </Button>
+              </div>
             </div>
             <iframe
               title="Source Files"
@@ -442,7 +469,11 @@ export const FileUpload = (props: FileUploadProps) => {
             />
           </>
         ) : (
-          <CircularProgress />
+          <div className="flex h-screen justify-center items-center">
+            <div className="text-center">
+              <CircularProgress />
+            </div>
+          </div>
         )}
       </Modal>
 

diff --git a/src/index.html b/src/index.html
@@ -55,6 +55,7 @@
       crossorigin="use-credentials"
     />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
+
   </head>
 
   <body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,6 +55,7 @@ @@
           crossorigin="use-credentials"
         />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
       </head>
       <body>
@@ Expand Down @@