file upload seems to NOT go thru the ajax data function

compucon

In the editor setup, I have set the ajax and ajax.data as follows:

ajax: {
    url: ajax_url,
    type: 'POST',
    data: function (d) {
        d.datatable_action = d.action;
        d.action = 'ticket' ;
        d.subaction = 'images';
    }
}

I need to do it this way because it is part of a Wordpress system which everything is routed thru the central ajax program.

I used this method to get it properly routed to my handler which in there will set the "action" variable back to the correct action.

However, when I tried to use the uploadMany field types, it caused problems.

I have configured the Editor fields as follows:

{
    'label': 'Panel Symptom Photo:',
    'name': 'panel_symptom_photo.files',
    'type': 'uploadMany'
}

When I drag a file to do the upload, it does not do anything. I put on a 'preUpload' event listener to trap the ajaxData to check what is going on.

editor.on('preUpload', function (e, fieldName, file, ajaxData) {
    for (var pair of ajaxData.entries()) {
        console.log(pair[0]+': '+pair[1]) ;
    }
    return true;
})

And the following result was logged on the console:

action: upload
uploadField: panel_symptom_photo.files
upload: [object File]
datatable_action: undefined
action: ticket
subaction: images

Please note that there are TWO 'action' field in there, which the first one should be put into 'datatable_action'.

Please advise what should I do.

Thanks
Jim

compucon

Alright, found the problem and the workaround.

There seems to be several issues there:

1. The Editor.upload function in dataTables.editor.js uses FormData as the data strucutre instead of a simple Object.
2. The FormData is NOT passed to the ajax.data function as in the other ajax actions.
3. When the ajax.data function is called, it is expecting a value to be returned from the function instead of in-place changes of the data.
4. The returned data is appended to the original FormData making it not possible to change anything in there.

The following was done to get it to be more compatible with other ajax actions:

1. In dataTables.editor.js, from line 4283 to line 4295, it was changed to:

        if ( typeof ajax.data === 'function' ) {
            // var d = {};
            var ret = ajax.data( data );

            // Allow the return to be used, or the object passed in
            if ( ret !== undefined && typeof ret !== 'string' ) {
                data = ret;
            }

            // $.each( d, function ( key, value ) {
            //  data.append( key, value );
            //} );
        }

1. The data function was changed to:

    data: function (d) {
        if (d instanceof FormData) {
            d.set('datatable_action', d.get('action'));
            d.set('action', 'ticket') ;
            d.set('subaction', 'images') ;
            return d;
        } else {
            d.datatable_action = d.action;
            d.action = 'ticket' ;
            d.subaction = 'images';
        }
    }

Regards
Jim

compucon

Silly me!!

An alternate solution that does NOT involve change the distribution files is to use the 'preUpload' event handler, and modify the ajaxData before the actual submission.

Cheers

colin

Excellent, glad all sorted,

Colin