File upload in datatables editor

aschippers

Hello Allan,

Although, I'm working around the problem at the moment (i think it's not a showstopper), I think i found a few bugs when using the file upload part of the editor.

Assuming this code, when doing a bubble edit on - for example 'art_code', it does a correct post
When doing this on the document field (upload), the ID is missing and based on this code, the URL is wrong.

When adding an ajax field within the upload field definition, it works (although still the ID field is missing).
When making a separate upload datatable thing, it seems to work, but it also doesn't provide a valid id field.

Below is some code with comments

    supplier_orders_editor = new $.fn.DataTable.Editor ({
        ajax: {
            create: {
                url: $('#supplier_orders').data('source'),
                type: 'POST'
            },
            edit: {
                url: $('#supplier_orders').data('source'),
                type: 'PUT'
            },
            remove: {
                url: $('#supplier_orders').data('source'),
                type: 'DELETE'
            }
        },
        table: '#supplier_orders',
        idSrc: 'id',
        data: 'id',
        fields: [ {
                name: 'id',
                type: 'hidden'
            }, {
                name: 'art_code',
                data: 'article.art_code',
                type: 'text',
                label: $('#art_code').html()
            },{
                name: 'art_description',
                data: 'article.art_description',
                type: 'text',
                label: $('#art_description').html()
            }, {
                name: 'document',
                label: $('#document').html(),
                type: 'upload',
                clearText: "Clear",
                noImageText: 'Not a file Yet.'
             }
        ]
    });

The short version, to exclude all possible errors only gives a valid post with a short ajax URL

    supplier_orders_upload_editor = new $.fn.DataTable.Editor ({
        ajax:  $('#supplier_orders').data('source'),
        table: '#supplier_orders',
        idSrc: 'id',
        data: 'id',
        fields: [ 
            {
                name: 'document',
                label: $('#document').html(),
                type: 'upload',
                clearText: "Clear",
                noImageText: 'Geen file'
            }
        ]
    });

When uploading a file from a bubble edit on the last one, I see the following post:

Started POST "/supplier_orders/3.json" for ::1 at 2016-11-17 16:26:13 +0100
Processing by SupplierOrdersController#json as JSON
  Parameters: {"uploadField"=>"document", "upload"=>#<ActionDispatch::Http::UploadedFile:0x007fbdc4022b08 @tempfile=#<Tempfile:/var/folders/37/qjn0mbgj2z532_flny2wq1w00000gp/T/RackMultipart20161117-99830-r0n2g9.pdf>, @original_filename="Aangemaakte order voor xxx.pdf", @content_type="application/pdf", @headers="Content-Disposition: form-data; name=\"upload\"; filename=\"Aangemaakte order voor xxx.pdf\"\r\nContent-Type: application/pdf\r\n">, "mx_order_id"=>"3"}

mx_order_id is in the url, so that's correctt. But I expected to see also an id field for the row, edited.

allan

data: 'id',

There is no such option in Editor at the top level.

When doing this on the document field (upload), the ID is missing and based on this code, the URL is wrong.

In what way is it wrong- I don't quite understand I'm afraid? The upload Ajax call won't submit information about the row being edited - only the file being uploaded.

Thanks,
Allan

aschippers

I finally made a global variable (row_id)
and within the field defintion, I set this one.

    var supplier_orders_upload_editor;
    var row_id;
  
    supplier_orders_upload_editor = new $.fn.DataTable.Editor ({
        ajax: $('#supplier_orders').data('upload'),
        table: '#supplier_orders',
        idSrc: 'id',
        fields: [ 
            {
                name: 'document',
                label: $('#document').html(),
                type: 'upload',
                clearText: "Clear",
                noImageText: 'Geen file',
                ajaxData: function(fd) {
                    fd.append( 'document_id', row_id);
                },
            }
        ]
    });