React Native Requires Chilkat v11.0.0+

Frame.io - Upload an Asset

See more Frame.io Examples

Upload an asset to Frame.io React Native

import { BinData, FileAccess, Http, HttpResponse, JsonObject, StringBuilder } from '@chilkat/react-native'

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

  const http = new Http();

  // Implements the following CURL command:

  // curl --request POST \
  //   --url https://api.frame.io/v2/assets/<ASSET_ID>/children \
  //   --header 'authorization: Bearer <FRAME_IO_DEV_TOKEN>' \
  //   --header 'content-type: application/json' \
  //   --data '{"filesize":1570024 ,"filetype":"video/mp4","name":"rotating_earth","type":"file"}'

  // Use the following online tool to generate HTTP code from a CURL command
  // Convert a cURL Command to HTTP Source Code

  // Use this online tool to generate code from sample JSON:
  // Generate Code to Create JSON

  // The following JSON is sent in the request body.

  // {
  //   "filesize": 1570024,
  //   "filetype": "video/mp4",
  //   "name": "rotating_earth",
  //   "type": "file"
  // }

  const localFilePath = 'qa_data/mp4/rotating_earth.mp4';
  const fac = new FileAccess();
  const fileSize = fac.fileSize(localFilePath);

  const json = new JsonObject();
  json.updateInt('filesize', fileSize);
  json.updateString('filetype', 'video/mp4');
  json.updateString('name', 'rotating_earth7');
  json.updateString('type', 'file');

  http.setRequestHeader('content-type', 'application/json');
  // Adds the "Authorization: Bearer <FRAME_IO_DEV_TOKEN>" header.
  http.authToken = '<FRAME_IO_DEV_TOKEN>';

  // Uploading to asset ID: 039845e8-bffe-4d6b-88d3-c780bae06342
  const resp = new HttpResponse();
  try {
    await http.httpJsonAsync('POST', 'https://api.frame.io/v2/assets/039845e8-bffe-4d6b-88d3-c780bae06342/children', json, 'application/json', resp);
  } catch {
    console.log(http.lastErrorText);
    return;
  }

  const sbResponseBody = new StringBuilder();
  resp.getBodySb(sbResponseBody);
  const jResp = new JsonObject();
  jResp.loadSb(sbResponseBody);
  jResp.emitCompact = false;

  console.log('Response Body:');
  console.log(jResp.emit());

  const respStatusCode = resp.statusCode;
  console.log(`Response Status Code = ${respStatusCode}`);
  if (respStatusCode >= 400) {
    console.log('Response Header:');
    console.log(resp.header);
    console.log('Failed.');
    return;
  }

  // Upload in chunks to the pre-signed S3 upload URLs.
  // There are ways to do this in parallel, but for simplicity we'll show how to upload
  // one chunk after another.
  const numChunks = jResp.sizeOfArray('upload_urls');
  const sizePerChunk = Math.trunc((fileSize + numChunks - 1) / numChunks);

  console.log(`numChunks = ${numChunks}`);
  console.log(`sizePerChunk = ${sizePerChunk}`);

  try {
    fac.openForRead(localFilePath);
  } catch {
    console.log(fac.lastErrorText);
    return;
  }

  const bd = new BinData();
  const httpForUpload = new Http();

  httpForUpload.setRequestHeader('x-amz-acl', 'private');

  let i = 0;
  while (i < numChunks) {
    bd.clear();
    fac.readBlockBd(i, sizePerChunk, bd);

    jResp.i = i;
    const uploadUrl = jResp.stringOf('upload_urls[i]');

    // Send the chunk in a PUT:

    console.log(`PUT chunk ${i + 1}`);
    console.log(`URL: ${uploadUrl}`);

    // PUT https://frameio-uploads-production.s3/etc/etc
    // Content-Type: video/mp4
    // x-amz-acl: private
    try {
      await httpForUpload.httpBdAsync('PUT', uploadUrl, bd, 'video/mp4', resp);
    } catch {
      console.log(httpForUpload.lastErrorText);
      return;
    }

    console.log(`response status: ${resp.statusCode}`);

    i++;
  }

  fac.fileClose();

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