Formatted download changes

server/frontend/package-lock.json

@@ -9553,6 +9553,11 @@
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.0.tgz",
       "integrity": "sha512-oUbbplKuH07/XX2YD2+Q+GMiPpnVXaRz8npE7suhBH9QEkJe2W7mQ6rwuMXHue3fpfcftQwzgyvGzIHyfCSngQ=="
     },
+    "js-file-download": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
+      "integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

server/frontend/package.json

@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "js-cookie": "^3.0.0",
+    "js-file-download": "^0.4.12",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

server/frontend/src/components/modules/LookupModal.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { makeStyles, Modal, Backdrop, Fade, LinearProgress, Button } from '@material-ui/core'
 import axios from 'axios'
 
+var fileDownload = require('js-file-download');
+
 const useStyles = makeStyles((theme) => ({
     modal: {
       display: 'flex',
@@ -43,6 +45,7 @@ export default function LookupModal(props) {
 
     useEffect(() => {
       const BASE_URL = process.env.REACT_APP_BASE_URL;
+      // fileUrl = `http://localhost:8000/api/download/${props.id}/`;
       if (counter > 0) {
         setTimeout(() => {
           setCounter(counter - 1)
@@ -80,6 +83,17 @@ export default function LookupModal(props) {
       }
     }, [counter, props.id]);
 
+    const handleDownload = () => {
+      axios.get(`http://localhost:8000/api/download/${props.id}/`, {
+          responseType: 'blob',
+      }).then(res => {
+          fileDownload(res.data, 'download.tsv');
+          console.log(res);
+      }).catch(err => {
+          console.log(err);
+      })
+    }
+
     const downloadFile = () => {
       axios
         .get(`http://localhost:8000/api/download/${props.id}/`)
@@ -111,7 +125,7 @@ export default function LookupModal(props) {
                         <p>Job id: {props.id}</p>
                         <p><em>The results of your prediction have been emailed.</em></p>
                         <p><em>View and analyze results <a href={viewPath}>here</a></em></p>
-                        <p><Button variant='contained' onClick={downloadFile}><a href="" download={filePath}>Download</a></Button></p>
+                        <p><Button variant='contained' onClick={handleDownload}>Download</Button></p>
                       </div> :
                       <div className='LookupModal-Info'>
                         <p><em>Refreshing in {counter} seconds...</em></p>
@@ -126,4 +140,4 @@ export default function LookupModal(props) {
               </Modal>
         </div>
     )
-}
+  }

server/predict/views.py

@@ -11,7 +11,7 @@ import pandas as pd
 from django.conf import settings
 from django.core.files import File
 from django.core.files.uploadedfile import UploadedFile
-from django.http import HttpResponse
+from django.http import FileResponse, HttpResponse
 from django.utils.encoding import smart_str
 from django.views.generic import View
 from rest_framework import status
@@ -224,29 +224,31 @@ def get_download(request, uuid):
     result_path = job.result_fi
     logging.debug(result_path)
 
-    with open(result_path, "r") as f:
-        logging.debug(f)
-        logging.debug("opened file successfully")
-        return HttpResponse(
-            f,
-            headers={
-                "Content-Type": "application/octet-stream",
-                "Content-Disposition": 'attachment; filename="test.tsv"',
-            },
-        )
+    return FileResponse(open(result_path, "rb"), as_attachment=True)
 
-    response = HttpResponse(
-        content_type="text/csv",
-        headers={"Content-Disposition": f'attachment; filename="{uuid}.csv"'},
-    )
-    writer = csv.writer(response)
-    with open(result_path, "r") as f:
-        logging.debug("Opened file")
-        logging.debug("Trying to use lines")
-        for line in f:
-            logging.debug(line)
-            writer.writerow(line.strip().split("\t"))
-    return response
+    # with open(result_path, "r") as f:
+    #     logging.debug(f)
+    #     logging.debug("opened file successfully")
+    #     return HttpResponse(
+    #         f,
+    #         headers={
+    #             "Content-Type": "application/octet-stream",
+    #             "Content-Disposition": 'attachment; filename="test.tsv"',
+    #         },
+    #     )
+
+    # response = HttpResponse(
+    #     content_type="text/csv",
+    #     headers={"Content-Disposition": f'attachment; filename="{uuid}.csv"'},
+    # )
+    # writer = csv.writer(response)
+    # with open(result_path, "r") as f:
+    #     logging.debug("Opened file")
+    #     logging.debug("Trying to use lines")
+    #     for line in f:
+    #         logging.debug(line)
+    #         writer.writerow(line.strip().split("\t"))
+    # return response
 
 
 @api_view(["GET"])