Multipart-Formular

Ursprünglich haben wir diesen Ansatz entwickelt, damit JavaScript im Browser nicht aktiviert sein muss. Inzwischen kann davon ausgegangen werden, dass JavaScript im Browser aktiviert ist. Daher empfehlen wir Uppy als bevorzugte Browser-Integration.

Um grundlegende Konzepte zu veranschaulichen, schnell einen Prototyp zu erstellen oder tatsächlich eine Ausweichlösung für Browser anzubieten, in denen JavaScript deaktiviert oder abgestürzt ist, können Sie Transloadit dennoch allein mit einem <form> im Multipart-Format integrieren.

Ein natives HTML-Formular kann keine benutzerdefinierten HTTP-Header setzen, daher sendet diese Integration Transloadit-Client nicht. Ein verstecktes Feld mit diesem Namen setzt den Header nicht. Verwenden Sie Uppy, wenn Sie eine automatische Identifizierung der SDK- und Plugin-Version benötigen.

Installation

Sie müssen nichts installieren 👌

Verwendung

Setzen Sie das Attribut action des Formulars auf "https://api2.transloadit.com/assemblies". Die Dateien werden dann zusammen mit den Instructions in einem ausgeblendeten Feld params direkt zu unserer API hochgeladen.

Um Parsing-Probleme im Browser zu vermeiden, sollten die Instructions computergestützt als JSON codiert und anschließend HTML-Entitäten wie < und " als < und " maskiert werden. Das Ergebnis ist für Menschen etwas schwer lesbar, versuchen Sie es also vielleicht gar nicht erst 😄

Wenden Sie auf das JSON in einem Multipart-Feld kein URL-Encoding an: Die API erwartet JSON als Feldwert. Das folgende Beispiel verwendet unsignierte Test-Instructions. Erzeugen Sie für den Produktiveinsatz die Parameter und die Signatur auf Ihrem vertrauenswürdigen Server mit Signature Authentication und fügen Sie die Signatur in einem separaten ausgeblendeten Feld signature hinzu. Geben Sie Ihr Auth Secret niemals im Formular an.

Sie können in den Instructions eine redirect_url festlegen. Damit weisen Sie unsere API an, den Browser nach Abschluss aller Vorgänge auf eine Erfolgsseite Ihrer Wahl umzuleiten. Wir hängen Folgendes an diese URL an: ?assembly_id=xyz&assembly_ssl_url=https://api2.transloadit.com/assemblies/xyz.

Wenn Ihr Backend die Erfolgsseite ausliefert, kann es diese Abfrageparameter auswerten. So können Sie weitere Schritte ausführen, etwa das Assembly Status JSON und die darin referenzierten Encoding-Ergebnisse herunterladen.

Die Erfolgsseite wird dem Browser angezeigt, sobald der Upload abgeschlossen ist. Die Assembly kann zu diesem Zeitpunkt jedoch noch ausgeführt werden, beispielsweise wenn ein großes Video codiert wird. Sie können entweder mit Ihrem Backend regelmäßig die assembly_ssl_url abfragen oder Assembly Notifications einrichten und in den Instructions eine notify_url angeben. In diesem Fall senden wir das Assembly Status JSON per POST dorthin, damit Ihr Backend die Ergebnisse auf diese Weise verarbeiten kann.

Beispiel

<!--
We'll be inlining the following Assembly Instructions into a hidden params field,
escaping HTML entities such as &lt;, a task best left to machines :)

{
  "redirect_url": "https://example.com/success",
  "auth": {
    "key": "YOUR_TRANSLOADIT_KEY"
  },
  "template_id": "YOUR_TEMPLATE_ID",
  "steps": {}
}
-->

<form
  method="POST"
  enctype="multipart/form-data"
  action="https://api2.transloadit.com/assemblies"
>
  <input
    type="hidden"
    name="params"
    value="{&#x22;redirect_url&#x22;:&#x22;https://example.com/success&#x22;,&#x22;auth&#x22;:{&#x22;key&#x22;:&#x22;YOUR_TRANSLOADIT_KEY&#x22;},&#x22;template_id&#x22;:&#x22;YOUR_TEMPLATE_ID&#x22;,&#x22;steps&#x22;:{}}"
  />
  <input type="file" name="myfile_1" multiple="multiple" />
  <input type="submit" value="Upload" />
</form>