Browser func - uploadBrowserDatatoBlockBlob: TypeError: blockBlobURL.upload is not a function

[azure]

Browser func - uploadBrowserDatatoBlockBlob: TypeError: blockBlobURL.upload is not a function

[XiaoningLiu]

Thanks for sharing : )

We are working on further reducing the bundle size in next release, should largely reducing the frontend bundled js size then.

[XiaoningLiu]

@bearcanrun

The browser functions are commented out because we cannot run both Node.js and browser functions within one file, so commented out them in Node.js runtime.

I think the 3rd parameter is wrong, you need put a BlockBlobURL instead of BlobURL into uploadBrowserDatatoBlockBlob().

BlockBlobURL, PageBlobURL and AppendBlobURL extend from BlobURL. You need a child object instead of parent : )

  const blockBlobURL = azblob.BlockBlobURL.fromBlobURL(blobURL);

[bearcanrun]

Thank you! I somehow overlooked the BlockBlobURL vs BlobURL. My final working code is:

import * as Azure from '@azure/storage-blob'

async uploadImage (sasURL, containerName, imgBlob) {
    const pipeline = Azure.StorageURL.newPipeline(new Azure.AnonymousCredential())
    const serviceURL = new Azure.ServiceURL(sasURL, pipeline)
    const containerURL = Azure.ContainerURL.fromServiceURL(serviceURL, containerName)
    const blockBlobURL = Azure.BlockBlobURL.fromContainerURL(containerURL, fileName)
    const uploadImage = await Azure.uploadBrowserDataToBlockBlob(Azure.Aborter.None, imgBlob, blockBlobURL)
    return uploadImage
  }

[XiaoningLiu]

@bearcanrun Really glad to know it works! Just an investigation, are you using this SDK with which platform or tools? Such as, Angular, Webpack, browserify or rollup?

[bearcanrun]

@XiaoningLiu Yes, I'm using it with nodejs backend GraphQL server + frontend React. Main tools are Webpack4, Nodejs, Express, Apollo GraphQL, and React.