React Native

Box.com Streaming Upload File

See more Box Examples

Demonstrates how to upload a file to box.com, streaming the file directly from the filesystem.

Note: This example requires a fix that is included in Chilkat v9.5.0.70 and above.

React Native

import { JsonObject, OAuth2, Rest, Stream } from '@chilkat/react-native'

async function chilkatExample() {
  // This requires the Chilkat API to have been previously unlocked.
  // See Global Unlock Sample for sample code.

  const rest = new Rest();

  //   Provide a previously obtained OAuth2 access token.
  const oauth2 = new OAuth2();
  oauth2.accessToken = 'BOX_ACCESS_TOKEN';
  rest.setAuthOAuth2(oauth2);

  // First, make the initial connection.
  // A single REST object, once connected, can be used for many Box REST API calls.
  // The auto-reconnect indicates that if the already-established HTTPS connection is closed,
  // then it will be automatically re-established as needed.
  const bAutoReconnect = true;

  // ----------------------------------------------------------------------
  // IMPORTANT: Note that the domain is "upload.box.com", not "api.box.com"
  // ----------------------------------------------------------------------
  try {
    await rest.connectAsync('upload.box.com', 443, true, bAutoReconnect);
  } catch {
    console.log(rest.lastErrorText);
    return;
  }

  // The request body uses the "multipart/form-data" format to transmit two "parts". 
  // The first part is called "attributes" and contains a JSON object with information about the file, including the name of the file 
  // and the ID of the parent folder. The second part contains the contents of the file. 
  // (Note that the name of the second "part" is ignored.)

  rest.addHeader('Content-Type', 'multipart/form-data');

  // Provide the content for each part of the request...

  // First the JSON attributes.  Use "0" for the root folder.
  //   {"name":"hedgehogs.jpg", "parent":{"id":"0"}}
  const jsonAttr = new JsonObject();
  jsonAttr.updateString('name', 'hedgehogs.jpg');
  jsonAttr.updateString('parent.id', '0');

  rest.partSelector = '1';
  rest.addHeader('Content-Disposition', 'form-data; name="attributes"; ');
  rest.setMultipartBodyString(jsonAttr.emit());

  // The upload will stream directly from a file.
  rest.partSelector = '2';
  rest.addHeader('Content-Disposition', 'form-data; name="file"; filename="hedgehogs.jpg"');
  // "application/octet-stream" can be safely used for any type file..
  rest.addHeader('Content-Type', 'application/octet-stream');

  // IMPORTANT: This example requires Chilkat v9.5.0.70 or later, for a fix that was made in
  // multipart/streaming uploads. 
  const fileStream = new Stream();
  fileStream.sourceFile = 'qa_data/jpg/hedgehogs.jpg';
  rest.setMultipartBodyStream(fileStream);

  // Restore the PartSelector to "0" (for safety, in case something else sends another request on this object)
  rest.partSelector = '0';

  // Send the multipart/form-data request, which uploads the file by streaming directly from the filesystem.
  let responseBody: string;
  try {
    responseBody = await rest.fullRequestMultipartAsync('POST', '/api/2.0/files/content');
  } catch {
    console.log(rest.lastErrorText);
    return;
  }

  // A 201 is received for a successful upload
  if (rest.responseStatusCode !== 201) {
    console.log('Box.com upload failed.');
    console.log('Request header:');
    console.log(rest.lastRequestHeader);
    console.log('---');
    console.log(`Response status code = ${rest.responseStatusCode}`);
    console.log('Response body:');
    console.log(responseBody);
    return;
  }

  console.log('File uploaded.');
}