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 Multipart-<form> integrieren.

Installation

Sie müssen nichts installieren 👌

Verwendung

Setzen Sie das action-Attribut des Formulars auf "https://api2.transloadit.com/assemblies". Die Dateien werden dann zusammen mit den Instructions in einem ausgeblendeten params-Feld 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 😄

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="%7B%0A%20%20%22redirect_url%22%3A%20%22https%3A%2F%2Fexample.com%2Fsuccess%22%2C%0A%20%20%22auth%22%3A%20%7B%0A%20%20%20%20%22key%22%3A%20%22YOUR_TRANSLOADIT_KEY%22%0A%20%20%7D%2C%0A%20%20%22template_id%22%3A%20%22YOUR_TEMPLATE_ID%22%2C%0A%20%20%22steps%22%3A%20%7B%7D%0A%7D"
  />
  <input type="file" name="myfile_1" multiple="multiple" />
  <input type="submit" value="Upload" />
</form>