REST interface

REST interface

TronikTronik Posts: 120Questions: 27Answers: 1

Hi,

I have some difficulties with how to set up a connection between Editor and external API.
More specifically WHERE to put the various url/code to the API.

In the example, the rest interface for GET points to get.php:

include( "staff-rest.php" );

$editor
    ->process($_POST)
    ->json();

Where exactly should I put the url for fetching data correctly to Editor? $data= "my.api.url" ?
Or is it in the staff-rest.php file?

Answers

  • TronikTronik Posts: 120Questions: 27Answers: 1

    Oh okey, this:

            ajax: {
                create: {
                    type: 'POST',
                    url:  '../php/rest/create.php'
                },
                edit: {
                    type: 'PUT',
                    url:  '../php/rest/edit.php?id=_id_'
                },
                remove: {
                    type: 'DELETE',
                    url:  '../php/rest/remove.php?id=_id_'
                }
    

    If I understand the flow correctly, these URLs will be each endpoint.
    What I dont understand is I will then bypass the Editor instance (staff-rest.php) entirely?
    Thus loosing validation

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    What I dont understand is I will then bypass the Editor instance (staff-rest.php) entirely?

    Yes, but your original post says you want to use an external API - not Editor's PHP libraries. So presumably this is what you would want to do, since that external API will (should) provide its own validation.

    Allan

  • TronikTronik Posts: 120Questions: 27Answers: 1

    Yes, thats true, i just couldnt understand the examples as it did contain Editor library in a way in staff-rest.php

    Although I assume I will have to write a middlelayer php file for the create and edit functions, re-write the API json response to fit Editor’s structure.

    It is my own API (directus headless cms) and Im unsure if the best way is to use the Rest function in Editor or to connect to the SQL directly.
    Connecting Editor to sql directly sure is a bit ’ugly’ when there is an API, but maybe I will loose performance and some funtionality that way.
    On the other hand writing directly to SQL will result in loosing some of the purpose of having the cms api.

    Your thoughts?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Although I assume I will have to write a middlelayer php file for the create and edit functions, re-write the API json response to fit Editor’s structure.

    If your external API doesn't implement Editor's client / server data interchange itself, then yes - there would need to be a translation layer somewhere. That could be client-side, or on the server-side.

    What format is your API expecting the data in? It might be easy to translate to it (or it might not!).

    Allan

  • TronikTronik Posts: 120Questions: 27Answers: 1

    The response json for updating an item is:

    {
      "data": {
        "id": 14,
        "status": "published",
        "title": "Welcome!",
        "body": "This is my first article",
        "featured_image": 2,
        "author": 5
      }
    }
    

    https://docs.directus.io/api/items.html#update-an-item

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    That is relatively easy to modify for Editor to work with:

    editor.on('postSubmit', function (e, json) {
      json.data = [ json.data ];
    });
    

    i.e. wrap the data object in an array (which allows for Editor's multi-row editing ability).

    However, what does the server expect in the way of parameters being submitted?

    Allan

  • TronikTronik Posts: 120Questions: 27Answers: 1

    However, what does the server expect in the way of parameters being submitted?

    The expected json when creating an item is

    {
      "status": "published",
      "title": "Hello, world!",
      "body": "This is my first article",
      "featured_image": 2,
      "author": 5
    }
    

    Same for update exept that endpoint is api/item/{id}, and for multi-update ID's comma separated in url. Maybe possible to manipulate the endpoint url in Editor for this?

    Another challenge is how to (if even possible) use Editor's file and image upload function with the rest api.
    For creating/uploading an image the API expects one attribute: 'data' which is:

    Raw file data (multipart/form-data), base64 string of file data, or URL you want to embed.

    Any thoughts and suggestions from you is much appreciated

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    To send data in that form, you can do:

    editor.on('preSubmit', function (e, d) {
      $.each( d.data, function (id, row) {
        $.extend(d, row);
      });
    
      delete d.data;
    });
    

    Basically that flattens the data array that we use to the top level object. It does mean you can't use multi-row editing, but that's an artefact of the API you are using.

    The file upload will be more difficult, but let's get past this part first!

    Allan

  • TronikTronik Posts: 120Questions: 27Answers: 1

    To send data in that form, you can do:

    editor.on('preSubmit', function (e, d) {
      $.each( d.data, function (id, row) {
        $.extend(d, row);
      });
     
      delete d.data;
    });
    

    Is that any different from my solution in other thread? Code:

    return JSON.stringify( d['data'][Object.keys(d['data'])[0]] );
    

    In my opinion I can do multi-row editing this way, since it is the same changes for all edited rows/items,
    one problem though is that the return json from server is different with one item, from multiple items.

    Multiple:

    {
        "data": [
            {
                "id": 1,
    

    Single:

    {
        "data": {
            "id": 1,
    

    Which means your suggestion on using

    editor.on('postSubmit', function (e, json) {
      json.data = [ json.data ];
    });
    

    only works when editing ONE item

  • TronikTronik Posts: 120Questions: 27Answers: 1

    Well, solved that with

    editor.on('postSubmit', function (e, json) {
        
        if(!Array.isArray(json.data)){
            json.data = [ json.data ];
        }
    });
    
    

    Now on to the file-upload, which will be a little tricky as stated.
    Dont know if I can use Editors built in plugin for this, or take parts from it.
    What do you think allan?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Progress :)

    So the first thing to be aware of with the built in upload type is that it is async to the rest of the form. I.e. when you select a file, it is immediately uploaded to the server, is it then expected to return some kind of identifier for the file, which is than used as the value for that field.

    Is that suitable for your use case, or do you need the file to be submitted (base64) along with the rest of the form. If the latter, it would require a custom type to be implemented that would give the value as your base64 value.

    Regards,
    Allan

  • TronikTronik Posts: 120Questions: 27Answers: 1

    To be able to upload the file through the API along with the row/item in one post is possible but not recommended:

    It's theoretically possible to inline the file right there in the item itself, but that only works using a base64 data string of the file which is not very performant. I would highly recommend uploading the file separately using the /files endpoint first.

    So the recommended way is to upload the file to the /files endpoint using enctype multipart/form-data, which on success responds with data of the uploaded file, including ID.
    That ID may then be used by the row / item on the image/file field.

    So first POST, then PATCH.

    I've been looking at Dropzone.js as an alternative way of making this work, if it will be too complicated making it work with Editors built in file upload, altough it is preffered.

    I've been reading most of the documentation on upload and uploadMany, but I cant figure out how and where I can "grab" the dropped file and work with it in JS

  • TronikTronik Posts: 120Questions: 27Answers: 1

    I've successfully implemented Dropzone.js into Editor and the results seems promising

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Sounds interesting! Would you be willing to share your integration for others to be able to use as well?

    Thanks,
    Allan

  • TronikTronik Posts: 120Questions: 27Answers: 1

    Of course, will do that when my set-up is complete and working

This discussion has been closed.