How to upload PDF files to Azure Blob Storage with Vue and Python Flask

cd flask-vuejs-template-master
python -m pip install pipenv
python -m pipenv install --dev
python -m pipenv install flask-restx azure-storage-blob
python -m pipenv shell

yarn install --dev
yarn upgrade
yarn build

<template>
  <div class="container">
    <div>
      <label>File
        <input type="file" ref="fileInput" accept="image/*,.pdf" @change="handleFileUpload($event)"/>
      </label>
      <br/>
      <br/>
      <button v-on:click="submitFile()">Submit</button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import axios from 'axios'

export default {
  data () {
    return {
      file: null
    }
  },
  methods: {
    /**
     * Uploads file to server.
     * @param {Event} event The form change event with the file to be uploaded.
     */
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    /**
     * Uploads the file to the server.
     */
    submitFile() {
      if (this.file == null) {
        return;
      }

      console.log("Submitting file for upload...");
      let formData = new FormData();
      formData.append('file', this.file);

      axios.post(`api/upload`, formData, {
        headers: { 
          'Content-Type': 'multipart/form-data' 
        },
        timeout: 5000
      })
        .then(response => {
          console.log("File upload successful!");
          this.$refs.fileInput.value = "";
          console.log(response);
        }).catch(error => {
          console.log("File upload failed.");
          console.error(error);
        });
    }
  }
}
</script>

"""
REST API Resource Routing
http://flask-restplus.readthedocs.io
"""


import io
from datetime import datetime
from flask import request, jsonify, send_file
from flask_restx import Resource
from azure.storage.blob import BlobServiceClient, ContainerClient
from .security import require_auth
from . import api_rest


AZURE_CONNECTION_STRING = "DefaultEndpointsProtocol=https;" + \
    "AccountName=vueflaskstorageaccount;" + \
    "AccountKey=m6Vegjl44F28CnuujeYI27kZblp7pQBRftsuDXGLUN0PkfuRxAkY3MqJogwu2FShclWFWHfD3n4hJYeQEmk3GQ==;" + \
    "EndpointSuffix=core.windows.net"


@api_rest.route('/upload')
class UploadFile(Resource):
    """ Uploads file to Azure Blob Storage """

    def post(self):
        f = request.files["file"]

        try:
            service_client = BlobServiceClient.from_connection_string(AZURE_CONNECTION_STRING)
            container_client = service_client.get_container_client("pdf-container")
            blob_client = container_client.get_blob_client(f.filename)
            blob_client.upload_blob(f)

            return jsonify(success=True)
        except:
            return jsonify(success=False)

@api_rest.route('/all-files')
class GetAllFiles(Resource):
    """ Gets all filenames in the Azure Blob Storage container """

    def get(self):
        container = ContainerClient.from_connection_string(
            conn_str=AZURE_CONNECTION_STRING, 
            container_name="pdf-container"
        )

        all_filenames = []
        blob_list = container.list_blobs()
        for blob in blob_list:
            all_filenames.append(blob.name)

        return {
            "filenames": all_filenames
        }


@api_rest.route('/download/<string:filename>')
class DownloadFile(Resource):
    """ Downloads a file from Azure Blob Storage by filename """


    def post(self, filename):
        service_client = BlobServiceClient.from_connection_string(AZURE_CONNECTION_STRING)
        container_client = service_client.get_container_client("pdf-container")
        blob_client = container_client.get_blob_client(filename)

        bytes_stream = io.BytesIO()

        blob_data = blob_client.download_blob()
        blob_data.readinto(bytes_stream)

        bytes_stream.seek(0)

        return send_file(bytes_stream,
                          attachment_filename=blob_data.name,
                          mimetype="application/pdf",
                          as_attachment=True)

<template>
  <div class="all-files-container">
    <ul>
      <li v-for="filename in files" :key="filename.id">
        <a href="#" @click.prevent="downloadFile(filename)">{{ filename }}</a>
      </li>
    </ul>
  </div>
</template>


<script>
/* eslint-disable */
import axios from 'axios'

export default {
  name: 'all-files',
  data () {
    return {
      files: [],
    }
  },
  mounted () {
    this.getAllFiles();
  },
  methods: {
    getAllFiles () {
      axios.get(`api/all-files`)
        .then(response => {
          this.files = response.data.filenames;
        }).catch(error => {
          console.error(error);
        });
    },
    downloadFile(filename) {
      axios({
        url: `api/download/${filename}`,
        method: "POST",
        responseType: "blob",
      }).then(response => {
          const blob = new Blob([response.data], { 
            type: 'application/pdf'
          });
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.target = "_blank";
          link.href = url;
          link.download = filename;
          link.click();
          window.URL.revokeObjectURL(url);
        }).catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

<style lang="scss">
</style>