Datatables file api() issue

loloski

Hi Everyone,

Please bare with me i'm not a native english speaker, so i put some code snippet to illustrate my problem by the way i'm not using PHP/.NET server side scripting library that comes from datatables.

Basically the problem is during update file() api can't see the return server response from my server leads to

table.file(...) is undefined

file upload data field split into two ajax request one for the actual upload of picture and another one for the updating of the record itself.

Datatables Editor Part Declaration Section

var editor = new $.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url:  '/api/ordersystem/joborder/add',
                contentType: 'application/json',
                        data: function ( data ) {
                        return JSON.stringify( data );
                }
            },
            edit: {
                type: 'POST',
                url:  '/api/ordersystem/joborder/update',
                contentType: 'application/json',
                        data: function ( data ) {
                        return JSON.stringify( data );
                }
            },
            remove: {
                type: 'DELETE',
                url:  ''
            }
        },
       table: "#joborder",
        idSrc: "transId",
        fields: [

                label: "Photo",
                name: "image",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+table.file('files',file_id ).web_path+'"/>';
                }, ajax: {
                        type: "POST",
                        url: "/api/management/photo/upload"
                },ajaxData: function(fd) {
                                fd.append('transId', editor.field('transId').val());
                                fd.append('fileId', editor.field('image').val());
                },
                clearText: "Clear",
                noImageText: 'No image'
            }]

Datables (Tables Part)

 var table = $('#joborder').DataTable( {
        dom: "Bflrtip",
        responsive: true,
        colReorder: true,
        stateSave: true,
        "processing": true,
        "serverSide": true,
        "ajax": {
                "url": "/api/ordersystem/joborder/listing",
                "dataType": "json",
                "type": "POST",
                "cache": false,
                contentType: 'application/json',
                        data: function ( data ) {
                        return JSON.stringify( data );
                }
        },
        "columns" : [
                        {
                                data: "image",
                                searchable:false,
                                render: function ( file_id ) {
                                    // for debugging purposes 
                                    console.log(JSON.stringify(table.file( 'files', file_id )));
                                    return file_id ?
                                        '<img class="img-circle" height="64" width="64" src="'+table.file( 'files', file_id ).web_path+'"/>' :
                                        null;
                                },
                                defaultContent: "No photo",
                                title: "Photo"
                            }]

During 1st phase upload picture with POST method on /api/management/photo/upload the picture were displayed on modal window no problem here.

{
    "data": [],
    "files": {
        "files": {
            "40": {
                "id": "40",
                "filename": "gold.jpg",
                "filesize": "91795",
                "web_path": "\/gallery\/uploads\/images\/40.jpg",
                "system_path": "\/var\/www\/html\/gallery\/uploads\/images"
            }
        }
    },
    "upload": {
        "id": "40"
    }
}

2nd Phase update the actual record '/api/ordersystem/joborder/update', the actual update has been sent no problem here but

displaying the image on tables i encounter table.file(...) is undefined, i'm pretty sure the problem lies with this code
table.file( 'files', file_id ).web_path the return JSON object is correct afaic.

    "data": [{
        "transId": 40,
        "customerId": "11",
        "celebrantName": "John Doe",
        "celebrantAge": "32",
        "deliveryAddress": "Fraser Place Manila",
        "deliveryDate": "2016-03-26 03:11:00",
        "orderDate": "2016-03-25",
        "amount": "500.00",
        "remark": "n\/a",
        "deposit": "0.00",
        "deliveryFee": "0.00",
        "finalPay": "0.00",
        "image": "40"
    }],
    "options": [],
    "files": {
        "files": {
            "40": {
                "id": 40,
                "filename": "gold.jpg",
                "filesize": 91795,
                "web_path": "\/gallery\/uploads\/images\/40.jpg ",
                "system_path ": "\/var\/www\/html\/ gallery\/uploads\/images"
            }
        }
    }
}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

loloski

Thanks in advance

loloski

https://debug.datatables.net/uziwen debug datables link

loloski

I hope splitting the ajax call into two parts will not be the issue, because the file upload example most on the forum deals with a single ajax call for image upload and record update :)

loloski

https://www.datatables.net/forums/discussion/30123/editor-upload-file
I think i have a similar case :)

allan

The error suggests that the table variable might be out of scope. Could you link to the page so I can take a look and debug it live please? Failing that, the full Javascript would be useful so I can see its structure.

Thanks,
Allan

loloski

Hi Allan,

Thanks for looking into this, as requested please see full javascript in the link below
https://jsfiddle.net/gwfn40bg/

loloski

by the way I can sent you the link if needs to be but how can I send this to you privately?

loloski

by the way, just to let you know live.datables.net I encounter 503 maybe after the maintenance yesterday?

loloski

curl -vvv live.datatables.net
* Rebuilt URL to: live.datatables.net/
* Trying 104.24.6.8...
* Connected to live.datatables.net (127.0.0.1) port 80 (#0)

GET / HTTP/1.1
Host: live.datatables.net
User-Agent: curl/7.43.0
Accept: /

HTTP/1.1 503 Service Unavailable
Date: Mon, 28 Mar 2016 12:21:49 GMT
Content-Type: text/html; charset=iso-8859-1
Content-Length: 428
Set-Cookie: __cfduid=ddcf5e58038ef4b9a9aadb5ba5d4175c81459167709; expires=Tue, 28-Mar-17 12:21:49 GMT; path=/; domain=.datatables.net; HttpOnly
Server: cloudflare-nginx
CF-RAY: 28ab0b479fb22a61-SEA
Connection: close

!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
html><head>
title>503 Service Unavailable</title>
/head><body>

Service Unavailable

The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

Additionally, a 503 Service Unavailable error was encountered while trying to use an ErrorDocument to handle the request.

</body></html>
* Closing connection 0

allan

Oops - thanks for letting me know about that. Its back up now!

Regarding a private message - click my name above and then the "Send message" button.

Thanks,
Allan

allan

Thanks for the link!

The error I get in the Chrome console is:

joborder.js:155 Uncaught TypeError: Cannot read property 'web_path2' of undefined

So I don't think the error is that the file() method doesn't exist, which I had assumed above, but rather than there is no information about the file of the file_id given.

It isn't actually occurring on the row that was edited, but rather every other row! The upload JSON contains only the JSON for the uploaded file, which is overwriting the full file information. At the moment the files parameter needs to return the information for all available files, not just the newly uploaded file.

That is a limitation I'm aware of and it will be addressed in 1.6.

Regards,
Allan

loloski

Hi Allan, thanks for concise explanation i'll try to refactor my code

loloski

whoops, i think i misread your post, can i do something on the server side to workaround this limitation? or any suggestion please

loloski

I think I got you now allan, you mean to say in order for me to fixed this i have to create my own implementation of file api (at the moment pre 1.6) to return all the available file information as you mentioned, or as a workaround I should disable calling file api function on render function for the time being.

fair enough not a show stopper on my pet project, i'll try to come up on a fixed if I can :)

Thanks again

loloski

render: function ( file_id ) {
                                        //console.log(JSON.stringify(table.file( 'files', file_id )) + " " + file_id);
                                    return file_id ?
                                        '<img class="img-circle" src="/gallery/uploads/timthumb.php?src=images/'+file_id+'.jpg&q=100&h=48&w=48"/>' :
                                        null;
                                }

As a workaround I access the image directly and bypassing calling file api function.

Again thanks allan for your great help

I this issue will served as a placeholder for file API improvement :)

allan

You shouldn't need to create your own file() methods - you just need to have the server return the JSON details for all files when the new file is uploaded.

Good to hear you have a workaround now though!

Allan

loloski

Thanks a lot allan much appreciate it.