0
votes

I'm clearly missing something here so forgive me - all examples seem to involve express and I don't have express in my setup. I am using Vue.js.

Ultimately, want my client-side Vue app to be able to upload any file to azure blob storage.

I have the file(File api) from my Vue form. However, it does not provide a path (I believe this is for security reasons). The Azure docs have this snippet example:

const uploadLocalFile = async (containerName, filePath) => {
    return new Promise((resolve, reject) => {
        const fullPath = path.resolve(filePath);
        const blobName = path.basename(filePath);
        blobService.createBlockBlobFromLocalFile(containerName, blobName, fullPath, err => {
            if (err) {
                reject(err);
            } else {
                resolve({ message: `Local file "${filePath}" is uploaded` });
            }
        });
    });
};

Is this not the api I should be using? What should I be doing to upload any type of blob to blob storage?

  • UPDATE

Following @Adam Smith-MSFT comments below I have tried the vue-azure-storage-upload but can't seem to get the files up to azure.

startUpload () {
            if (!this.files || !this.baseUrl) {
                window.alert('Provide proper data first!')
            } else {
                this.files.forEach((file:File) => {
                    this.$azureUpload({
                        baseUrl: this.baseUrl + file.name,
                        sasToken: this.sasToken,
                        file: file,
                        progress: this.onProgress,
                        complete: this.onComplete,
                        error: this.onError
                        // blockSize
                    })
                })  
            }   
        },

According to the console the response.data is undefined and when the onError method fires, that too gives me an undefined event.

1
Are you using their SDK?Salim Djerbouh
yes, the azure-storage SDKJTInfinite

1 Answers

1
votes

I'd highly recommend checking the following tutorial: https://www.npmjs.com/package/vue-azure-blob-upload The author used a specific npm package to upload blobs(you can using file service) to upload objects:

npm i --save vue-azure-blob-upload

I'd also recommend checking the Storage JS documentation: https://github.com/Azure/azure-storage-js/tree/master/file , it provides specific examples related to Azure File Storage as well.