Upload Media

This documentation provides guidelines on uploading images and video to server using the TruVideo Media SDK. The SDK offers simple methods to integrate upload functionalities into your application.

Prerequisites

• Ensure you have integrated the TruVideo Core SDK into your project and completed with the authentication process

• Camera module will provide MediaItem or simply provide filepath to upload (optional)

Step 1 : Create a MediaBuilder object

JSX

const mediaBuilder = new MediaBuilder(item.filePath);

Step 2 : Set tags or metaData mediaBuilder object if required

JavaScript

// Set Tags
mediaBuilder.setTag("key", "value");
mediaBuilder.setTag("color", "red");
mediaBuilder.setTag("orderNumber", "123");

// Set Metadata
mediaBuilder.setMetaData("key", "value");
mediaBuilder.setMetaData("key1", "1");
mediaBuilder.setMetaData("key2", "[4,5,6]");

Step 3 : Build the request with mediaBuilder

JavaScript

var request = await mediaBuilder.build();

Step 4 : Create object for getting callbacks from the SDK

JSX

const uploadCallbacks = {
    onProgress: (event: UploadProgressEvent) => {
        console.log(`ID: ${event.id}, Progress: ${event.progress}%`);
    },
    onComplete: (event: UploadCompleteEventData) => {
        console.log(`ID: ${event.id}, Type: ${event.fileType}`);
    },
    onError: (event: UploadErrorEvent) => {
        console.log(`ID: ${event.id}, Error: ${event.error}`);
    },
};

Step 5 : Finally call the upload to push data to server

JavaScript

var res : UploadCompleteEventData = await request.upload(uploadCallbacks);

Result Returned

interface UploadCompleteEventData {
  id: string;
  createdDate?: string;
  remoteId?: string;
  uploadedFileURL?: string;
  metaData?: string; 
  tags?: string;
  transcriptionURL?: string;
  transcriptionLength?: number;
  fileType?: string;
}

Finalize :

After completing this steps the function should look like

// import the required classes
import { 
    MediaBuilder,
    UploadProgressEvent,
    UploadCompleteEventData,
    UploadErrorEvent 
} from '@trunpm/truvideo-react-turbo-media-sdk';
// this demonstration is using MediaItem which is given by Camera SDK
const uploadMediaItems = async (mediaItems: CameraResult[]) => {
    for (const item of mediaItems) {
        try {
            // use media item or directly provide file path 
            const mediaBuilder = new MediaBuilder(item.filePath);

            // Set Tags
            mediaBuilder.setTag("key", "value");
            mediaBuilder.setTag("color", "red");
            mediaBuilder.setTag("orderNumber", "123");

            // Set Metadata
            mediaBuilder.setMetaData("key", "value");
            mediaBuilder.setMetaData("key1", "1");
            mediaBuilder.setMetaData("key2", "[4,5,6]");

            // Build Request
            var request = await mediaBuilder.build();

            // Handle Callbacks
            const uploadCallbacks = {
                onProgress: (event: UploadProgressEvent) => {
                    console.log(`ID: ${event.id}, Progress: ${event.progress}%`);
                },
                onComplete: (event: UploadCompleteEventData) => {
                    console.log(`ID: ${event.id}, Type: ${event.fileType}`);
                },
                onError: (event: UploadErrorEvent) => {
                    console.log(`ID: ${event.id}, Error: ${event.error}`);
                },
            };

            var res : UploadCompleteEventData = await request.upload(uploadCallbacks);
            console.log('Successful: set upload');
            console.log('Upload successful:', res);
        } catch (error) {
            console.error('Upload error:', error);
        }
    }
};