Export download

Author: jsbroks

backend/webserver/api/datasets.py

@@ -373,6 +373,7 @@ def get(self, dataset_id):
 
             time_delta = datetime.datetime.utcnow() - export.created_at
             dict_export.append({
+                'id': export.id,
                 'ago': query_util.td_format(time_delta),
                 'tags': export.tags
             })

backend/webserver/api/exports.py

@@ -1,3 +1,4 @@
+from flask import send_file
 from flask_restplus import Namespace, Resource, reqparse
 from flask_login import login_required, current_user
 
@@ -66,5 +67,5 @@ def get(self, export_id):
         if not current_user.can_download(dataset):
             return {"message": "You do not have permission to download the dataset's annotations"}, 403
 
-        return {}
+        return send_file(export.path, attachment_filename=f"{dataset.name}-{'-'.join(export.tags)}.json", as_attachment=True)
 

client/src/models/exports.js

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const baseURL = "/api/export";
+
+export default {
+  download(id, dataset) {
+    axios({
+      url: `${baseURL}/${id}/download`,
+      method: "GET",
+      responseType: "blob"
+    }).then(response => {
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", `${dataset}-${id}.json`);
+      document.body.appendChild(link);
+      link.click();
+    });
+  }
+};

client/src/views/Dataset.vue

@@ -66,12 +66,15 @@
             <h6 class="border-bottom border-gray pb-2"><b>Exports</b></h6>
 
             <div class="media text-muted pt-3" v-for="exp in datasetExports">
-              <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
-                <div class="d-flex justify-content-between align-items-center w-100">
-                  <div class="text-gray-dark">
-                    <strong>Exported {{ exp.ago.length > 0 ? exp.ago : 0 + " seconds" }} ago</strong>
-                  </div>
-                </div>
+              <div class="media-body lh-125 border-bottom border-gray">
+                  Exported {{ exp.ago.length > 0 ? exp.ago : 0 + " seconds" }} ago
+                  <button 
+                    class="btn btn-sm btn-success"
+                    style="float: right; margin: 2px; padding: 2px"
+                    @click="downloadExport(exp.id)"
+                  >
+                    Download
+                  </button>
               </div>
             </div>
           </div>
@@ -340,6 +343,7 @@
 <script>
 import toastrs from "@/mixins/toastrs";
 import Dataset from "@/models/datasets";
+import Export from "@/models/exports";
 import ImageCard from "@/components/cards/ImageCard";
 import Pagination from "@/components/Pagination";
 import PanelString from "@/components/PanelInputString";
@@ -463,6 +467,9 @@ export default {
           this.users = response.data
         });
     },
+    downloadExport(id) {
+      Export.download(id, this.dataset.name);
+    },
     getExports() {
       Dataset.getExports(this.dataset.id)
         .then(response => {