React Native

Azure File Service: Upload Large File

See more Azure Cloud Storage Examples

Sample code to upload a large file to a directory in a share in the Azure File Service. A file is uploaded by first creating the file in the Azure share and then writing ranges of bytes to the file. Azure imposes a 4MB limit for each PUT to write a range. Files larger than 4MB need to be uploaded by making multiple "Put Range" calls. This example uploads a large file requiring multiple "Put Range" calls. React Native

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

async function chilkatExample() {
  // Azure File Service Example: Upload a large file.  
  // See:  https://docs.microsoft.com/en-us/rest/api/storageservices/create-share
  // also see: https://docs.microsoft.com/en-us/rest/api/storageservices/put-range

  // 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.file.core.windows.net', port, bTls, bAutoReconnect);
  } catch {
    console.log(rest.lastErrorText);
    return;
  }

  // This example will upload a larger file.
  const localFilePath = 'qa_data/zips/somethingBig.zip';
  const fac = new FileAccess();
  // Note: The FileSize method returns a signed 32-bit integer.  If the file is potentially larger than 2GB, call FileSizeStr instead to return
  // the size of the file as a string, then convert to an integer value.
  const szLocalFile = fac.fileSize(localFilePath);
  if (szLocalFile < 0) {
    console.log(fac.lastErrorText);
    return;
  }

  // Provide Azure Cloud credentials for the REST calls.
  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 = 'File';
  // 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: x-ms-date, Authorization.  These headers
  // are automatically set by Chilkat.

  // However, a few additional headers are required for the "Create File" operation:
  rest.addHeader('x-ms-type', 'file');

  // This required header specifies the final size of the file (or the maximum size it can be).
  const sbFileSize = new StringBuilder();
  sbFileSize.appendInt(szLocalFile);
  rest.addHeader('x-ms-content-length', sbFileSize.getAsString());

  // Send a PUT request to create the file (or replace the file if it already exists).
  // This will initialize the file in the Azure file storage.  To upload content, we'll need
  // to do the "Put Range" operation one or more times.

  // The following will create the file "somethingBig.zip" in the share "pip"
  let responseStr: string;
  try {
    responseStr = await rest.fullRequestNoBodyAsync('PUT', '/pip/somethingBig.zip');
  } catch {
    console.log(rest.lastErrorText);
    return;
  }

  // When successful, the Azure File Service will respond with a 201 (Created) response status code,
  // with no XML response body.  If an error response is returned, there will be an XML 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('Successfully created somethingBig.zip');

  // --------------------------------------------------------------------------------
  // Upload the file data...

  // Make sure the headers from the "Create File" operation are removed.
  rest.clearAllHeaders();

  // The x-ms-write header is required for each "Put Range" request.
  rest.addHeader('x-ms-write', 'update');

  const sbRange = new StringBuilder();
  const sbResponseBody = new StringBuilder();
  const bdFileData = new BinData();

  // Open the file.  We'll be reading and uploading in chunks..
  try {
    fac.openForRead(localFilePath);
  } catch {
    console.log(fac.lastErrorText);
    return;
  }

  let numBytesLeft = szLocalFile;
  let curIndex = 0;
  while (numBytesLeft > 0) {

    let chunkSize = numBytesLeft;
    // Azure allows for 4MB max chunks  (4 x 1024 x 1024 = 4194304)
    if (chunkSize > 4194304) {
      chunkSize = 4194304;
    }

    // The only tricky part here is to correctly add the x-ms-range header.
    // It will be formatted like this:
    // x-ms-range: bytes=0-759623
    sbRange.clear();
    sbRange.append('bytes=');
    sbRange.appendInt(curIndex);
    sbRange.append('-');
    sbRange.appendInt(curIndex + chunkSize - 1);

    // This replaces the header if it already exists..
    rest.addHeader('x-ms-range', sbRange.getAsString());

    // Read the next chunk from the local file.
    bdFileData.clear();
    fac.fileReadBd(chunkSize, bdFileData);

    try {
      await rest.fullRequestBdAsync('PUT', '/pip/somethingBig.zip?comp=range', bdFileData, sbResponseBody);
    } catch {
      // This would indicate a failure where no response was received.
      console.log(rest.lastErrorText);
      return;
    }

    // A 201 response indicates the chunk was uploaded.
    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(`Uploaded chunk from ${curIndex} to ${curIndex + chunkSize - 1}`);

    curIndex += chunkSize;
    numBytesLeft -= chunkSize;
  }

  fac.fileClose();

  console.log('success.');
}