components

Upload component

The upload component allows you to upload directly from your site. The only thing you need is our component library.

<mave-upload token="<token>"></mave-upload>

The token required is a generated JWT (JSON Web Token) using the API key provided by mave. While the following example demonstrates the usage in a node.js environment, JWT is widely supported across various languages and frameworks.

Depending on what you set as sub you can determine what to do:

1. sub: {space id}: adds a new video to the space
2. sub: {collection id}: adds a new video to the collection
3. sub: {embed id}: replaces the video with a new video

Your space id can be found in settings: developers and the collection id can be found on the page of the collection itself, underneath the title.

// server
const jwt = require("jsonwebtoken");

const token = jwt.sign(
  {
    sub: "XD9HPRtkDDmENLeVy9ripU", // space, collection or embed can be specified
    exp: 1680795697, // until when the user can upload
  },
  "SHJmNHhXNnFublZXajNCNllYUmhoTTpUVDRqZ3ZqYWJtOEtVbmNFb2h2d1RY" // API key
);

Allowing to upload without an exp means this upload component will always (until you revoke your API key) be valid. We highly recommend using an appropriate exp to prevent abuse.

Properties

Events

To catch the upload in Javascript and replace it once the client has completed the upload, you can do the following:

const upload = document.querySelector("mave-upload");
upload.addEventListener("completed", (event) => {
  const player = document.createElement("mave-player");
  player.setAttribute("embed", event.detail.embed);
  upload.parentNode.replaceChild(player, upload);
});

Methods