Upload and Retrieve the Temporary File - React
This guide demonstrates how to upload and retrieve files from VideoSDK's temporary file storage system.
uploadBase64File()
-
By using the
uploadBase64File()
function of theuseFile
hook, you can upload your file to Videosdk's Temporary storage. -
The
uploadBase64File()
function only works withbase64
. Therefore, it is necessary to convert your file intobase64
format. -
You have to pass
base64Data
,token
,fileName
as parameter inuploadBase64File()
function. -
The function will return the corresponding
fileUrl
, which you can then use to retrieve the file.
const { uploadBase64File } = useFile();
async function uploadFile() {
const base64Data = "<Your File's base64>"; // Convert your file to base64 and pass here
const token = "<VIDEOSDK_TOKEN>";
const fileName = "myImage.jpeg"; // Provide name with extension here
const url = await uploadBase64File({ base64Data, token, fileName });
console.log("fileUrl", url);
}
fetchBase64File()
-
By using the
fetchBase64File()
function of theuseFile
hook, you can retrieve your file from Videosdk's Temporary storage. -
You have to pass the
fileUrl
which is returned byuploadBase64File()
function, and thetoken
as parameters to retrieve a file. -
This function will return the image in the form of
base64
.
const { fetchBase64File } = useFile();
async function fetchFile() {
const url = "<Your FileUrl>"; // Provide fileUrl which is returned by uploadBase64File()
const token = "<VIDEOSDK_TOKEN>";
const base64 = await fetchBase64File({ url, token });
console.log("base64", base64);
}
The file stored in the system will be automatically deleted once the current room/meeting comes to an end.
Got a Question? Ask us on discord