Uploads - Media Manager

Uploads

Enable the upload button

To show the upload button, add header.upload to your visual settings:

settings: {
  context: {
    type: 'myMedia',
    header: {
      type: 'default',
      upload: { show: true },
    },
  },
}

You can restrict which file types are accepted by providing bare extensions without a leading dot:

upload: { show: true, allowedUploadExtensions: ['mp4', 'mov', 'png', 'jpg', 'pdf'] }

Show upload status in the header

A status indicator for active and completed uploads can be displayed:

header: {
  type: 'default',
  upload: { show: true },
  status: { show: true },
}

Uploads continue in the background

Uploads keep running even after you close the dialog. As long as the user remains on the page, uploads proceed in the background.

What the user does	What happens to uploads
Closes the dialog	Uploads continue
Re-opens the dialog	Current upload progress is shown
Navigates within an SPA (runtime stays alive)	Uploads continue
Refreshes or leaves the page	Uploads are lost

This behavior exists because uploads belong to the runtime, not to the dialog or table visual. The runtime persists for the full page session — visuals are mounted and unmounted, but uploads remain tied to the runtime.

Warn users before page navigation

If uploads are in progress and the user attempts to refresh or navigate away, those uploads will be cancelled. You can use beforeunload to warn them:

window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
});

Credential rotation preserves uploads

When a KS expires and you call runtime.updateSettings({ ks: newKs, partnerId }), mounted visuals remount to use the new credentials — however, in-flight uploads are not interrupted.

Processing state

Once a file finishes uploading, the Kaltura backend handles processing (transcoding, thumbnail generation, etc.). During this period the entry shows a "processing" status in the table. When processing completes, the entry automatically transitions to its final state.

You can hook into the processing poll using the preGetProcessingList interceptor:

interceptors: {
  preGetProcessingList: (action) => {
    action.filter.tagsMultiLikeAnd = 'my-tag';
    return action;
  },
}

Workspace teardown

If the host application explicitly destroys the workspace, the runtime is destroyed and all in-flight uploads are cancelled. This is an edge case since most applications keep the workspace alive for the page's lifetime.