Formulaire multipart
Nous avons initialement conçu cette approche pour éviter d’avoir à activer JavaScript dans le navigateur. Les temps ont changé et l’on peut désormais supposer que JavaScript est activé dans le navigateur. Nous recommandons donc Uppy comme intégration navigateur de prédilection.
Cela dit, pour présenter les concepts de base, réaliser un prototype rapide ou si vous souhaitez
vraiment proposer une solution de repli pour les navigateurs où JavaScript est désactivé ou a planté,
vous pouvez intégrer Transloadit avec rien de plus qu’un <form> multipart.
Un formulaire HTML natif ne peut pas définir d’en-têtes HTTP personnalisés ; cette intégration
n’envoie donc pas Transloadit-Client. Ajouter un champ masqué portant ce nom ne définit pas
l’en-tête. Utilisez Uppy si vous avez besoin d’une identification
automatique des versions du SDK et des plugins.
Installation
Il n’y a rien à installer 👌
Utilisation
Définissez l’attribut action du formulaire sur "https://api2.transloadit.com/assemblies". Les fichiers sont alors
envoyés directement à notre API, ainsi que les éventuelles
Instructions contenues dans un champ params masqué.
Pour éviter tout problème d’analyse dans le navigateur, il vaut mieux laisser un ordinateur encoder
les instructions en JSON, puis échapper les entités HTML, par exemple < et " en < et ". Le résultat est un
peu difficile à lire pour un humain, alors n’essayez peut-être même pas 😄
N’encodez pas le JSON en URL dans un champ multipart : l’API attend une valeur de champ au format JSON.
L’exemple ci-dessous utilise des Instructions de test non signées. En production, générez les
paramètres et la signature sur votre serveur de confiance à l’aide de
Signature Authentication, puis incluez la signature dans un champ
signature masqué distinct. Ne placez jamais votre Auth Secret dans le formulaire.
Vous pouvez définir un redirect_url dans les
Instructions pour indiquer à notre API de
rediriger le navigateur vers une page de succès de votre choix une fois le traitement terminé. Nous
ajouterons ?assembly_id=xyz&assembly_ssl_url=https://api2.transloadit.com/assemblies/xyz à cette URL.
Lorsqu’il sert la page de succès, votre back-end pourrait analyser ces paramètres de requête afin que vous puissiez effectuer d’autres traitements, comme télécharger le Assembly Status JSON et les résultats d’encodage auxquels il fait référence.
La page de succès est servie au navigateur dès la fin de l’envoi, si bien que
l’Assembly peut en réalité être encore en cours d’exécution
(encodage d’une vidéo volumineuse, par exemple). Vous pourriez soit interroger régulièrement l’URL
assembly_ssl_url depuis votre back-end, soit configurer des
Assembly Notifications et fournir une notify_url avec vos
Instructions. Dans ce cas, nous enverrons le
Assembly Status JSON à cette URL via une requête POST
afin que vous puissiez traiter les résultats de cette manière avec votre back-end.
Exemple
<!--
We'll be inlining the following Assembly Instructions into a hidden params field,
escaping HTML entities such as <, 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="{"redirect_url":"https://example.com/success","auth":{"key":"YOUR_TRANSLOADIT_KEY"},"template_id":"YOUR_TEMPLATE_ID","steps":{}}"
/>
<input type="file" name="myfile_1" multiple="multiple" />
<input type="submit" value="Upload" />
</form>