Bestandsuploads

Bestanden uploaden wordt nu ondersteund; zie de releasenotes voor meer informatie: https://www.drupal.org/node/3024331

Deze twee afbeeldingen laten zien hoe je Postman gebruikt om een bestandsupload via JSON:API te testen

Curl-voorbeeld om een gebruikersafbeelding te uploaden

Dit gaat ervan uit dat je je al hebt geauthenticeerd en in een ander verzoek je CSRF-token hebt opgehaald.

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

Tips bij het gebruik van axios (of andere HTTP-clientbibliotheken) en Node.js:

Het kan zijn dat het formaat waarin je de gegevens voor een te posten afbeelding hebt, in Buffer-formaat is. Bijvoorbeeld:

<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 more bytes>

Hoewel dit technisch gezien de Buffer-objectrepresentatie van de binaire afbeeldingsdata is, zal proberen dit als data-parameter naar Drupal te sturen met je favoriete HTTP-clientbibliotheek, zoals axios, ertoe leiden dat je een incorrect bestand maakt. Er zal wel een bestand zijn en je krijgt een succesvolle response terug, maar de afbeelding zal waarschijnlijk slechts een wit vierkant op een zwarte achtergrond zijn.

Je moet de Node.js-Buffer-klasse gebruiken om dit om te zetten naar daadwerkelijke binaire Buffer-output. Concreet gebruik je de methode from.

Voorbeeld:

Stel, we hebben met de AWS S3-SDK een bestandsobject opgehaald en de Body van dat bestandsobject opgehaald. Die Body bevat Buffer-data zoals hierboven getoond. Laten we die Body-data in een variabele zetten, de Buffer-klasse gebruiken om het in het juiste formaat te krijgen en het doorsturen naar Drupal’s JSON:API-endpoint met axios (opmerking: deze snippet is alleen het relevante deel van de code, niet de volledige handler. Meestal splitsen we dit op in hulplibraries om het DRY te houden). De belangrijke regel is data: Buffer.from(buffer, "binary"):

const buffer = storedFile.Body; // bevat de bufferdata zoals hierboven aangegeven.

const drupalData = await axios({
  method: "post",
  url: url, // URL naar /jsonapi/media/image/field_media_image/ op je site.
  auth: {
  	username: xxx
  	password: xxx
  },
  headers: {
    'Accept': 'application/vnd.api+json',
    'Content-Type': 'application/octet-stream',
    'X-CSRF-Token': token, // Dit token moet je eerst uit Drupal ophalen via /session/token!
    'Content-Disposition': 'file; filename="' + filename + '"',
  },
  data: Buffer.from(buffer, "binary"),

});

console.log(drupalData); // de uuid van het nieuw aangemaakte bestand staat in drupalData.data.id

Dit is vooral handig als je Node.js AWS Lambda-functies gebruikt en bestanden uit S3 haalt om naar Drupal te posten.