REST interface

Tronik

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?

Tronik

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

allan

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

Tronik

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?

allan

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

Tronik

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

allan

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

Tronik

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

allan

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

Tronik

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

Tronik

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?

allan

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

Tronik

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

Tronik

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

allan

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

Thanks,
Allan

Tronik

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