Fix task order uploads.

Task order uploads and downloads were broken. Uploads were broken
because file content was eing read in as plaintext every time, resulting
in encoding issues. I updated the bundle to use the newer Azure JS SDK.
We can now use a method for uploading browser files directly without
having to read their content. This required a few small internal changes
to the upload component, since the response structure is different.

I also removed the `downloadUrl` method from the JS uploader since it
was not being used.

Downloads were broken because the method that generates the download
link was not updated to use the BlobSasPermissions class from the
updated Azure Python SDK.

js/components/upload_input.js

@@ -2,6 +2,13 @@ import { buildUploader } from '../lib/upload'
 import { emitFieldChange } from '../lib/emitters'
 import inputValidations from '../lib/input_validations'
 
+function uploadResponseOkay(response) {
+  // check BlobUploadCommonResponse: https://docs.microsoft.com/en-us/javascript/api/@azure/storage-blob/blobuploadcommonresponse?view=azure-node-latest
+  // The upload operation is a PUT that should return a 201
+  // https://docs.microsoft.com/en-us/rest/api/storageservices/put-blob#status-code
+  return response._response.status === 201
+}
+
 export default {
   name: 'uploadinput',
 
@@ -21,7 +28,7 @@ export default {
       type: String,
     },
     sizeLimit: {
-      type: String,
+      type: Number,
     },
   },
 
@@ -34,7 +41,7 @@ export default {
       sizeError: false,
       filenameError: false,
       downloadLink: '',
-      fileSizeLimit: parseInt(this.sizeLimit),
+      fileSizeLimit: this.sizeLimit,
     }
   },
 
@@ -63,7 +70,7 @@ export default {
 
       const uploader = await this.getUploader()
       const response = await uploader.upload(file)
-      if (response.ok) {
+      if (uploadResponseOkay(response)) {
         this.attachment = e.target.value
         this.$refs.attachmentFilename.value = file.name
         this.$refs.attachmentObjectName.value = response.objectName
@@ -73,7 +80,7 @@ export default {
 
         this.downloadLink = await this.getDownloadLink(
           file.name,
-          response.objectName
+          uploader.objectName
         )
       } else {
         emitFieldChange(this)

js/lib/upload.js

@@ -1,4 +1,4 @@
-import Azure from 'azure-storage'
+import { BlobServiceClient } from '@azure/storage-blob'
 import 'whatwg-fetch'
 
 class AzureUploader {
@@ -10,46 +10,22 @@ class AzureUploader {
   }
 
   async upload(file) {
-    const blobService = Azure.createBlobServiceWithSas(
-      `https://${this.accountName}.blob.core.windows.net`,
-      this.sasToken
+    const blobServiceClient = new BlobServiceClient(
+      `https://${this.accountName}.blob.core.windows.net?${this.sasToken}`
     )
-    const fileReader = new FileReader()
+    const containerClient = blobServiceClient.getContainerClient(
+      this.containerName
+    )
+    const blobClient = containerClient.getBlockBlobClient(this.objectName)
     const options = {
-      contentSettings: {
-        contentType: 'application/pdf',
+      blobHTTPHeaders: {
+        blobContentType: 'application/pdf',
       },
       metadata: {
         filename: file.name,
       },
     }
-
-    return new Promise((resolve, reject) => {
-      fileReader.addEventListener('load', f => {
-        blobService.createBlockBlobFromText(
-          this.containerName,
-          `${this.objectName}`,
-          f.target.result,
-          options,
-          (err, result) => {
-            if (err) {
-              resolve({ ok: false })
-            } else {
-              resolve({ ok: true, objectName: this.objectName })
-            }
-          }
-        )
-      })
-      fileReader.readAsText(file)
-    })
-  }
-
-  downloadUrl(objectName) {
-    const blobService = Azure.createBlobServiceWithSas(
-      `https://${this.accountName}.blob.core.windows.net`,
-      this.sasToken
-    )
-    return blobService.getUrl(this.containerName, objectName, this.sasToken)
+    return blobClient.uploadBrowserData(file, options)
   }
 }
 
@@ -60,7 +36,8 @@ export class MockUploader {
   }
 
   async upload(file, objectName) {
-    return Promise.resolve({ ok: true, objectName: this.objectName })
+    // mock BlobUploadCommonResponse structure: https://docs.microsoft.com/en-us/javascript/api/@azure/storage-blob/blobuploadcommonresponse?view=azure-node-latest
+    return Promise.resolve({ _response: { status: 201 } })
   }
 }