it-swarm.com.de

Wie lade ich ein Bild über jsonapi hoch?

Die Dokumentation ist vage: https://www.drupal.org/docs/8/modules/json-api/working-with-files-post

Ich versuche, ein Bild hochzuladen, das dem Beispielcode für das Hochladen eines "Dokuments" auf der obigen Seite folgt.

Vereinfachtes Beispiel:
Bei einem Administrator "Bot" und einem Base-64-codierten QR-Code.

Ich erstelle die JSON-Nutzdaten gemäß dem Beispiel in der Dokumentation

{
  "data": {
      "type": "file--image",
      "attributes:": {
          "title": "QR Code",
          "uri": "public://folder/qr-code.png",
          "data": "iVBORw0KGgoAAAANSUhEUgAAAG8AAABvAQMAAADYCwwjAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP//8i138cAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEsSURBVDiN1dS7jcMwDABQGirU5RYQoDXUaSV7AX8WsFdSxzUCeAGrUyGYRzuJ79KIKoIDTnCRVyj8gBTQ24H/wQ1gQNNCBrAiI+UOafRmoAqG48eSTKur2Gq4+VzJ3q/x190SKbfOLpivJAvkejs0/F3lF8hnh9yFn8YWuIEBR7tXs6ugJkIVEzSPrIqMBF94By72DFTmpteJVAxXoBI5RK9Nz4lpmbtTCx2FdGdWZRLmHuzo1/m8K5DWKeWB6001NEOg0dHrbombt9wfHu8GrcgYeEjuN00Lkky0m1eEdkoVTIa3rHfQBCuST6TzH0DmMbGBo/AukEjehSHkLtmYrExeyWNioXmWL1EDd34GW0XPneQ3h2Tym0OKh/Y5sUU+9hfcOmqZf/YCf4zfOAszBtzxUOsAAAAASUVORK5CYII="
      }
  }
}

Was sich in diesem Curl-Befehl niederschlägt

curl \
--user bot:bot \
--header 'Accept: application/vnd.api+json' \
--header 'Content-type: application/vnd.api+json' \
--request POST http://drupalvm.test/jsonapi/file/image \
--data-binary '{"data": {"type": "file--image", "attributes:": {"title": "QR Code", "uri": "public://folder/qr-code.png", "data": "iVBORw0KGgoAAAANSUhEUgAAAG8AAABvAQMAAADYCwwjAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP//8i138cAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEsSURBVDiN1dS7jcMwDABQGirU5RYQoDXUaSV7AX8WsFdSxzUCeAGrUyGYRzuJ79KIKoIDTnCRVyj8gBTQ24H/wQ1gQNNCBrAiI+UOafRmoAqG48eSTKur2Gq4+VzJ3q/x190SKbfOLpivJAvkejs0/F3lF8hnh9yFn8YWuIEBR7tXs6ugJkIVEzSPrIqMBF94By72DFTmpteJVAxXoBI5RK9Nz4lpmbtTCx2FdGdWZRLmHuzo1/m8K5DWKeWB6001NEOg0dHrbombt9wfHu8GrcgYeEjuN00Lkky0m1eEdkoVTIa3rHfQBCuST6TzH0DmMbGBo/AukEjehSHkLtmYrExeyWNioXmWL1EDd34GW0XPneQ3h2Tym0OKh/Y5sUU+9hfcOmqZf/YCf4zfOAszBtzxUOsAAAAASUVORK5CYII="}}}' 

Dies führt zu einem Fehler:

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'uri' cannot be null

Was mache ich falsch?

Ich verwende eine lokale Drupal -Instanz, die von https://github.com/geerlingguy/drupal-vm#quick-start-guide auf Mac Sierra 10.12.6 generiert wurde

Es ist

Drupal core 8.5.3

Enthält: Automatisiertes Cron, BigPipe, Block, Haltepunkt, CKEditor, Farbe, Kommentar, Konfigurationsmanager, Kontakt, Kontextverknüpfungen, Benutzerdefinierter Block, Benutzerdefinierte Menüverknüpfungen, Datenbankprotokollierung, Datenzeit, Feld, Feldbenutzeroberfläche, Datei, Filter, HTTP-Basisauthentifizierung, Hilfe, Verlauf, Bild, interner dynamischer Seiten-Cache, interner Seiten-Cache, Link, Menü-Benutzeroberfläche, Knoten, Optionen, Pfad, Schnellbearbeitung, RDF, Suche, Serialisierung, Verknüpfung, System, Taxonomie, Text, Texteditor, Symbolleiste, Tour, Update Manager, Benutzer, Ansichten, Benutzeroberfläche für Ansichten

Mit den folgenden Modulen

  • File Entity (fieldable files) 8.x-2.0-beta6
  • JSON API 8.x-1.18
  • JSON API File 8.x-1.1
  • Token 8.x-1.3

(Und mit aktiviertem Kernmodul HTTP Basic Authentication)

3
Sukotto

Hier ist eine JavaScript-Version, die nach vielen Versuchen und Irrtümern helfen kann. Ich konnte nur "entity/file? _Format = hal_json" dazu bringen, das Modul "file_entity" zu verwenden.

das folgende "bace64" = iVBORw0KGgoAAAANSUhEUgAAAG8AAABvA .....

uploadDrupalImage(bace64) {
  // Could only get hal_json to work.
  var dataToPost = '{"_links": {"type": {"href": ' + JSON.stringify(this.baceUrl + 'rest/type/file/image') + '}},"filename": [{"value": "' + this.state.file.name + '"}],"data":[{"value": "' + bace64 + '"}]}';
  var url = this.baceUrl + 'entity/file?_format=hal_json';
  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/hal+json',
      'X-CSRF-Token': this.state.csrf_token,
      'Authorization': this.state.basicAuth,
    },
    body: dataToPost
  }).then(response => response.json()).then(data => {
    if (data) {
      this.setState({uploadedFile: data});
      if (data.fid) {
        //console.log(data.fid[0].value);
        this.setState({fid: data.fid[0].value});
      }
    }
  }).catch(err => console.error(err.toString()));
  return false;
}

entnommen aus (als ich gerade lernte zu reagieren, sei also nett lol) https://github.com/taggartj/Drupa_react_REST_examples/blob/master/src/components/drupal/DrupalCreateArticleWithImageBasicAuth.js

1
Taggart Jensen