React Native

Upload File in Blocks and Commit the Block List

See more Azure Cloud Storage Examples

Demonstrates how to upload a file in blocks and then commit the block list. For files larger than 64MB, this is the way to upload to Azure Storage. Azure limits the size of each block to a maximum of 4MB. React Native

import { AuthAzureStorage, BinData, FileAccess, Rest, StringBuilder, Xml } from '@chilkat/react-native'

async function chilkatExample() {
  // Azure Blob Service Example: Upload a file in blocks, and then commit the block list.
  // See also: https://msdn.microsoft.com/en-us/library/azure/dd135726.aspx

  // This example requires the Chilkat API to have been previously unlocked.
  // See Global Unlock Sample for sample code.

  const rest = new Rest();

  // Connect to the Azure Storage Blob Service
  const bTls = true;
  const port = 443;
  const bAutoReconnect = true;
  // In this example, the storage account name is "chilkat".
  try {
    await rest.connectAsync('chilkat.blob.core.windows.net', port, bTls, bAutoReconnect);
  } catch {
    console.log(rest.lastErrorText);
    return;
  }

  // Provide Azure Cloud credentials for the REST call.
  const azAuth = new AuthAzureStorage();
  azAuth.accessKey = 'AZURE_ACCESS_KEY';
  // The account name used here should match the 1st part of the domain passed in the call to Connect (above).
  azAuth.account = 'chilkat';
  azAuth.scheme = 'SharedKey';
  azAuth.service = 'Blob';
  // This causes the "x-ms-version: 2021-08-06" header to be automatically added.
  azAuth.xMsVersion = '2021-08-06';
  rest.setAuthAzureStorage(azAuth);

  // Note: The application does not need to explicitly set the following
  // headers: Content-Length, x-ms-date, Authorization.  These headers
  // are automatically set by Chilkat.

  // As the blocks are uploaded, we'll keep an XML block list for the subsequent commit..
  const xml = new Xml();
  xml.tag = 'BlockList';

  // Any type of file can be uploaded in this way.  It can a text file, binary file, anything...
  // This example will upload an XML file that is approximately 275K in size.  It can be downloaded
  // at http://www.chilkatsoft.com/hamlet.xml
  const fac = new FileAccess();
  fac.openForRead('qa_data/xml/hamlet.xml');
  // Assuming success for the example..

  // We'll upload in 16K blocks (normally a program would upload in larger block sizes than this,
  // but this is just an example...)
  const blockSize = 16384;

  // How many 16K blocks?  (Including 1 for the last partial block)
  const numBlocks = fac.getNumBlocks(blockSize);

  const sbResponseBody = new StringBuilder();
  const uriPath = new StringBuilder();
  let blockId = '';
  const dataBlock = new BinData();
  let i = 0;
  while (i < numBlocks) {

    dataBlock.clear();
    try {
      fac.readBlockBd(i, blockSize, dataBlock);
    } catch {
      console.log(fac.lastErrorText);
      return;
    }

    // Generate a base64 block ID.  
    // (Chilkat provides a helper method named GenBlockId to make this easy)
    // A pre-base64 encoded block ID length of 4 is sufficient in this case because
    // this file certainly won't have more than 99,999 blocks..
    blockId = fac.genBlockId(i, 4, 'base64');

    // Add this blockId to the list of blocks to be committed.
    xml.newChild2('Latest', blockId);

    // Build the URI path
    uriPath.clear();
    uriPath.append('/mycontainer/hamlet.xml?comp=block&blockId=');
    uriPath.append(blockId);

    // Upload this block..
    sbResponseBody.clear();
    try {
      await rest.fullRequestBdAsync('PUT', uriPath.getAsString(), dataBlock, sbResponseBody);
    } catch {
      console.log(rest.lastErrorText);
      return;
    }

    // Verify that we received a 201 status code.
    if (rest.responseStatusCode !== 201) {
      // Examine the request/response to see what happened.
      console.log(`response status code = ${rest.responseStatusCode}`);
      console.log(`response status text = ${rest.responseStatusText}`);
      console.log(`response header: ${rest.responseHeader}`);
      console.log(`response body (if any): ${sbResponseBody.getAsString()}`);
      console.log('---');
      console.log(`LastRequestStartLine: ${rest.lastRequestStartLine}`);
      console.log(`LastRequestHeader: ${rest.lastRequestHeader}`);
      return;
    }

    i++;
  }

  fac.fileClose();

  // Now commit the blocks.
  // Let's have a look at the XML that will commit the blocks:
  const xmlStr = xml.getXml();
  console.log(xmlStr);

  // The XML will look like this:

  // <?xml version="1.0" encoding="utf-8" ?>
  // <BlockList>
  //     <Latest>MDAwMA==</Latest>
  //     <Latest>MDAwMQ==</Latest>
  //     <Latest>MDAwMg==</Latest>
  //     <Latest>MDAwMw==</Latest>
  //     <Latest>MDAwNA==</Latest>
  //     <Latest>MDAwNQ==</Latest>
  //     <Latest>MDAwNg==</Latest>
  //     <Latest>MDAwNw==</Latest>
  //     <Latest>MDAwOA==</Latest>
  //     <Latest>MDAwOQ==</Latest>
  //     <Latest>MDAxMA==</Latest>
  //     <Latest>MDAxMQ==</Latest>
  //     <Latest>MDAxMg==</Latest>
  //     <Latest>MDAxMw==</Latest>
  //     <Latest>MDAxNA==</Latest>
  //     <Latest>MDAxNQ==</Latest>
  //     <Latest>MDAxNg==</Latest>
  //     <Latest>MDAxNw==</Latest>
  // </BlockList>

  // Send the PUT Block List...
  let responseStr: string;
  try {
    responseStr = await rest.fullRequestStringAsync('PUT', '/mycontainer/hamlet.xml?comp=blocklist', xmlStr);
  } catch {
    console.log(rest.lastErrorText);
    return;
  }

  // When successful, the Azure Storage service will respond with a 201 response status code,
  // with no response body.

  if (rest.responseStatusCode !== 201) {
    // Examine the request/response to see what happened.
    console.log(`response status code = ${rest.responseStatusCode}`);
    console.log(`response status text = ${rest.responseStatusText}`);
    console.log(`response header: ${rest.responseHeader}`);
    console.log(`response body (if any): ${responseStr}`);
    console.log('---');
    console.log(`LastRequestStartLine: ${rest.lastRequestStartLine}`);
    console.log(`LastRequestHeader: ${rest.lastRequestHeader}`);
    return;
  }

  console.log('Success.');
}