Téléversements de fichiers

Le téléversement de fichiers est désormais pris en charge, voir les notes de version pour plus d’informations : https://www.drupal.org/node/3024331

Ces deux images montrent comment utiliser Postman pour tester le téléversement de fichiers via JSON:API

Exemple Curl pour téléverser une image utilisateur

Cela suppose que vous vous êtes déjà authentifié et que vous avez récupéré votre token CSRF dans une autre requête.

curl -s -X POST -b cookie.txt \
  --header "Accept: application/vnd.api+json" \
  --header "Content-Type: application/octet-stream" \
  --header "X-CSRF-Token: $TOKEN" \
  --header 'Content-Disposition: file; filename="test.jpg"' \
  --data-binary "@test.jpg" \
  http://localhost/jsonapi/user/user/$UUID/user_picture

Conseils pour l’utilisation d’axios (ou autres bibliothèques clients HTTP) et Node.js :

Vous pouvez constater que le format des données pour une image à envoyer est sous forme de Buffer. Par exemple :

<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff fe 00 3e 43 52 45 41 54 4f 52 3a 20 67 64 2d 6a 70 65 67 20 76 31 2e 30 20 28 75 73 69 ... 582549 autres octets>

Bien que techniquement cela soit la représentation Buffer des données binaires de l’image, tenter d’envoyer cela à Drupal en tant que paramètre data dans votre bibliothèque HTTP favorite comme axios va créer un fichier incorrect. Un fichier sera créé, vous recevrez une réponse réussie, mais l’image sera probablement un carré blanc sur fond noir.

Vous devez utiliser la classe Node.js Buffer pour convertir cela en un vrai Buffer binaire. Plus précisément, vous utiliserez la méthode from.

Par exemple :

Supposons que vous avez récupéré un objet fichier via le SDK AWS S3 et extrait le Body de cet objet. Ce Body contient des données Buffer comme ci-dessus. Placez ces données Body dans une variable, utilisez la classe Buffer pour les mettre au bon format, puis envoyez-les à l’endpoint JSON:API de Drupal avec axios (note : ce snippet montre uniquement la partie importante du code, pas le handler complet. Habituellement, on regroupe cela dans des bibliothèques utilitaires pour respecter le principe DRY). La ligne importante est data: Buffer.from(buffer, "binary") :

const buffer = storedFile.Body; // contient les données buffer indiquées ci-dessus.

const drupalData = await axios({
  method: "post",
  url: url, // URL vers /jsonapi/media/image/field_media_image/ sur votre site.
  auth: {
  	username: xxx,
  	password: xxx
  },
  headers: {
    'Accept': 'application/vnd.api+json',
    'Content-Type': 'application/octet-stream',
    'X-CSRF-Token': token, // Vous devez le récupérer d’abord depuis Drupal via /session/token !
    'Content-Disposition': 'file; filename="' + filename + '"',
  },
  data: Buffer.from(buffer, "binary"),
});

console.log(drupalData); // l’UUID du fichier nouvellement créé se trouve dans drupalData.data.id

Ceci est particulièrement utile si vous utilisez des fonctions Node.js AWS Lambda et récupérez des fichiers depuis S3 pour les poster vers Drupal.