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

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

ekkerothekkeroth Posts: 19Questions: 6Answers: 0

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?

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • ekkerothekkeroth Posts: 19Questions: 6Answers: 0

    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 );
            }
        } );
    
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

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

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

    and that should do the job.

    Regards,
    Allan

  • ekkerothekkeroth Posts: 19Questions: 6Answers: 0

    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+'"/>';
    
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

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

    Thanks,
    Allan

  • ekkerothekkeroth Posts: 19Questions: 6Answers: 0
    edited April 2020
    {"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"}}
    
  • ekkerothekkeroth Posts: 19Questions: 6Answers: 0

    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
    
    
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • ekkerothekkeroth Posts: 19Questions: 6Answers: 0

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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

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

    Allan

This discussion has been closed.