ajaxgraphileon

Graphileon Proxy Feature For file uploads

We have a custom API which is running in a pod on Kubernetes server, with Graphileon also running in a pod on the same server.

The custom API takes spreadsheet as form-data, uploads it and processes it on to Neo4j database (also running in a pod on the same server).

All our 3 pods (custom API, Graphileon and Neo4j) are running in same namespace.

Our requirement is that we want to create a "HTMLView" on Graphileon which can open a small dialog box where we can upload the spreadsheet and hit our API on the backend.

Graphileon team advised us to use the proxy feature, but that seems to be not working in this case. Here is what we did:

LOCAL TESTING

We started neo4j, graphileon and custom API on local. We created the HTML view and used ajax call to call our API:

function createSchema(schemaType,formData)
{
        var schemaUrl = "http://localhost:8080/create-schema/"+schemaType;
        $.ajax({
          url: schemaUrl,  
          type: "POST",
          data: formData,
          mimetype: "multipart/form-data",
          cache: false,
          processData: false,
          success: function(data,status,xhr){ 
            $("#result").html("");
            $("#reset").show();
            $("#schemaFileUpload").hide();
$("#result").append("<h4>Create "+ schemaType +" Schema Success <span style=\'color:green\' >"+xhr.responseText + " with Status code "+xhr.status+"<span></h4> </br>" );
            $("#verticalSchemaFile").attr("disabled","disabled");
            $("#customerSchemaFile").attr("disabled","disabled");
          }, 
          error: function(xhr,status,error){ 
            $("#result").html("");

            $("#reset").show();
            $("#schemaFileUpload").hide();
            $("#result").append( schemaType +" create Schema Failed. <span style=\'color:red\' >"+xhr.responseText + " with Status code "+xhr.status+"<span> </br>" );
            $("#verticalSchemaFile").attr("disabled","disabled");
            $("#customerSchemaFile").attr("disabled","disabled");
          }
        });
}

This works!

SERVER TESTING

When I put the same code over the server, its gives error - couldn't reach URL. So I did the proxy settings and tried the proxy way:

function createSchema(schemaType,formData)
{
        var schemaUrl = "http://customapi:8080/create-schema/"+schemaType;
        $.ajax({
          url: "/proxy",  
          type: "POST",
          data: "{\"url\": \"" + schemaUrl + "\", \"method\": \"POST\", \"data\": \"" + formData + "\"}",
          mimetype: "multipart/form-data",
          cache: false,
          processData: false,
          success: function(data,status,xhr){ 
            $("#result").html("");
            $("#reset").show();
            $("#schemaFileUpload").hide();
$("#result").append("<h4>Create "+ schemaType +" Schema Success <span style=\'color:green\' >"+xhr.responseText + " with Status code "+xhr.status+"<span></h4> </br>" );
            $("#verticalSchemaFile").attr("disabled","disabled");
            $("#customerSchemaFile").attr("disabled","disabled");
          }, 
          error: function(xhr,status,error){ 
            $("#result").html("");

            $("#reset").show();
            $("#schemaFileUpload").hide();
            $("#result").append( schemaType +" create Schema Failed. <span style=\'color:red\' >"+xhr.responseText + " with Status code "+xhr.status+"<span> </br>" );
            $("#verticalSchemaFile").attr("disabled","disabled");
            $("#customerSchemaFile").attr("disabled","disabled");
          }
        });
}

This gives error saying "No JSON request parameters specified"

Appreciate any help here. Thanks

Solution

  • Disclamer: i am a lead developer at Graphileon.

    The /proxy endpoint of Graphileon is more of a Remote Procedure Call. It calls request(...) with the parameters received as JSON in the request body (GET or POST data). It is not designed to handle file uploads.

    The only way to simulate a file upload in the target API is to send the file data in the formData parameter. The problem is that with JSON you can only send text files. So no binary data.

    $.ajax({
    url: "/proxy",  
    type: "POST",
    data: JSON.stringify({
        url: schemaUrl,
        method: 'POST',
        formData: {
            file: {
                value:  '<file-contents>',
                options: {
                    filename: 'my-file.txt',
                    contentType: 'text/plain'
                }
            }
        }

    })
})

    You can read the selected file contents with the Javascript's FileReader API.