Upload and Retrieve the Temporary File - React Native

This guide demonstrates how to upload and retrieve files from VideoSDK's temporary file storage system.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• uploadBase64File()
• fetchBase64File()

uploadBase64File()

• By using the uploadBase64File() function of the useFile hook, you can upload your file to Videosdk's Temporary storage.

• The uploadBase64File() function only works with base64. Therefore, it is necessary to convert your file into base64 format.

• You have to pass base64Data,token,fileName as parameter in uploadBase64File() function.

• The function will return the corresponding fileUrl, which you can then use to retrieve the file.

import { useFile } from "@videosdk.live/react-native-sdk";

function FileUploader() {
  const { uploadBase64File } = useFile();

  async function uploadFile() {
    const base64Data = "<Your File's base64>"; // Convert your file to base64 and pass here
    const token = "<Your Token>";
    const fileName = "myImage.jpeg"; // Provide name with extension here
    let url;
    try {
      url = await uploadBase64File({ base64Data, token, fileName });
    } catch (err) {
      console.error("uploadBase64File failed:", err);
    }
    console.log("fileUrl", url);
  }

  // Call uploadFile() from your UI, for example a button's onPress
  return null;
}

fetchBase64File()

• By using the fetchBase64File() function of the useFile hook, you can retrieve your file from Videosdk's Temporary storage.

• You have to pass the fileUrl which is returned by uploadBase64File() function, and the token as parameters to retrieve a file.

• This method will return the image in the form of base64.

import { useFile } from "@videosdk.live/react-native-sdk";

function FileFetcher() {
  const { fetchBase64File } = useFile();

  async function fetchFile() {
    const url = "<Your FileUrl>"; // Provide fileUrl which is returned by uploadBase64File()
    const token = "<Your Token>";
    let base64;
    try {
      base64 = await fetchBase64File({ url, token });
    } catch (err) {
      console.error("fetchBase64File failed:", err);
    }
    console.log("base64", base64);
  }

  // Call fetchFile() from your UI, for example a button's onPress
  return null;
}

note

The file stored in the system will be automatically deleted once the current room comes to an end.

Errors

Both methods reject with:

• ERROR_ACTION_PERFORMED_BEFORE_ROOM_JOINED — called before the room is joined.
• ERROR_ROOM_RECONNECTING — the room is reconnecting.
• ERROR_INVALID_PARAMETER — an argument is missing, empty or not a string.
• ERROR_FILE_UPLOAD_FAILED — uploadBase64File() could not upload the file.
• ERROR_FILE_FETCH_FAILED — fetchBase64File() could not fetch the file.

Except for ERROR_INVALID_PARAMETER, these errors are also reported on onError of the useRoom hook.