File upload in datatables editor

File upload in datatables editor

aschippersaschippers Posts: 22Questions: 8Answers: 3

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,627Questions: 1Answers: 10,090 Site admin

    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

  • aschippersaschippers Posts: 22Questions: 8Answers: 3
    Answer ✓

    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);
                    },
                }
            ]
        });
    
This discussion has been closed.