const url = await Koji.ui.upload.uploadFile({
file: new File([blob], 'video.webm'),
type: 'video',
videoOptions: {
hls: true,
}
});Uploads files from the frontend of your Koji app directly to your project’s CDN.
Uploads a file to your project’s CDN. Use this method to provide a custom upload experience or to upload media created or captured during the app experience. For example, recording a video or drawing on a canvas.
To upload files with the standard platform control, use {@doclink core-frontend-ui-capture#file | Capture.file }.
|
Note
|
To use this method for uploading a file collected by a file input, you must extract the blob and reconstruct the file. Browser sandboxing will not allow the native file to be transferred. |
options - UploadOptions, Request options for a [[uploadFile | file upload]].
Promise<String>, Unique URL for accessing the file on `images.koji-cdn.com` or `objects.koji-cdn.com`, depending on the type of file.
const url = await Koji.ui.upload.uploadFile({
file: new File([blob], 'video.webm'),
type: 'video',
videoOptions: {
hls: true,
}
});Source: frontend/ui/upload/index.ts#L61
Request options for a [[uploadFile | file upload]].
file - File, File to upload.
silent - Boolean (Optional), Set to true to handle progress in the app instead of showing the Koji overlay
type - 'image' | 'video' | 'audio', Media type of the file, which is used to determine whether transcoding or other processing is required.
videoOptions - VideoOptions (Optional), Options for uploaded videos.
Options for uploaded videos.
hls - Boolean (Optional), Enables HTTP Live Streaming (HLS) for delivery of longer content. When enabled, uploaded videos are transcoded for HLS and saved as an m3u8 playlist. Use this feature in conjunction with [[https://github.com/video-dev/hls.js/ | hls.js]] for controlling playback.
remux - Boolean (Optional), Remuxes video files constructed from getUserMedia MediaStreams, which ensures these files contain correct duration headers before they are delivered.
remuxPreset - RemuxPreset (Optional), Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.
watermark - Watermark (Optional), Applies a watermark to the uploaded image. Available only with HLS transcoding.
Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.
aspectRatio - '16:9' | '9:16' | '4:5' | '1:1' | 'passthrough', Desired aspect ratio.
sizePolicy - 'fill' | 'fit', How the image will be constrained within the provided size.
Applies a watermark to the uploaded image. Available only with HLS transcoding.
type - 'creatorProfileUrl', Type of the watermark. `creatorProfileUrl` watermarks the image with `koji.to/@creatorUsername`.
Options for uploaded videos.
hls - Boolean (Optional), Enables HTTP Live Streaming (HLS) for delivery of longer content. When enabled, uploaded videos are transcoded for HLS and saved as an m3u8 playlist. Use this feature in conjunction with [[https://github.com/video-dev/hls.js/ | hls.js]] for controlling playback.
remux - Boolean (Optional), Remuxes video files constructed from getUserMedia MediaStreams, which ensures these files contain correct duration headers before they are delivered.
remuxPreset - RemuxPreset (Optional), Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.
watermark - Watermark (Optional), Applies a watermark to the uploaded image. Available only with HLS transcoding.
Specifies the cropping constraints when remuxing a video. If not specified, the video will not be cropped.
aspectRatio - '16:9' | '9:16' | '4:5' | '1:1' | 'passthrough', Desired aspect ratio.
sizePolicy - 'fill' | 'fit', How the image will be constrained within the provided size.
Applies a watermark to the uploaded image. Available only with HLS transcoding.
type - 'creatorProfileUrl', Type of the watermark. `creatorProfileUrl` watermarks the image with `koji.to/@creatorUsername`.