File upload cutom ajax function not populating table (Datatables Editor)

eisvidas

I am struggling to populate a table after uploading a file with an upload field.

I am using datatables Editor version 1.9.6 with a file upload field.

Within the file upload field, I have defined a custom ajax function that uses WordPress as an endpoint.

fields: [{
                label: "File:",
                name: "file",
                type: "upload",
                clearText: "Clear",
                noImageText: 'No image',
                processingText: "Processing",
                ajax: function (files) {
                    var formData = new FormData();

                    formData.append('nonce', ajaxnonce);
                    formData.append('action', 'smp_addfile');
                    formData.append('file', files[0]);


                    $.ajax( {
                        type: 'post',
                        url:  ajaxurl,
                        processData: false,
                        contentType: false,
                        data: formData,
                        dataType: "json",
                        success: function (response) {
                            console.log(response);
                        },
                        error: function (xhr, error, thrown) {
                            console.log(error)
                        }
                    } );
                },
                display: function (file_id) {
                    return '<img src="' + editor.file('files', file_id).filename + '"/>';
                }

The code above is working as far as sending the ajax request to the php endpoint, and the file is being uploaded as expected (the backend part is working fine). I have structured the return response as described here https://editor.datatables.net/manual/server

{
    "files": {
        "files": {
            "1": {
                "filename": "Screen Shot.png",
                "web_path": "\/upload\/1.png"
            }
        }
    },
    "upload": {
        "id": "1"
    }
}

However, I am having a problem getting the response to populate the table. I assume that because I am using a custom ajax function, I need to define some logic in the success callback to populate the table?

In the documentation, I have not seen any references to defining custom ajax logic for upload fields.

Would greatly appreciate any pointers!

Cheers

colin

That doesn't look like the response that DataTables would expect. It would be worth looking at this example here, and look at the "Ajax data" tab, as this will show what the client would need to receive.

Colin

eisvidas

Hi Colin

Many thanks for your fast reply

I may have misunderstood the context, but the above response I copied exactly from this page (the file upload section at the very bottom)
https://editor.datatables.net/manual/server

My workflow seems slightly different from the example you provided, as when the user adds the row with 'create' I am not triggering an ajax request, just appending the row of data in the frontend. I am only triggering ajax on file upload and on submission of the whole table (if that makes sense), i.e. the user keeps adding rows until the data entry is complete and then they submit all the data in the table within one request. Is it not possible to implement the workflow in this way?

colin

You can queue changes in Editor, see blog post here describing how to implement this - would that do the trick?

Colin

allan

I think the issue here is that Editor isn't being told that your custom Ajax upload is complete (when it does). So Editor just idles along in the "uploading" state forever.

When used as a function ajax (for upload) actually takes two parameters, the files being uploaded and a callback which should be given an array of file ids - e.g.:

 ajax: function (files, callback) {

and then:

                        success: function (response) {
                            console.log(response);
                            callback( ... );
                        },

Of course it isn't actually that easy I'm afraid... This method does not update the Editor file list (even if you pass in the same object that Editor sends back itself) - so editor.file(...) will not work without manually updating the Editor files table.

You could do that using:

$.each( json.files, function ( table, files ) {
    if ( ! $.fn.dataTable.Editor.files[ table ] ) {
        $.fn.dataTable.Editor.files[ table ] = {};
    }
    $.extend( $.fn.dataTable.Editor.files[ table ], files );
} );

which is basically what Editor does itself. Then pass in an array of ids to the callback function.

Allan

allan

I am only triggering ajax on file upload and on submission of the whole table (if that makes sense), i.e. the user keeps adding rows until the data entry is complete and then they submit all the data in the table within one request. Is it not possible to implement the workflow in this way?

That is not how our upload works. Nor is it how the implementation you have above works - since you are making an Ajax call on each upload action.

What you are looking for (sending the file information along with the main form) would require a custom upload field type I'm afraid.

Allan

eisvidas

That solved all the issues I had. Thanks for the clear explanation, Allan.