Start typing to search...
Developer DocsAPI Reference
Back to withkoji.com

Enable file uploads

If users need to upload files through your app, you can use several built-in controls, depending on the expected type of the uploaded file.

The @withkoji/core package provides two Frontend classes for file uploads: UI / Capture and UI / Upload.

This topic helps you choose the right controls for specific file types and scenarios.

Only one media type

Only audio files

If your upload control accepts only audio files, use Koji.ui.capture.audio.

With this method,

  • The popup menu includes the audio-specific selections: Capture audio and Browse Sound Packs.

  • The file selector automatically filters for .mp3, .wav, and other standard audio file formats.

Example

The following code hides the menu option to select from asset packs. The user will only be able to upload a file or copy from a URL.

const capturedAudio = await Koji.ui.capture.audio({ hideExtensions : true });

Learn more: .audio, CaptureAudioOptions

Only images

If your upload control accepts only images, use Koji.ui.capture.image.

With this method,

  • The popup menu includes the image-specific selections: Take photo and Browse Image Packs.

  • The file selector automatically filters for .png, .jpg, and other standard image file formats.

  • You can apply image-specific processing (such as blurring, contrast, and cropping) to the image.

Note
 Processing can be applied only to uploaded images or images from a URL, not to images from asset packs.
Example

The following code sets the brightness of the captured image to -20 and blurs it by 5%.

const capturedImage = await Koji.ui.capture.image({ brightness : '-20', blur : '5p' });

Learn more: .image, CaptureImageOptions

Only videos

If your upload control accepts only videos, use Koji.ui.capture.video.

With this method,

  • The popup menu includes the video-specific selections: Record a video.

  • The file selector automatically filters for .mp4, .wmv, and other standard video file formats.

  • You can apply video-specific processing (such as watermarking) to the video.

  • You can specify whether the video is available for streaming using the the HTTP Live Streaming (HLS) protocol.

Note
 Processing can be applied only to uploaded videos or videos from a URL, not to videos from asset packs.
Example

The following code sets hls to true to encode the video for streaming.

const capturedVideo = await Koji.ui.capture.video({ hls : true });

Learn more: .video, CaptureVideoOptions

Two or more media types

If your upload control accepts two or more types of media files (audio, image, video), use Koji.ui.capture.media.

Example

The following code accepts either an image or a video for use in a component that accepts both formats (such as the Koji profile background). If the file is an image, the contrast is set to 50. If the file is a video, it is encoded for streaming.

const capturedMedia = await Koji.ui.capture.media({
  acceptOnly : [ 'image', 'video' ],
  imageOptions : { contrast : '50' },
  videoOptions : { hls : true }
});

Learn more: .media, CaptureImageOptions, CaptureVideoOptions

Any file as is

If your upload control accepts any file that is intended to be downloaded as is (not rendered), use Koji.ui.capture.file.

These files can be PDFs, zip files, or high-resolution images that were paid for.

Example

The following code accepts any file.

const capturedFile = await Koji.ui.capture.file();

Learn more: .file

Generated content

If your app generates new content (audio, image, or video) that needs to be saved, use Koji.ui.upload.uploadFile.

Examples of generated content are videos recorded by the app or images drawn on the app’s canvas.

Example

The following code creates a new File object for an audio file that was recorded within the app.

const generatedVideo = Koji.ui.upload.uploadFile({
  file: new File([blob], 'audio.mp3'),
  type: 'audio'
});

Learn more: .uploadFile, UploadOptions

Related resources