Contourner la limite d’un seul champ de Zapier pour Transloadit

Yukesh Shrestha

Ingénieur support · Gillingham, Royaume-Uni · Afficher la bio

Récemment, un client a demandé combien de champs pouvaient être transmis via notre intégration Zapier. Actuellement, nous ne permettons de transmettre qu’un seul champ à une Assembly, ce qui peut s’avérer restrictif dans certains cas. Nous avons toutefois étudié comment contourner cette restriction, et nous partageons aujourd’hui notre solution.

Pour suivre ce guide, vous aurez besoin de :

• Un stockage Dropbox
• Un compte Zapier
• Un compte Transloadit

Dans ce guide, nous utilisons un stockage Dropbox pour importer et exporter des fichiers. Nous proposons toutefois de nombreuses autres options d’exportation que vous pourriez utiliser à la place.

Dropbox

Avant de commencer, assurez-vous d’avoir configuré un compte Dropbox, puis cliquez ici⁠ pour configurer votre application Dropbox.

Les captures d’écran montrent les interfaces de Dropbox et de Zapier telles qu’elles étaient en 2021. Dans Dropbox, choisissez Scoped access et n’accordez l’accès qu’aux fichiers dont votre flux de travail a besoin. L’option Full Dropbox illustrée offre un accès étendu ; préférez App folder lorsque toutes les entrées et sorties peuvent s’y trouver. Créez l’application et n’activez que les portées (scopes) de lecture/écriture nécessaires dans ses paramètres d’autorisations.

Rendez-vous dans Settings et, dans la section OAuth 2, générez votre jeton d’accès et notez la valeur obtenue. Un jeton généré convient à un test rapide, pas à une intégration permanente sans surveillance. Pour un Zap durable, configurez une connexion OAuth prenant en charge les jetons d’actualisation avant d’activer le Zap. Consultez le guide OAuth de Dropbox⁠ ; ne publiez jamais de jetons dans du code ou des captures d’écran.

Dans Dropbox, nous avons créé un dossier nommé importFolder. Lorsque de nouveaux fichiers sont téléversés dans ce dossier, Zapier détecte automatiquement chaque nouveau fichier et le transmet à Transloadit pour traitement.

Nous avons également créé, pour les résultats de notre Assembly, un dossier nommé exportFolder.

Avec un accès App folder, créez les deux dossiers dans le dossier Dropbox de votre application, par exemple /Apps/MyApp/importFolder et /Apps/MyApp/exportFolder. L’API Dropbox traite ce dossier d’application comme sa racine ; Transloadit a donc besoin de /importFolder/image.jpg, et non de /Apps/MyApp/importFolder/image.jpg. La section Zapier ci-dessous convertit le chemin de compte renvoyé par le déclencheur. Avec un accès Full Dropbox, les deux dossiers peuvent se trouver à la racine de votre compte et aucune conversion n’est nécessaire. Consultez les recommandations de Dropbox sur la racine de l’API⁠.

Transloadit

Côté Transloadit, nous devons d’abord configurer nos informations d’identification de Template.

Les captures d’écran de la Console ci-dessous montrent l’interface en anglais.

Accédez à vos informations d’identification de Template. Cliquez sur Ajouter un nouvel ensemble d’informations d’identification, sélectionnez Dropbox et saisissez les informations requises. Le nom que nous avons choisi est TestWorkBox.

Nous pouvons maintenant créer notre Template. Ce Template importe une image depuis notre Dropbox, la redimensionne, puis exporte le résultat de notre Assembly.

Copiez le code JSON ci-dessous et enregistrez-le comme nouveau Template, en prenant soin de noter votre ID de Template.

{
  "steps": {
    "imported": {
      "robot": "/dropbox/import",
      "path": "${fields.dropbox_file_path}",
      "credentials": "TestWorkBox",
      "result": true
    },
    "images": {
      "use": "imported",
      "robot": "/image/resize",
      "format": "png",
      "width": 500,
      "height": 500,
      "resize_strategy": "fit",
      "imagemagick_stack": "v3.0.1"
    },
    "exported": {
      "use": ["images"],
      "robot": "/dropbox/store",
      "credentials": "TestWorkBox",
      "path": "exportFolder/resized_${fields.file_name}.${file.ext}"
    }
  }
}

Dans le Template ci-dessus, le paramètre credentials reçoit le nom de l’ensemble d’informations d’identification Dropbox configuré précédemment, TestWorkBox. Dans les Steps imported et exported, nous utilisons les Assembly Variables ${fields.dropbox_file_path} et ${fields.file_name} dans le paramètre path. Ce sont les deux champs que nous allons manipuler avec Zapier.

Côté Zapier

Passons enfin à Zapier et voyons comment nous avons surmonté la limitation à un seul champ. Créez un nouveau Zap avec Dropbox comme déclencheur (Trigger) et New File in Folder comme événement déclencheur (Trigger Event).

Cliquez sur Continue, puis choisissez votre compte Dropbox.

Nous indiquons maintenant le dossier dans lequel notre Step d’importation récupérera nos fichiers. Cette valeur doit correspondre au dossier créé précédemment, importFolder. Pour un accès au dossier d’application, sélectionnez le dossier situé dans le dossier Dropbox de l’application, par exemple /Apps/MyApp/importFolder.

Cliquez sur Continue, puis sur Test Trigger. Si tout va bien, après quelques secondes, les métadonnées d’un fichier aléatoire du dossier indiqué devraient s’afficher, ce qui signifie que votre compte Dropbox est bien connecté. Avant de cliquer sur Continue, configurons les différents champs que nous transmettons de Zapier à Transloadit.

Pour un accès au dossier d’application, ajoutez d’abord une action Code by Zapier en utilisant JavaScript. Dans Input Data, associez file_path au chemin du fichier du déclencheur Dropbox, et non à son ID de fichier ni à son URL de téléchargement. Définissez app_folder sur le préfixe du dossier d’application copié exactement depuis ce chemin, en respectant la casse mais sans barre oblique finale, par exemple /Apps/MyApp. Utilisez ce code :

const path = inputData.file_path
const appFolder = inputData.app_folder

if (
  typeof path !== 'string' ||
  typeof appFolder !== 'string' ||
  !appFolder.startsWith('/') ||
  appFolder.endsWith('/') ||
  !path.startsWith(`${appFolder}/`)
) {
  throw new Error('Select a file inside the configured Dropbox app folder.')
}

return { dropbox_file_path: path.slice(appFolder.length) }

Testez l’action Code : /Apps/MyApp/importFolder/image.jpg devrait produire dropbox_file_path avec /importFolder/image.jpg. Si le déclencheur renvoie déjà un chemin relatif à l’application, ignorez cette conversion. Pour un accès à l’ensemble du compte, ignorez-la également et utilisez le chemin d’origine du déclencheur. Consultez le guide JavaScript de Zapier⁠ pour l’éditeur Code actuel.

Cliquez ensuite sur + et sélectionnez Format en définissant l’événement sur Utilities.

Cliquez sur Continue et, dans le champ Transform, sélectionnez Line Itemizer (Create/Append/Prepend). Dans la section Line-Item Properties, nous ajoutons les noms de champs définis dans notre Template, ainsi que les valeurs à transmettre. Veillez à ne pas mettre d’espace après la virgule lorsque vous saisissez les noms de champs. Zapier considérera l’espace comme faisant partie du nom du champ. De plus, lorsque vous choisissez les valeurs des champs, veillez à les sélectionner dans l’ordre des noms de champs.

Associez dropbox_file_path à la sortie normalisée de l’action Code lorsque cette étape est nécessaire, sinon au chemin d’origine du déclencheur Dropbox. Associez file_name au nom de fichier du déclencheur. Le chemin d’exportation de notre Template est déjà relatif à la racine de l’ensemble d’informations d’identification ; laissez-le donc inchangé.

Cliquez sur Continue, puis sur Test & Review : vous verrez alors le nom du champ avec la valeur de champ correspondante. Cliquez encore une fois sur Continue afin de pouvoir configurer l’action.

Comme application d’action (Action App), nous sélectionnons Transloadit avec l’événement d’action (Action Event) Create Assembly.

Cliquez sur Continue comme précédemment et associez votre compte Transloadit.

Nous pouvons maintenant mettre en œuvre les différents champs créés précédemment. Saisissez votre ID de Template enregistré dans le champ Template. Pour Assembly Field Name, sélectionnez Output Line Item(s) Field Name dans le formateur. Pour Assembly Field Value, sélectionnez Output Line Item(s) Field Value. L’ID de Template ne doit être saisi dans aucun des deux champs d’Assembly.

Une dernière fois, cliquez sur Continue et Test & Review. Cela créera une nouvelle Assembly et affichera à l’écran les données de l’Assembly correspondante.

Maintenant que notre Zap est finalisé, nous pouvons l’exécuter. Chaque fois qu’un nouveau fichier est téléversé dans notre dossier importFolder, le Zap sera déclenché en quelques minutes, ce qui entraînera la création d’une Assembly.

Résultats

Une fois le Zap déclenché, rendez-vous dans la section Assemblies de votre console pour consulter les résultats.

Si vous souhaitez voir un exemple concret de mise en œuvre, jetez un œil au blog EN (English) de mon collègue Joseph. Son article montre comment utiliser plusieurs champs pour générer automatiquement des extraits musicaux à partir de Spotify. C’est tout pour aujourd’hui ! En suivant ces étapes simples, vos Zaps devraient fonctionner sans accroc, exactement comme avant que vous sachiez contourner la limite d’un seul champ.