Datatable with uploadMany : uncaught exception: Unknown file table name:

sarath_surisetty

Hey allan
im trying to implement uploadMany,
->implemented add successfully with ajax.,but got issue with edit ,please see the below error

uncaught exception: Unknown file table name: propertyImages
code:

{
  label: "Images:",
  name: "propertyImages[].imageId",
  type: "uploadMany",
  ajax: 'propertyImage/add',
  display: function(imageId, counter) {
    return '<img src="' + propertyEditor.file('propertyImages', imageId).imagePath + '"/>';
  },
  noFileText: 'No images'
}

json data
for the table:

{
    "draw": 1,
    "recordsTotal": 3,
    "recordsFiltered": 3,
    "data": [{
      "propertyId": 7,
      "propertyFacing": "EAST",
      "active": "Active",
      "propertyImages": [{
        "imageId": 1,
        "imageName": "NO_IMAGE",
        "imageType": "jpeg",
        "imageSize": 0,
        "imagePat": "/propertyImages/NO_IMAGE"
}]
}],

allan

It means that on the server-side there is no Upload configured for the field called propertyImages[].imageId.

Can you show me your server-side code?

Thanks,
Allan

sarath_surisetty

hi allan
thanks for quick response, server-side is coded in java sprinboot..

@RequestMapping(value = "/list", method = RequestMethod.GET)
    public @ResponseBody DataTablesOutput<Property> list(@Valid DataTablesInput input) {
        LOGGER.info("input:"+input);
        DataTablesOutput<Property> propertyDataTable = new DataTablesOutput<Property>();
        propertyDataTable = propertyService.getPropertyList(input);
        
        LOGGER.info("op:"+propertyDataTable.getData());
        return propertyDataTable;
    }

Service:

public class PropertyServiceImpl implements PropertyService {

    @Autowired
    PropertyRepository propertyRepository;

    @Override
    public DataTablesOutput<Property> getPropertyList(DataTablesInput input) {
        return propertyRepository.findAll(input);
    }

allan

Ah - I see the issue now - thanks. It isn't actually a problem with the controller (well, it might be, but...), rather this call:

propertyEditor.file('propertyImages', imageId)

is resulting in the error because there is no information about files from propertyImages. When the JSON is loaded for the DataTable, it should have a files property for the files() method to work - documentation for that is here.

What is the JSON that is being loaded for your table at the moment?

Allan

sarath_surisetty

hi allan json data is :

{
    "draw": 1,
    "recordsTotal": 3,
    "recordsFiltered": 3,
    "data": [{
      "propertyId": 7,
      "propertyFacing": "EAST",
      "active": "Active",
      "propertyImages": [{
        "imageId": 1,
        "imageName": "NO_IMAGE",
        "imageType": "jpeg",
        "imageSize": 0,
        "imagePat": "/propertyImages/NO_IMAGE"
}]
}],

allan

Yes, that would do it. There is no files property so the file() method won't be able to find anything.

What do you want to show in the cell?

Allan

sarath_surisetty

want to show the images for editing,would like to delete or add more images if required.
seen similar issue over here https://datatables.net/forums/discussion/41397/uploadmany-editor-files-not-populating-on-standalone-editor but not able to understand where to keep the code for populating the table with script $.extend( Editor.files[ table ], files );

when i try below code no luck

 propertyEditor.on('initEdit',  function (e, json, data) {

         alert("yes1");
         var data = this.data();
         PropertyTable.rows( data ).every( function () {
                var node = this.node();
                var data = this.data();
                alert("yes");
                alert(SON.stringify(data.propertyImages));
                $.each( value.propertyImages, function ( table, files ) {
                    alert(table+" :: "+files);
                    $.extend( Editor.files[ table ], files );
                } );

                // ...
            } );
        } );

sarath_surisetty

i changed the json to below but still geting error : >! uncaught exception: Unknown file table name: files

{
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": [{
        "propertyId": 1,
        "propertyFacing": "WEST",
        "propertyLength": 10.0,
        "propertyWidth": 10.0,
        "propertyPrice": 10.0,
        "propertyLat": 12.21,
        "propertyLng": 12.22,
        "propertyRoadWidthFeet": 10.0,
        "propertyDescription": "est1",
        "active": "Active",
        "files": [{
            "fileId": 1,
            "imageName": "p1.jpg",
            "imageType": null,
            "imageSize": 226347,
            "imagePath": "src/main/resources/static/propertyImages/p1.jpg"
        }]
    }],
    "error": null
}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I'd expect something more like this:

{
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": [{
        "propertyId": 1,
        "propertyFacing": "WEST",
        "propertyLength": 10.0,
        "propertyWidth": 10.0,
        "propertyPrice": 10.0,
        "propertyLat": 12.21,
        "propertyLng": 12.22,
        "propertyRoadWidthFeet": 10.0,
        "propertyDescription": "est1",
        "active": "Active",
        "propertyImages": [ ... ]
    }],
    "error": null,
    "files": {
        "propertyImages": {
            "1": {
                "fileId": 1,
                "imageName": "p1.jpg",
                "imageType": null,
                "imageSize": 226347,
                "imagePath": "src/main/resources/static/propertyImages/p1.jpg"
            }
        }
    }
}

I.e. the files property is shared for all rows and an id can be looked up if needed.

Allan

sarath_surisetty

hi allan

thanks for the solutions, but can u suggest with which even i can modify the json data before binding to the edtior/table.

sarath_surisetty

hey allan i figured it out
it should be at aja-> "dataSrc": function ( d ) { ...

will post back once tested..

sarath_surisetty

hi allan i had manipulated data like below and now the table is not getting populated with data and im trying to implement uploadMany from long time not able to complete task, please save me .thanks in advance.

{
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": [{
        "propertyId": 1,
        "propertyFacing": "WEST",
        "propertyLength": 50,
        "propertyWidth": 50,
        "propertyPrice": 500,
        "propertyLat": 12.44,
        "propertyLng": 23.44,
        "propertyRoadWidthFeet": 40,
        "propertyDescription": "test1",
        "active": "Active",

        "propertyImages": [{
            "imageId": 1,
            "imageName": "sample1.jpg",
            "imageType": null,
            "imageSize": 83594,
            "imagePath": "src/main/resources/static/propertyImages/sample1.jpg"
        }]
    }],
    "error": null,
    "files": {
        "propertyImages": {
            "1": {
                "fileId": 1,
                "imageName": "sample1.jpg",
                "imageType": null,
                "imageSize": 83594,
                "imagePath": "src/main/resources/static/propertyImages/sample1.jpg"
            }
        }
    }
}

allan

Could you give me a link to your page so I can take a look please? You sholdn't need to use ajax.dataSrc at all with that JSON.

Thanks,
Allan

sarath_surisetty

hi allan

this is hosted locallay, i can send u the js and html code and ajax response.
->as i cannot manipulate data on server side, im trying to manipulate data to expected fomat suggested by you on client side.is there any way to manipulate data(including files) when data returned from ajax before biding to datatable.