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

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

sarath_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0
edited July 2018 in Plug-ins

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"
}]
}],

Answers

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0
    edited July 2018

    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);
        }
    
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    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"
    }]
    }],
    
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0
    edited July 2018

    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.

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

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

    will post back once tested..

  • sarath_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    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"
                }
            }
        }
    }
    
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    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_surisettysarath_surisetty Posts: 54Questions: 13Answers: 0

    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.

This discussion has been closed.