Problem with editor and upload image since migration from version 1.9.6 to 2.4.1

slolo

Link to test case: Don't know how to create a link case for upload
Debugger code (debug.datatables.net): Don't know how to do it
Error messages shown: Uncaught Error: Unknown file table name: table_image
Description of problem:

Hello,

I have a problem with the "editor" component and the ability to upload images.
This code worked well with version 1.9.6 of the component.
Since I bought and migrated to version 2.4.1 I have an error on the display of the image.
The upload is done well, the database is correctly filled but at the end of the upload (before rendering the image), I have a javascript error:

display: function ( file_id ) {
    return '<img src="'+editor.file( 'table_image', file_id ).webPath+'"/>';
},

The error message shown in the console

Uncaught Error: Unknown file table name: table_image
jt http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    Ft http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    display http://localhost/test/test.php?action=edit&id=15:152
    set http://localhost/test/plugins/DataTables/datatables.min.js:55
    create http://localhost/test/plugins/DataTables/datatables.min.js:55
    Je http://localhost/test/plugins/DataTables/datatables.min.js:55
    success http://localhost/test/plugins/DataTables/datatables.min.js:55
    jQuery 6
    onload http://localhost/test/plugins/DataTables/datatables.min.js:55
    we http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    onload http://localhost/test/plugins/DataTables/datatables.min.js:55
    oe http://localhost/test/plugins/DataTables/datatables.min.js:55
    Je http://localhost/test/plugins/DataTables/datatables.min.js:55
    jQuery 8
    Je http://localhost/test/plugins/DataTables/datatables.min.js:55
    create http://localhost/test/plugins/DataTables/datatables.min.js:55
    _typeFn http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    O http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    st http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    st http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    R http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
    <anonymous> http://localhost/test/test.php?action=edit&id=15:186

Here is an example of my PHP code:

// Parameters given by ajax data
$folderGallery = 'custom-sub-folder/';  // Can be changed in my case in order to upload in sub-folders
$idGallery = 1;

// Create an array to hold variables to be used in the closure function.
$varArray = [
    "webPath" => 'uploads/',                                                // Web path to file
    "sysPath" => $_SERVER['CONTEXT_DOCUMENT_ROOT'] . 'uploads/',            // System path
    "folderGallery" => $folderGallery . ($folderGallery != "" ? "/" : "")
];

// DataTables PHP library
include( "../vendor/Editor/lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;
 
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'table_gallery', 'id' )
    ->fields(
        Field::inst( 'table_gallery.id' ),
        Field::inst( 'table_gallery.title' ),
        Field::inst( 'table_gallery.description' ),

        Field::inst( 'table_gallery.image' )
        ->setFormatter( Format::ifEmpty( null ) )
        
//      ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
        ->upload( Upload::inst( 
            function ( $file, $id ) use ( $varArray, $db ) {
                $filename = $id . "_" . $file['name'];
                if (!is_dir($varArray["sysPath"] . $varArray["folderGallery"])) {
                    mkdir($varArray["sysPath"] . $varArray["folderGallery"], 0755, true);
                }
                move_uploaded_file( $file['tmp_name'] , $varArray["sysPath"] . $varArray["folderGallery"] . $filename );

                $db->update(
                    'table_image', // Database table to update
                    [
                        "webpath" => $varArray["webPath"] . $varArray["folderGallery"] . $filename,
                        "systempath" => $varArray["sysPath"]  . $varArray["folderGallery"] . $filename
                    ],
                    ["id" => $id]
                );

                return $id;
            } )

            ->db( 'table_image', 'id', array(
                'filename'    => Upload::DB_FILE_NAME,
                'filesize'    => Upload::DB_FILE_SIZE,
                'mimetype'    => Upload::DB_MIME_TYPE,
                //'webpath'    => Upload::DB_WEB_PATH,
                //'systempath' => Upload::DB_SYSTEM_PATH
                'webpath'    => "",
                'systempath' => ""
            ) )

            ->dbClean( function ( $data ) {
                // Remove the files from the file system
                for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
                    unlink( $data[$i]['systempath'] );
                }
    
                // Have Editor remove the rows from the database
                return true;
            } )

            ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
            ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
        ),
    )
    ->leftJoin( 'table_image', 'table_image.id', '=', 'table_gallery.image' )
    ->where( 'table_gallery.id', $idGallery, '=')

    ->process( $_POST )
    ->json();

And the piece of javascript code

    $(document).ready(function() {

        var context = {};

        context.editorFields = 
            [
                {"label": "id", "name": "table_gallery.id", "def": "'.$id.'", "type": "hidden"},
                {"label": "title", "name": "table_gallery.title"},
                {"label": "Description", "name": "table_gallery.description", "def": ""},
                {"label": "Image:", "name": "table_gallery.image", "type": "upload", 
                    display: function ( file_id ) {
                        return '<img src="'+editor.file( 'table_image', file_id ).webPath+'"/>';
                    }
                }
            ]
        ;

        context.datatablesColumns = 
            [
                {"data": "table_gallery.id", "title": "Id"},
                {"data": "table_gallery.title", "title": "Title"},
                {"data": "table_gallery.description", "title": "Description"},
                {
                    "data": "table_gallery.image", "defaultContent": "No image", "title": "Image",
                    render: function ( data, type, row  ) {
                        return '<img src="' + editor.file('table_image', data).webPath + '" style="max-width: 100px; height: auto; max-height: 100%;" />';
                    }
                }
            ]
        ;

        ///////////////////////////////////////////////

        var editor = new DataTable.Editor({
            ajax: {
                'url' : 'server/test.php',
                'data' : function (d) {
                    d.idGallery = <?=$resGallery["id"]?>,
                    d.folderGallery = '<?=$resGallery["folder"]?>'
                }
            },
            table: '#table-content',
            i18n: gEditor_Language,
            fields: context.editorFields,
            display: 'bootstrap'
            , formOptions: {
                main: {
                    onBackground: false
                }
            }
        });

        var table = $('#table-content').DataTable({
            layout: gDataTablesObj.gDataTableLayoutFormat,
            select: true,
            ajax: {
                'url' : 'server/test.php',
                'data' : function (d) {
                    d.idGallery = <?=$resGallery["id"]?>,
                    d.folderGallery = '<?=$resGallery["folder"]?>'
                }
            },
            language: gDataTables_Language,
            columns: context.datatablesColumns,
            lengthMenu: [
                gDataTablesObj.gDataTablesPaginationOrder,
                gDataTablesObj.gDataTablesPaginationText
            ],
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
        
    });

---

I have 2 tables:

• The first one (table_gallery) for store informations about images (with following fiels)
  id title description image
• The second one (table_image) to store informations about upload (with following fiels)
  id fileName fileSize mimeType webPath systemPath

I used the examples provided in the source code of the "editor" component and it works fine. But when I look at the source code, I see that the examples use version 2.2.2 of the editor component.

Was there a change between version 2.2.2 and 2.4.1?

Let me know if you need more details and thanks in advance for your help.

I wish you a pleasant day.

allan

Hi,

Could you show me the JSON being returned by the server when the DataTable is loaded (i.e. the response from server/test.php)?

There shouldn't have been any breaking changes between 2.2.2 and 2.4.1. This example uses 2.4.0 (I must have forgotten to redeploy the site with the 2.4.1 release...).

Thanks,
Allan

slolo

Hello,

On the first page loading, tables are empty, so I have this for the server.php

{"data":[],"options":[],"files":[]}

And here is what I have in result of the server.php page when trying to upload an image:

{
    "data": [],
    "options": [],
    "files": {
        "table_image": {
            "7": {
                "id": 7,
                "filename": "photo-view.png",
                "filesize": 22699,
                "mimetype": "image\/png; charset=binary",
                "webpath": "uploads\/gallery\/7_photo-view.png",
                "systempath": "D:\/Wamp64\/www\/uploads\/gallery\/7_photo-view.png"
            }
        }
    },
    "upload": {
        "id": "7"
    }
}

And the file is correctly upload into the folder: "D:\Wamp64\www\uploads\gallery\

But the table "table_gallery" is still empty.

I can share you my code if you need it.

allan

Sorry, I'm going to ask more questions...

1. Tables are empty and then you upload a file and get the JSON returned above. Is that the point at which you get the alert() saying Unknown file table name: table_image?
2. What then happens if you were to reload the page? Does the initial load data include the file information in the JSON?

If you might be able to PM me a link to the page, that would be really useful.

Thanks,
Allan

slolo

Thanks for your answer.

I sent you a complete project in a private message that should help you reproduce the problem easily.

allan

Many thanks for the PM with the project. I tracked the issue to:

                render: function ( data, type, row  ) {
                    return '<img src="' + editor.file('table_image', data).webPath + '" style="max-width: 100px; height: auto; max-height: 100%;" />';
                }

You just need to check if data has a value before calling editor.file(...):

                    render: function ( data, type, row  ) {
                        return data
                            ? '<img src="' + editor.file('table_image', data).webPath + '" style="max-width: 100px; height: auto; max-height: 100%;" />'
                            : null;
                    }

You can see that in the example here.

The reason for this is that the table rendering function will be called, even if the data value is null (this allows it to be replaced with No image or similar. A null return will just be shown as an empty string.

Allan

slolo

Hello @allan,

I did as you suggested, but it didn't change the problem.

In reality the error message occurs on the following piece of code:

    {"label": "Image:", "name": "table_gallery.image", "type": "upload",
        display: function ( file_id ) {
            return '<img src="'+editor.file( 'table_image', file_id ).webPath+'"/>';
        }
    }

If I comment the display function or return null instead, I have no error when uploading the image (but I have not the image displayed of course) and the table_image is correctly filled with a new line.
But when I click on the create button I have the following error message:

{
    "cancelled": [],
    "data": [],
    "error": "An SQL error occurred: SQLSTATE[HY000]: General error: 1366 Incorrect integer value: '' for column 'id' at row 1",
    "fieldErrors": [],
    "ipOpts": [],
    "options": []
}

I'm sure this is a stupid mistake on my part, but I can't seem to find it.
Especially since it worked fine with version 1.9.6 of the Editor component (and DataTables 1.13.10).

allan

Ah - sorry, I missed one other thing. You have the Editor code being included from two different locations:

• plugins/DataTables/datatables.min.js
• vendor/Editor/js/dataTables.editor.js

It looks like loading the code a second time is causing interference - probably something to do with the global events.

Remove:

    <script type="text/javascript" src="vendor/Editor/js/dataTables.editor.js"></script>
    <script type="text/javascript" src="vendor/Editor/js/editor.bootstrap4.min.js"></script>

from index.php and then I expect it to work. The datatables.min.js includes that code already.

Allan

slolo

Still not

If I remove the two lines, I have this behavior where I choose the image to upload

The database is always correctly filled but I have a strange 404 error.

What I don't understand about the 2 lines to remove is that they are present in the documentation below (taken from: https://editor.datatables.net/examples/advanced/upload.html).

allan

editor.file('table_image', data).webPath

In the code, but your response from the server contains webpath (note the case). So the Javascript should be updated to refer to webpath.

Regarding the files - there is a subtile difference there as well. The download builder will create a datatables.js file which is the concatination of all the software selected.

dataTables.js however is the core DataTables library. The example does not use a concatinated file - it uses the individual files.

Allan

slolo

Ok I understand.
So, I have removed unnecessary librairies and also correct a small bug.

In my server.php file it was 'webpath' (with a lowercase letter 'p' whereas in my javascript it was a capital letter 'P').

return '<img src="' + editor.file('table_image', data).webPath + '" style="max-width: 100px; height: auto; max-height: 100%;" />';

I have also corrected a small problem with systempath.
Now my image is correctly displayed

A little idea for this final stretch?
And really sorry for the inconvenience.

slolo

Sorry, I have found the solution found myself!

I simply remove the following line from editor fields configuration.

    {"label": "id", "name": "table_gallery.id", "def": "", "type": "hidden"},

Indeed, this column is an auto id and therefore does not need to be part of the rendering for the "Editor" component.

I only have a new problem, I have no "clear" button to delete image.

allan

Indeed, this column is an auto id and therefore does not need to be part of the rendering for the "Editor" component.

Spot on

I only have a new problem, I have no "clear" button to delete image.

Add a clearText parameter and value to the upload field object if you want to have a clear button.

Allan

slolo

It work's like a charm!
Thank you very much for your help

Have a nice day.

allan

Excellent - we got there in the end!

Allan