CODEWITHSUNDEEP
reactjsazureazure-storageazure-blob-storage
Frank Sposaro
Frank Sposaro

Reputation: 8531

SharedKeyCredential is not a constructor. Azure-storage react app

I'm trying to use the following code to upload a blockblob to Azure-Storage in a react app. However, I'm getting the following error.

TypeError: SharedKeyCredential is not a constructor

Any ideas?

@azure/[email protected]

import React from 'react';

const {
  Aborter,
  BlobURL,
  BlockBlobURL,
  ContainerURL,
  ServiceURL,
  StorageURL,
  SharedKeyCredential,
  AnonymousCredential,
  TokenCredential
} = require("@azure/storage-blob"); // Change to "@azure/storage-blob" in your package

function App() {
  return (
    <div className="App">

      <button onClick={onClicked()} />

    </div>
  );

  async function onClicked() {

    // Enter your storage account name and shared key
    const account = "REMOVED_MY_ACCOUNT";
    const accountKey = "REMOVED_ACCOUNT_KEY";

    // Use SharedKeyCredential with storage account and account key
    const sharedKeyCredential = new SharedKeyCredential(account, accountKey);

    // Use TokenCredential with OAuth token
    const tokenCredential = new TokenCredential("token");
    tokenCredential.token = "renewedToken"; // Renew the token by updating token field of token credential

    // Use AnonymousCredential when url already includes a SAS signature
    const anonymousCredential = new AnonymousCredential();

    // Use sharedKeyCredential, tokenCredential or anonymousCredential to create a pipeline
    const pipeline = StorageURL.newPipeline(sharedKeyCredential);

    // List containers
    const serviceURL = new ServiceURL(
      // When using AnonymousCredential, following url should include a valid SAS or support public access
      `https://${account}.blob.core.windows.net`,
      pipeline
    );

    // Create a container
    const containerName = `newcontainer${new Date().getTime()}`;
    const containerURL = ContainerURL.fromServiceURL(serviceURL, containerName);

    const createContainerResponse = await containerURL.create(Aborter.none);
    console.log(
      `Create container ${containerName} successfully`,
      createContainerResponse.requestId
    );

    // Create a blob
    const content = "hello";
    const blobName = "newblob" + new Date().getTime();
    const blobURL = BlobURL.fromContainerURL(containerURL, blobName);
    const blockBlobURL = BlockBlobURL.fromBlobURL(blobURL);
    const uploadBlobResponse = await blockBlobURL.upload(
      Aborter.none,
      content,
      content.length
    );
    console.log(
      `Upload block blob ${blobName} successfully`,
      uploadBlobResponse.requestId
    );

  }
}

export default App;

Edit: I was calling the wrong API. You can create a new Visual Studio project that uses the .Net/React template. This was the code example I was looking for.

Upvotes: 2

Views: 4975

Answers (1)

Xiaoning Liu - MSFT
Xiaoning Liu - MSFT

Reputation: 329

I'm the developer of storage JS SDK. SharedKeyCredential is only available in Node.js runtime. For browsers, for security concerns, please use Shared Access Signature (SAS) or OAuth Token for your authentications.

Upvotes: 10

Related Questions