Upload/process Audio/Video files

Understanding Chunked Uploads

Before diving into the implementation, it's important to understand how file uploads work in Editframe. Files are uploaded in chunks (8MB pieces) rather than all at once. This approach offers several benefits:

• Reliability: If an upload fails, only the current chunk needs to be retried rather than the entire file
• Progress tracking: Chunked uploads allow for accurate progress reporting
• Infrastructure compatibility: Many cloud platforms and load balancers have request size limits that chunked uploads can work around
• Memory efficiency: Processing files in chunks requires less memory on both client and server

Upload Process Overview

The upload process consists of two main steps. First, you create a file record by sending metadata about your file (filename, size, mime type) to Editframe. This returns a file ID and upload URLs. Then, you upload the actual file data in 8MB chunks, using the Content-Range header to specify which portion of the file each chunk represents. The server tracks these chunks and reassembles them into the complete file.

It is possible to upload files in smaller chunks than 8MB, but this is the size recommended by the underlying storage system.

Each chunk upload returns either a 202 status (chunk accepted, continue uploading) or 201 status (upload complete). This allows for precise progress tracking and graceful handling of network interruptions. If an upload is interrupted, you can resume from the last successfully uploaded chunk rather than starting over.

CLI

The editframe cli can be used to upload files for processing.

editframe upload-image <path-to-file>
# editframe upload-image path/to/file.jpeg

API

Uploading an image file requires a few steps. The required operations are:

import { Client, createImageFile, uploadImageFile } from "@editframe/api/node";
const EF_TOKEN = "/* Load your API TOKEN */";
const client = new Client(EF_TOKEN);

const filePath = "/* Path to file to process */";

const imageFileRecord = await createImageFileFromPath(client, filePath);

const upload = uploadImageFile(client, imageFileRecord, file.stream());
);

for await (const event of upload) {
  console.log(event);
  // Shape of event:
  // {
  //   type: "progress"
  //   progress: number; // from 0 to 1
  // }
}

// Alternatively, you may await a promise that resolves when the upload is complete.
await upload.whenUploaded();

The imageRecord.id id is used to display the image with the <ef-image>/<Image> element.