Get presigned upload token via ajax request

atst/domain/auth.py

@@ -13,6 +13,7 @@ UNPROTECTED_ROUTES = [
     "atst.helpdocs",
     "static",
     "atst.about",
+    "atst.upload_token",
 ]
 
 

atst/routes/__init__.py

@@ -9,6 +9,7 @@ from flask import (
     request,
     make_response,
     current_app as app,
+    jsonify,
 )
 
 from jinja2.exceptions import TemplateNotFound
@@ -41,6 +42,14 @@ def root():
     return render_template("login.html", redirect_url=redirect_url)
 
 
+@bp.route("/upload-token")
+def upload_token():
+    (token, object_name) = app.csp.files.get_token()
+    render_args = {"token": token, "objectName": object_name}
+
+    return jsonify(render_args)
+
+
 @bp.route("/help")
 @bp.route("/help/<path:doc>")
 def helpdocs(doc=None):

atst/routes/task_orders/new.py

@@ -17,9 +17,7 @@ from atst.utils.flash import formatted_flash as flash
 
 
 def render_task_orders_edit(template, portfolio_id=None, task_order_id=None, form=None):
-    (token, object_name) = current_app.csp.files.get_token()
-    render_args = {"token": token, "object_name": object_name}
-
+    render_args = {}
     if task_order_id:
         task_order = TaskOrders.get(task_order_id)
         portfolio_id = task_order.portfolio_id

js/components/upload_input.js

@@ -20,12 +20,6 @@ export default {
 
   props: {
     name: String,
-    token: {
-      type: Object,
-    },
-    objectName: {
-      type: String,
-    },
     initialData: {
       type: String,
     },
@@ -52,8 +46,7 @@ export default {
     }
   },
 
-  created: function() {
-    this.uploader = buildUploader(this.token)
+  created: async function() {
     emitEvent('field-mount', this, {
       optional: this.optional,
       name: this.name,
@@ -71,13 +64,12 @@ export default {
         return
       }
 
-      const response = await this.uploader.upload(file, this.objectName)
-
+      const uploader = await this.getUploader()
+      const response = await uploader.upload(file, this.objectName)
       if (response.ok) {
         this.attachment = e.target.value
         this.$refs.attachmentFilename.value = file.name
-        this.$refs.attachmentObjectName.value = this.objectName
-        this.$refs.attachmentInput.disabled = true
+        this.$refs.attachmentObjectName.value = response.objectName
       } else {
         this.uploadError = true
       }
@@ -111,6 +103,11 @@ export default {
       this.uploadError = false
       this.sizeError = false
     },
+    getUploader: async function() {
+      return fetch('/upload-token')
+        .then(response => response.json())
+        .then(({ token }) => buildUploader(token))
+    },
   },
 
   computed: {

js/lib/upload.js

@@ -34,7 +34,7 @@ class AzureUploader {
             if (err) {
               resolve({ ok: false })
             } else {
-              resolve({ ok: true })
+              resolve({ ok: true, objectName })
             }
           }
         )
@@ -57,10 +57,12 @@ class AwsUploader {
     form.append('file', file)
     form.set('x-amz-meta-filename', file.name)
 
-    return fetch(this.presignedPost.url, {
+    const response = await fetch(this.presignedPost.url, {
       method: 'POST',
       body: form,
     })
+
+    return { ok: response.ok, objectName }
   }
 }
 
@@ -70,7 +72,7 @@ class MockUploader {
   }
 
   async upload(file, objectName) {
-    return Promise.resolve({ ok: true })
+    return Promise.resolve({ ok: true, objectName })
   }
 }
 

templates/components/upload_input.html

@@ -11,8 +11,6 @@
   v-bind:watch='{{ watch | string | lower }}'
   name='{{ field.name }}'
   :optional='false'
-  v-bind:token='{{ token | tojson }}'
-  v-bind:object-name='"{{ object_name | string }}"'
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">