Uploading a new document using the REST API.

Simon_Weekley

I'm trying to upload a new document using the REST API, and running in to an issue.

I can authenticate the current user (using SSO)

I can get that user's details.

I can create a new folder.

But I get a "bad request" when trying to upload a new document - any insight would be much appreciated.

I've attached my testing code for reference - the first 3 functions work, the fourth one doesn't.

Thanks

Find more posts tagged with

Comments

Simon_Weekley

here's the code

Brahmaji

I have checked your script. Everything looks fine , only problem is with the file path you mentioned.The backslashes in a file path must always be escaped.

Change the line as below.

var myBody = { type: "144", parent_id: "1349584", name: "test rest doc", file: "c:\\temp\\simon.txt" };

Now try to upload the document.

Thanks

Ferdinand Prantl

You cannot use paths to the local (or any other) file system in JavaScript. If you want to upload a file using a HTML page, you need to put a file-input element on it. Once the user picks a file, you will be able to access the file object and pass it to the document creation AJAX call. You can receive the file by a drag'n'drop handler, from clipbooard, or by other mans, but the principle remains the same - you need a user interaction, which selects a file. Then you can access the file in JavaScript for further operations. For example:

<input type="file" id="file">$('#file').change(function (event) {  var file = event.target.files[0];  upload(file)      .done(function (response) {        alert('New document: ' + response.id);      })      .fail(function (request) {        var message = request.responseJSON && request.responseJSON.error;        alert('Upload failed: ' + message);      });});var otcsticket = '...';function upload(file) {  var body = {        type: 144,        parent_id: 19051,        name: file.name      },      formData = new FormData();  formData.append('body', JSON.stringify(body));  formData.append('file', file);  return $.ajax({    type: 'POST',    url: '.../api/v1/nodes',    data: formData,    headers: { otcsticket: otcsticket }  });}

yaronlu

Hi,

I am using cs16.2 and tried to follow the code you gave but it did not work.

I changed it a bit and now it looks like this but still dont work.

i am using localhost generated by iis express in my local machine

the target folder has a category with non reqired fields.

can you please guide me to the source of my problem?

thanks

var str="",intIndx=0;

            var baseresturl = "http://myServer/OTCS/llisapi.dll/api/v1/";


            var credentials = {};
            var ticket;
            var strErrMsg = "";
            var strSelectedCat = "";
            var strParentNodeID = "";

            function UploadFileClick() {
                var formData = new FormData();
                var totalFiles = document.getElementById("flUploaded").files.length;
                var oTxtVals = null, i;
                debugger

                for (i = 0; i < totalFiles; i++) {
                    file = document.getElementById("flUploaded").files[i];
                    formData.append("file", file);
                }
                formData.append("type", "144");
                formData.append("parent_id", strParentNodeID);
                formData.append("name", file.name);

                $("#txtCatProps").find("input").each(function (key, value) {
                    formData.append(value.id, value.value);
                });

                $.ajax({
                    type: "POST",
                    url: baseresturl+"nodes",
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    crossDomain: true,
                    beforeSend: function (request) {
                        request.setRequestHeader("OTDSTicket", ticket);
                        request.overrideMimeType("multipart/form-data")
                    },
                    success: function (response) {
                        $("#dvStatus").html("<span style='direction: ltr;'>" + response.result + "</span>");
                    },
                    error: function (error) {
                        alert("errror");
                    }
                });
            }

Breemer_Rick

Hi Yaron,

Did you also try with "otcsticket" as header name, instead of "otdsticket"? If it still doesn't work, can you post the response that you're getting?

Cheers,
Rick

AKropp

Hi Yaron,

I noticed in your baseurl you’re hitting the v1 API path. Since you’re using 16.2 you might want to favor the v2 API – try changing it to /api/v2. In the case of a /nodes POST I don’t think there’s any practical difference between the two, but if all else looks correct it’s worth a shot to see if you get a different response.

Otherwise, to Rick’s point please, post the entire server response. If it’s just a generic 500 error it can sometimes be worth enabling Content Server logs. A) That will tell you if the request is even making it that far or if it’s dying at the web server level and If it is making it you’ll often get a more descriptive error you can work with rather than just the generic “internal server error”.

From: eLink Entry: Content Server Development Forum [mailto:development@elinkkc.opentext.com]
Sent: Thursday, September 14, 2017 12:51 PM
To: eLink Recipient <devnull@elinkkc.opentext.com>
Subject: Uploading a new document using the REST API 2

Uploading a new document using the REST API 2

Posted by Lulay, Yaron On 09/14/2017 12:45 PM

Hi,

I am using cs16.2 and tried to follow the code you gave but it did not work.

I changed it a bit and now it looks like this but still dont work.

i am using localhost generated by iis express in my local machine

the target folder has a category with non reqired fields.

can you please guide me to the source of my problem?

thanks

[To post a comment, use the normal reply function]
Topic:	Uploading a new document using the REST API.
Forum:	Content Server Development Forum
Content Server:	Knowledge Center CS16

Ferdinand Prantl

How did you get the ticket? Please, post the complete testing page here.

I tested the code from my post above with jQuery 3 and CS 16.2.2. You were correct to disable the jQuery request body processing, if multiplart form data is used. I had to add the two bold lines to the last statement in the upload() method:

        return $.ajax({          type: 'POST',          url: '<CGI URL>/api/v1/nodes',          data: formData,          processData: false,          contentType: false,          headers: {            otcsticket: '...'          }        });

It started working with this change.

If you want to post category attributes too, you can have a look at this post: https://developer.opentext.com/awd/forums/questions/15219955#r15220124.

Matthew Barben

I Agree with Ferdinand, you need wrap your upload request in a FormData object. I created an example ages ago (https://github.com/anvilation/ContentServerUpload) and the only other thing I added was a line to fix the local file name that was being used in the upload:

filename = filename.split('/').pop().split('\\').pop();

yaronlu

Hi, and thanks for the fast reply.

I applied the solution you suggested and it worked well with OTCSTICKET (using user and password).

But when I changed the authentication to OTDSTICKET (SSO),

The Authentication and "displayDocuments" functions are working fine.

The problem is with the upl_file (that was working well with OTCSTICKET).

It is still returning "400 - Bad Request".

I dont understand what is wrong with the ajax structure (it is the same as in the "displayDocuments" function).

BTW i tried with and without xhr.overrideMimeType("multipart/form-data") and did not work.

I will appriciate some working example for OTDSTICKET (SSO)

Thanks

Yaron

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="Scripts/jquery-3.2.1.min.js"> </script>

    <title>Document Upload</title>
    

    <script>

    // Sample Data
    var sampleData = {
    folder: 178786, //Folder
    document: 0, //Document
    user: "otadmin@otds.admin", //username
    password: "livelink", //password
    url: "http://[My_CS_Server]/otcs/llisapi.dll/api/v1",
    otdsurl : "http://[My_CS_Server]:8080/otdsws/rest/authentication/headers"
    };
    var strTicketType = "OTDSTicket";
    var authToken = null;

    $(document).ready(function() {
         authenticate(sampleData.otdsurl, sampleData.url, sampleData.folder);
    });

    //Authenticate OTDS
    function authenticate(authurl,url, folder) {


        $.ajax({
            type: "GET",
            url: authurl,
            dataType: "json",
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                authToken = data.ticket
                displayDocuments(url, folder, data.ticket)
            },
            error: function () {
                var error = "Invalid username/password specified";
                $('#output').text(error);
            }
        });
    }

function authenticate_old (url, user, pass, folder){

    var authurl = url + '/auth';
    $.ajax({
    type: "POST",
    url: authurl,
    data: {
    username: user,
    password: pass
    },
    success: function(data) {

        authToken = data.ticket
    displayDocuments (url, folder, data.ticket)
    },
    error: function() {
    var error = "Invalid username/password specified";
    $('#output').text(error);
    }
    });
    }

    // return documents
    function displayDocuments (url, folder, token){
        var url = url + '/nodes/' + folder + '/nodes';

    $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    beforeSend: function (request) {
        request.setRequestHeader(strTicketType, authToken);
    },
    success: function(data) {
    renderDocuments(data.data);
    },
    error: function(err) {
    var error = 'an error occured returning Folder information';
    $('#output').text(error);
    }
    });

}

    //render documents
    function renderDocuments (result){
    var resultLength = result.length,
    folderData = $('#folderData'),
    message = $('<p><Target folder Data Returned/p>');folderData.find('tbody').empty();if (resultLength === 0) { $('#supportingDocuments').html('<p class="lead">No Supporting Information Uploaded</p>'); } else { var document = ""; for (i = 0; i < resultLength; i++) { document = document + '    <tr><td><img src=' + result[i].icon + ' border=0 alt=' + result[i].mime_type + ' /></td>' + '<td>' + result[i].name + '</td>' + '<td>' + result[i].size_formatted + '</td></tr>';
    }
    folderData.find('tbody').append(document);
    }
    }

    function upl_file() {
        var oFile = document.getElementById('supportingDocument').files[0];
        var filename = oFile.name,
        url = sampleData.url + '/nodes/',
        formEl = $(this),
        fd = new FormData();// Create FormData Object

filename = filename.split('/').pop().split('\\').pop();

        fd.append("type", "144");
        fd.append("parent_id", sampleData.folder);
        fd.append("name", filename);
        fd.append("file", oFile);

        $.ajax({
            type: "POST",
            url: url,
            data: fd,
            contentType: false,
            processData: false,
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            beforeSend: function (xhr) {
                // Add the ticket from the Autheticate function to the request header.
                xhr.setRequestHeader(strTicketType, authToken),
                xhr.overrideMimeType("multipart/form-data")
            }
        }).done(function (data) {
            $('#output').text(JSON.stringify(data));
            displayDocuments(sampleData.url, sampleData.folder, authToken);
            formEl.replaceWith(formEl = formEl.clone(true));
        }).fail(function (request, statusText) {
            $('#output').text(statusText);
        });
    }

</script>
</head>
<body>

    <div class="container">
        <div class="page-header">
            <h1>Uploading Document to OpenText Content Server <small>Using jQuery</small></h1>
        </div>
        <div class="row document">
            <div class="col-sm-12">
                <table class="table" id="folderData">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Size</th>

                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

</div>

        </div>

        <hr />
        <div class="row document">
            <div class="col-sm-4">
                <p class="lead">Upload a document to a folder</p>
                <div id="supportingDocuments"></div>
                <div class="form-group">
                    <input type="file" name="Supporting Document" id="supportingDocument" class="form-control">
                    <p class="help-block">Upload Supporting Document</p>
                </div>
            </div>
            <div class="col-sm-8">

            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col-sm-8">
                <p class="lead">Output</p>
                <div class="well" id="output">

                </div>
            </div>
        </div>

    </div>
    <button onclick="upl_file()">upload the file</button>

</body>
</html>

yaronlu

Hi Ferdinand ,

I uploaded the entire page.

Can you please review the function upl_file, and give me some guidance why it is only working with OTCSTicket,

while all the other functions work fine with OTDSticket?

Thanks,

Yaron

Jeremy Pedro

Any update on this?

yaronlu

Hi,

After implementing Ferdinand's instructions from this thread:

https://knowledge.opentext.com/knowledge/cs.dll?func=ll&objId=69387673&objAction=viewincontainer&ViewTopicsByReply&ListView&ListViewID=69387673

I got a more descriptive error than just "bad request".

It seems that I was alredy on OTDS session, its just that I did not have the credentials to the target folder.

Hope it helps someone.

yaronlu

Hi,

Is there a way to upload multiple files with this method, or do I have to run this function in a loop?

Thanks

I am looking for something like this code (please refer only to lhe files loop):

var oAttrData = CreateCatAttrJson();
   for (i = 0; i < totalFiles; i++) {
                            file = document.getElementById("flUploaded").files[i];
                            formData.append("file", file);

                            var bodyData = {
                            type: 144,
                            parent_id: strParentNodeID,
                            name: file.name,
                            roles: oAttrData
                            };
       formData.append("body", JSON.stringify(bodyData));

}

                        $.ajax({
                            type: "POST",
                            url: baseresturl + "nodes",
                            data: formData,
                            contentType: false,
                            processData: false,
                            crossDomain: true,
                            xhrFields: {
                                withCredentials: true
                            },
                            dataType: "json",
                            beforeSend: function (request) {
                                request.setRequestHeader(strAuthMethod, ticket);
                                request.overrideMimeType("multipart/form-data")
                            },
                            success: function (response) {
                                $("#dvStatus").html("<span style='directio

appuGmail

Is there a need to use REST for your solution.There is actually a comparison chart that OT has published that lists that B2B (I read that as heavy activities) to be better suited by CWS(SOAP based).

Most of the Industry bulk loaders(FME,OTIC all use SOAP under the covers).REST in most simple livelink ways are just requests to the LL server so you will have better performance aspects if you have your database tuned,your threads tuned and such like.I am not saying REST is inferior or SOAP is superior.Most new functionality is being rolled out by OT as REST so maybe this is the better API. Bulk uploads always involves creating the nodes and adding files although SOAP has some short cut methods.

..... appnair appunair( Livelink Rocks )

Well, if I called the wrongnumber, why did you answer the phone?
James Thurber, New Yorker cartoon caption, June 5, 1937

On Wed, Oct 18, 2017 at 7:59 AM, eLink Entry: Content Server Development Forum <development@elinkkc.opentext.com> wrote:

Uploading a new document using the REST API 2 2 Posted byLulay, YaronOn 10/18/2017 08:57 AM

Hi,Is there a way to upload multiple files with this method, or do I have to run this function in a loop?ThanksI am looking for something like this code (please refer only to lhe files loop):var oAttrData = CreateCatAttrJson();
   for (i = 0; i < totalFiles; i++) {
                            file = document.getElementById("flUploaded").files[i];
                            formData.append("file", file);

                            var bodyData = {
                            type: 144,
                            parent_id: strParentNodeID,
                            name: file.name,
                            roles: oAttrData
                            };
       formData.append("body", JSON.stringify(bodyData));                        }


                        $.ajax({
                            type: "POST",
                            url: baseresturl + "nodes",
                            data: formData,
                            contentType: false,
                            processData: false,
                            crossDomain: true,
                            xhrFields: {
                                withCredentials: true
                            },
                            dataType: "json",
                            beforeSend: function (request) {
                                request.setRequestHeader(strAuthMethod, ticket);
                                request.overrideMimeType("multipart/form-data")
                            },
                            success: function (response) {
                                $("#dvStatus").html("<span style='directio
[To post a comment, use the normal reply function]
Topic: Uploading a new document using the REST API.
Forum: Content Server Development Forum
Content Server: Knowledge Center CS16

yaronlu

Thanks for the fast response, Appnair.

I aready use CWS for bulk uploading and its great.

My assignment is to allow users also to upload 2 or 3 files in one button click .

It is working great with one file.

I believe I can run a loop on the rest call, according to the nuber of files uploaded.

But I am asking if there is a way to upload few files in only one ajax call.

Thanks