Editor file upload produces "Can't find variable: Exception" datatables.min.js:315:211

ekkeroth

Dear all,
for some reasons I have difficulties with the file upload feature of Editor 1.9.2.
I am using Datatables 1.10.20-Bootstrap4 and jQuery 3.4.1.
I used the regular Editor file upload example.

        Field::inst( 'image' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst($_SERVER['DOCUMENT_ROOT'].'/LRE/php/Helpers/itrack/php/itrackfiles/__ID__.__EXTN__' )
                ->db( 'system_issues_files', 'id', array(
                    'filename'    => Upload::DB_FILE_NAME,
                    'filesize'    => Upload::DB_FILE_SIZE,
                    'web_path'    => Upload::DB_WEB_PATH,
                    'system_path' => Upload::DB_SYSTEM_PATH
                ) )
                ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) ) ),

the JSON response after loaded datatables is:

{"data":[{"DT_RowId":"row_1","id":"1","subject":"test","districtid":"163","region":"2","area":"dLRev","remarks":"no remarks, but now there are","response":"test and more and more","createdby":"ekke","createdat":"2020-04-08 12:29:09","editedby":"ekke","editedat":"2020-04-08 12:29:09","image":"1","active":"1"},{"DT_RowId":"row_2","id":"2","subject":"wrong colour","districtid":"192","region":"4","area":"mobile","remarks":"some businesses do not show a balance","response":"test","createdby":null,"createdat":"2020-04-08 11:03:28","editedby":null,"editedat":"2020-04-08 11:03:28","image":null,"active":"0"}],"options":[],"files":{"system_issues_files":{"1":{"id":"1","filename":"logo-0.jpg","filesize":"40","web_path":"..\/..\/..\/uploads\/logo-0.jpg","system_path":"\/Applications\/MAMP\/htdocs\/gis\/OL212\/LRE\/uploads\/logo-0.jpg"}}}}

When editing the record with Editor and after clicking on the "Upload" button the error "Can't find variable: Exception" with a reference to datatables.min.js:315:211

                throw new Exception("Upload feature cannot use `ajax.data` with an object. Please use it as a function instead.");

is shown.

The Network XHR response "blob:http://localgis....." shows the correct selected image.

What am I missing?

allan

Hi,

Could you show me your client-side Editor initialisation please?

Also I think the throw new Exception should actually be throw new Error - that is something that has already been fixed, and will be included in Editor 1.9.3. The error message:

"Upload feature cannot use ajax.data with an object. Please use it as a function instead."

should have been shown on the console instead of the error about the exception. That error is why I'd like to see your client-side code.

Regards,
Allan

ekkeroth

Dear Allan,

this is the editor initialisation:

editor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'php/table.itrack.php',
            type: 'POST',
            data: {table: tmptable}
            },
        table: '#itrack',
        fields: [
            {
                label:     "active:",
                name:      "active",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ],
                unselectedValue: 0
            },
            {
                "label": "Subject:",
                "name": "subject"
            },
            {
                "label": "Area:",
                "name": "area"
            },
            {
                    name:  "region",
                     type: "select2",
                     label: "Select Region",
                     fieldInfo: "Selecting a Region provides the Districts of this Region",
                     options: loadRegionDistrict("area_region"),
                     opts:
                        {
                         theme: "classic",
                         tags: true,
                         placeholder: "Select Region",
                         allowClear: false,
                        }
                },
                {
                    name:  "districtid",
                     type: "select2",
                     label: "Select District",
                     fieldInfo: "Select a District from the above Region",
                     opts:
                        {
                         theme: "classic",
                         tags: true,
                         placeholder: "Select District",
                         allowClear: false,
                        }
                },
            {
                label: "Remarks:",
                name:  "remarks",
                type:  'textarea',
                attr: {
                    placeholder: "Please enter a comment here"
                }
            },
            {
                label: "Response:",
                name:  "response",
                type:  'textarea',
                attr: {
                    placeholder: "Please enter a response to the issue here"
                }
            },
            {
                label: "Select Screenshot:",
                name:  "image",
                type:  'upload',
                display: function ( file_id ) {
                     return '<img src="'+table.file( 'system_itrack_files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No Screenshot'
            }
        ]
    } );

and this is the table initialisation:

    table = $('#itrack').DataTable( {
        responsive: true,
        select: true,
        paging: false,
        scrollY: 500,
        ajax: 'php/table.itrack.php',
        columns: [
            {   // Responsive control column
                data: null,
                defaultContent: '',
                className: 'control',
                orderable: false
            },
            {
                "data": "id"
            },
            {
                data:   "active",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return (data == 0) ? '0' : '1';
                },
                className: "dt-body-center"
            },
            {
                "data": "subject"
            },
            {
                "data": "districtid"
            },
            {
                "data": "region",
                "visible": false
            },
            {
                "data": "area"
            },
            {
                "data": "remarks"
            },
            {
                "data": "response"
            },
            {
                "data": "createdby",
                orderable: false
            },
            {
                "data": "editedby",
                orderable: false
            },
            {
                data: "image",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor.file( 'system_itrack_files', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            }
        ],
         rowCallback: function ( row, data, index ) {
//           console.log('rowCallback '+editColumn);
            $('input.editor-active', row).prop( 'checked', data.active == 1 );
        }
    } );

allan

Perfect - thank you. Replace data: {table: tmptable} with:

 data: function (d) {
   d.table = tmptable;
 }

and that should do the job.

Regards,
Allan

ekkeroth

Dear Allan,
Thank you! The upload works now, however I get immediately after the upload the error message:

Unknown file id 2 in table system_issues_files

with a reference to datatables.min.js:106 and to my editor initialisation (line 75 above):

    return '<img src="'+table.file( 'system_issues_files', file_id ).web_path+'"/>';

allan

What is the response from the server to the JSON upload please?

Thanks,
Allan

ekkeroth

{"data":[],"files":{"system_issues_files":{"9":{"id":"9","filename":"Bildschirmfoto 2013-02-27 um 14.00.01.png","filesize":"8589","web_path":"\/LRE\/php\/Helpers\/itrack\/php\/itrackfiles\/9.png","system_path":"\/Applications\/MAMP\/htdocs\/gis\/OL212\/LRE\/php\/Helpers\/itrack\/php\/itrackfiles\/9.png"}}},"upload":{"id":"9"}}

ekkeroth

this is the schema for the system_issues_files where the file() API is stored:

CREATE TABLE `system_issues_files` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `filename` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `filesize` int(10) DEFAULT NULL,
  `web_path` varchar(250) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `system_path` varchar(250) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

and this is the table with the image field:

CREATE TABLE `system_issues` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `subject` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `districtid` int(3) DEFAULT NULL,
  `region` int(3) DEFAULT NULL,
  `area` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `remarks` mediumtext COLLATE utf8mb4_unicode_ci,
  `response` mediumtext COLLATE utf8mb4_unicode_ci,
  `createdby` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `createdat` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `editedby` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `editedat` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
  `active` int(1) DEFAULT NULL,
  `image` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

and this is the Summary for the BLOB:

Summary
URL: blob:http://localgis.local/1922c90c-44f4-49fa-b4c3-35995903f3de
Status: 200 OK
Source: Network
Initiator: 
datatables.min.js:318

allan

Thank you - that actually all looks correct. Are you able to give me a link to your page so I can trace it through please? If you don't want to make it public, send me a PM by clicking my name above and then "Send Message".

It might also be interesting to see the result from modifying your render function for the image in the Editor initialisation to be:

                display: function ( file_id ) {
                     console.log('File id', JSON.stringify( file_id, table.files('system_itrack_files')));
                     return '<img src="'+table.file( 'system_itrack_files', file_id ).web_path+'"/>';
                },

Thanks,
Allan

ekkeroth

Thanks Allan,
I sent you a PM regarding this issue and access to the page.

allan

Thanks - I've just sent a reply to your PM.

Allan