Komponenten

Komponente hochladen

Mit der Upload-Komponente können Sie Inhalte direkt von Ihrer Website hochladen. Sie benötigen lediglich unsere Komponentenbibliothek und ein generiertes JWT-Token.

<script
  type="module"
  src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>

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

Das erforderliche Token ist ein generiertes JWT (JSON Web Token) unter Verwendung des von mave bereitgestellten API key.

Je nachdem, was Sie als sub festlegen, können Sie bestimmen, was zu tun ist. Sie können dies als Umfang des Uploads sehen:

1. sub: {space id}: Fügt dem Bereich ein neues Video hinzu
2. sub: {collection id}: Fügt der Sammlung ein neues Video hinzu
3. sub: {embed id}: ersetzt das Video durch den Upload

Ihre Space-ID finden Sie in Einstellungen: Developers und die Sammlungs-ID finden Sie auf der Seite der Sammlung selbst, unter dem Titel.

Sie können zwar ein „statisches“ JWT generieren, wir empfehlen jedoch die Erstellung temporärer JWTs mit einem Ablaufdatum. So können Sie das JWT jederzeit widerrufen und Missbrauch vorbeugen. So können Sie dies umsetzen:

Während das folgende Beispiel die Verwendung in einer node.js-Umgebung demonstriert, wird JWT in verschiedenen Sprachen und Frameworks weitgehend unterstützt:

// 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
);

// return `token` to frontend

Hinweis: Wenn Sie das Hochladen ohne exp zulassen, bedeutet dies, dass diese Upload-Komponente immer gültig ist (bis Sie Ihren API-Schlüssel widerrufen). Wir empfehlen dringend die Verwendung eines geeigneten exp, um Missbrauch zu verhindern.

Sobald token zu <mave-upload token="{token}" /> hinzugefügt wurde, ist die Upload-Komponente aktiv und einsatzbereit.

Eigenschaften

Veranstaltungen

Um beispielsweise den Upload in Javascript abzufangen und ihn zu ersetzen, sobald der Client den Upload abgeschlossen hat, können Sie Folgendes tun:

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);
});

Anpassen der Benutzeroberfläche

<mave-upload> wird weiterhin mit Standardeinstellungen ausgeliefert, aber Sie können jetzt für jede Phase des Upload-Ablaufs Ihr eigenes Markup bereitstellen, indem Sie benannte Slots hinzufügen.

<mave-upload token="<token>">
  <div slot="initial" class="initial-card">
    <h2>Upload your media</h2>
    <p>Drop a file or use the button below.</p>
    <button type="button" data-mave-upload-select>Choose a file</button>
  </div>

  <div slot="uploading" class="uploading-card">
    <div class="bar">
      <div class="bar__value" style="width: 0%"></div>
    </div>
    <span data-role="progress-value">0%</span>
  </div>

  <div slot="processing" class="processing-card">Processing…</div>
  <div slot="done" class="done-card">All set!</div>
  <div slot="error" class="error-card">
    <p>Something went wrong. Try again.</p>
    <button type="button" data-mave-upload-select>Try again</button>
  </div>
</mave-upload>

• slot="initial" | "uploading" | "processing" | "done" | "error" entscheidet, welches Layout für diesen Status angezeigt wird.
• Fügen Sie data-mave-upload-select zu einem Element im ursprünglichen Slot hinzu, um die integrierte Dateiauswahl zu öffnen.
• Warten Sie, bis statechange auf den Fortschritt reagiert oder Statusänderungen zieht.

const upload = document.querySelector("mave-upload");
const progressValue = upload.querySelector('[data-role="progress-value"]');
const progressBar = upload.querySelector(".bar__value");

upload.addEventListener("statechange", ({ detail }) => {
  const { state, progress, dragging } = detail;
  progressValue.textContent = `${progress}%`;
  progressBar.style.width = `${progress}%`;
  upload.toggleAttribute("drag-highlight", dragging);
});

Jeder Status wird auch auf dem Hostelement verfügbar gemacht, sodass Sie das reine CSS-Styling steuern können:

• Hostattribute: state="initial|uploading|processing|done|error", progress="0-100", drag-over, ready.

Wenn Sie beispielsweise mave-upload hervorheben möchten, wenn jemand eine Datei darüber zieht, können Sie Folgendes tun:

mave-upload[drag-over] [slot="initial"] {
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.5);
}

Methoden

React- und Vue-Wrapper stellen dieselben Methoden über Refs bereit, sodass Sie reset() (und andere öffentliche Methoden) aufrufen können, ohne sich manuell mit dem zugrunde liegenden benutzerdefinierten Element befassen zu müssen.

Reagieren

import { useRef } from "react";
import { Upload } from "@maveio/components/react";

const uploadRef = useRef<React.ElementRef<typeof Upload>>(null);

return <Upload ref={uploadRef} token="<token>" />;

// whenever you need to trigger a new upload
uploadRef.current?.reset();

Vue 3

<template>
  <Upload ref="upload" token="<token>" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Upload } from "@maveio/components/vue";

const upload = ref<InstanceType<typeof Upload> | null>(null);

function triggerReset() {
  upload.value?.reset();
}
</script>

Vollständiges Beispiel einer benutzerdefinierten Upload-Komponente

Schauen Sie sich unsere Beispielseite auf Github an.