uploadMany - not sure I am using it right

jango

Setup first...

Editor:

    editor = new $.fn.dataTable.Editor( {
        table: "#events",
        ajax: {
            url: URL_EVENT_DT_EDIT,
            method: "POST",
            data: function ( d ) {
                d.csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val();
            }
        },
        fields: [
            {
                label: "Event Type",
                name: "event.event_type",
                type: 'select2',
                opts: {
                      ajax: {
                        url: URL_EVENT_TYPE_DS,
                        dataType: 'json',
                        method: 'GET',
                        data: function (params) {

                            var queryParameters = {
                                term: params.term
                            }
                            return queryParameters;
                        },
                        processResults: function (data) {
                            return {
                                results: $.map(data.items, function (item) {
                                    return {
                                        text: item.text,
                                        id: item.id
                                    }
                                })
                            };
                        }
                      }
                }
            },
            {
                label: "Event Date",
                name: "event.event_date",
                type:  'datetime',
                format: 'DD-MMM-YYYY',
                def:   function () { return new Date(); }
            },

            {
                label: "Notes:",
                name: "event.event_notes",
                type: 'textarea'
            },
            {
                label: "Attachments:",
                name: "files[].id",
                type: "uploadMany",
                ajax: {
                    url: URL_UPLOAD_ATTACHMENT,
                    dataType: 'json',
                    method: 'POST'
                },
                ajaxData: function(a){
                    a.append("csrfmiddlewaretoken", $('[name="csrfmiddlewaretoken"]').val());
                },
                display: function (fileId, counter) {
                    console.log(events_table.files('files'));
                    return '<a href="' + events_table.file( 'files', fileId ).url + '">' + events_table.file( 'files', fileId ).name + ' (' + events_table.file( 'files', fileId ).size + ')' + '</a>';
                }
            }
        ]
    });

Datatable:

var events_table = $('#events').DataTable({
        columns: [
            {
              data: "event.event_date",
              visible: true
            },
            {
              data: "event.event_type",
              visible: true
            },
            {
              data: "event.event_notes",
              visible: true
            },
            {
              data: "files",
              visible: true,
              render: function( d ) {
                if (d.length == 0){
                    return "No attachments."
                } else {
                    list = '<ul class="attachments">';
                    for (var i=0; i < d.length; i++){
                        list += '<li><a href="' + d[i].url + '">' + d[i].name + ' (' + d[i].size + ')' + '</a></li>';
                    }

                    list += '</ul>';
                    return list;
                }
              }
            }
        ],
        select: true,
        "sDom": '<"top"Bp>rt<"bottom"i><"clear">',
        order: [[0, "desc"]],
        ajax: {
            url: URL_EVENT_DT,
            method: "POST",
            data: function ( d ) {
                d.csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val();
            }
        },
        processing: true,
        serverSide: true,
        iDisplayLength: 25,
        bLengthChange: false,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit", editor: editor },
            { extend: "remove", editor: editor }
        ]
    });

The JSON I return from the server side on file upload is:

{  
   "files":{  
      "files":{  
         "7ced0032-e9c0-43a1-a632-4cee886deeb0":{  
            "url":"/media/user_1/2016/09/05/Resume_Formatted_22_Aug_2016_v2_8sH7P8N.pdf",
            "size":"147.4KiB",
            "id":"7ced0032-e9c0-43a1-a632-4cee886deeb0",
            "name":"Resume_Formatted_22_Aug_2016_v2_8sH7P8N.pdf"
         }
      }
   },
   "data":[  

   ],
   "upload":{  
      "id":"7ced0032-e9c0-43a1-a632-4cee886deeb0"
   }
}

The question: the above works when uploading just one file. When I try to upload a subsequent file, I get an error in the display function of the editor telling me that events_table.file( 'files', fileId ) is undefined.

However, if instead of returning one file in JSON above I return all files (including the file that was previously uploaded), everything seems to work.

When I look at JSON in the examples though, the backend only returns data of the most recently uploaded file, not for all the files so it seems to me that I am doing something incorrectly. It seems like whatever I return for the subsequent file overwrites Editor.files instead of being appended to it. Do you know why this could be happening?

allan

With Editor 1.5 your JSON data returned from an upload request needs to contain the information for all files, not just the newly uploaded file.

Its a bit of a pain that and something that 1.6 is going to address.

Regards,
Allan