Problems using upload plugin

si08789

Hi Allan

I am trying to use the upload plugin to show an image in each row of a field following the instructions given in https://editor.datatables.net/plug-ins/field-type/editor.upload

After adding the js and the css I have used the javascript as follows:

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../includes/datatables/tables/avusers.php?role=<?=$role?>&class=<?=$class?>",
        table: "#avusers",
        i18n: { <?=$language['datatables_editor']?> },
        fields: [{
                label: "Image",
                name: "avusers.image",
                type: "upload"
                display: function ( val, row ){
                    return val && row.image.webPath ?
                        '<img src="'+row.image.webPath+'"/>' :
                        'No image';
                    },
            }, {
                label: "<?=LABEL_APELLIDO1?>:",
                name: "avusers.lastname"
            }, {
                label: "<?=LABEL_APELLIDO2?>:",
                name: "avusers.lastname2"
            }, {
                label: "<?=LABEL_NOMBRE?>:",
                name: "avusers.firstname"
            }, {
                label: "<?=LABEL_USUARIO?>:",
                name: "avusers.NIF"
            }, {
                label: "<?=LABEL_GRUPO?>:",
                name: "avusers.idconfig_users",
                type: "select"
            }
        ]
    } );


    // Activate an inline edit on click of a table cell
    $('#avusers').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            submitOnBlur: true
        } );
    } );

    $('#avusers').dataTable( {
        dom: "Tfrtip",
        ajax: {
            url: "../includes/datatables/tables/avusers.php?role=<?=$role?>&class=<?=$class?>",
            type: 'POST'
        },
        columns: [
            { data: null, defaultContent: '', orderable: false },
            { data: "avusers.image",
                defaultContent: "No image",
                render: function ( d ) {
                    return d.webPath ?
                        '<img src="'+d.webPath+'"/>' :
                        null;
                }
            },
            { data: "avusers.lastname" },
            { data: "avusers.lastname2" },
            { data: "avusers.firstname" },
            { data: "avusers.NIF" },
            { data: "avconfig_users.name", editField: "avusers.idconfig_users" }
        ],
        order: [ 1, 'asc' ],
        tableTools: {
            sRowSelect: "os",
            sRowSelector: 'td:first-child',
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        },
        "language": {
                    "url": "../includes/idioma/datatables/<?=$language['datatables']?>"
    }
    } );
} );

I am not able to render the table. I suppose I have to declare the image field as an string in the database but I haven't done anything in the server side apart from declaring the avusers.image. Should I do anything else to make it work?

I suppose the link of the image will be stored in the avusers.image field. How can I specify the destination folder?

Thanks

allan

Hi,

The code above references avusers.image.webPath (in the renderer) - does your server-side code return that property? Could you run the DataTables debugger on the page and give me the reference code so I can see the data being used?

Thanks,
Allan

si08789

https://debug.datatables.net/onavop

Thank you Allan.

allan

Thanks for the link. Interestingly, it shows that no Ajax call has been made to get data - I'm presuming because of a Javascript error - probably related to my note above about the webPath.

If you look at the console in your browser are any errors shown?

Certainly, if you are going to use the webPath variable in the Javascript, it is going to have to be defined in the PHP somewhere (assuming you even need it!?).

You noted that you haven't done anything for the PHP aspect yet, I think you will need to before this works. Documentation for the PHP upload class is available on the Editor site.

Allan

si08789

Hi Allan,

It has been a long time ago since the last contact. Sorry about not answering you.
Hi Allan,

I have successfully been able to see the images in each record but I have not yet been able to use the "upload" properly. I would want to have a picture for each one of the records and to do so:

I have followed carefully your instructions in https://editor.datatables.net/manual/php/upload to do the server side. I have the next code:

Editor::inst( $db, 'avusers' )
    ->field(
        Field::inst( 'avusers.id' ),
        Field::inst( 'avusers.firstname' ),
        Field::inst( 'avusers.lastname' ),
        Field::inst( 'avusers.lastname2' ),
        Field::inst( 'avusers.NIF' ),
        Field::inst( 'avusers.image' )
            ->upload(
                Upload::inst( [$_SERVER['DOCUMENT_ROOT'] . '/schools/1/images/__ID__.__EXTN__' )
                ->db( 'avusers_image', 'id', array(
                    'name' => Upload::DB_FILE_NAME,
                    'fileSize' => Upload::DB_FILE_SIZE
                ))
            )
    )
    ->leftJoin( 'avusers_image', 'avusers_image.id', '=', 'avusers.image' )
    ->where('avusers.idconfig_users', $_GET['idconfig_users'])
    ->process($_POST)
    ->json();

and in the client side:

    var editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            ajax: "../includes/datatables/tables/avusers.php?idconfig_users=<?=$idconfig_users?>&class=<?=$class?>",
            table: "#avusers",
            i18n: { <?=$language['datatables_editor']?> },
            fields:
            [
                {
                    label: "<?=LABEL_FOTO?>:",
                    name: "avusers.image",
                    type: "upload"
                },  {
                    label: "<?=LABEL_NOMBRE?>:",
                    name: "avusers.firstname"
                },  {
                    label: "<?=LABEL_APELLIDO1?>:",
                    name: "avusers.lastname"
                },  {
                    label: "<?=LABEL_APELLIDO2?>:",
                    name: "avusers.lastname2"
                },  {
                    label: "<?=LABEL_NIF?>:",
                    name: "avusers.NIF"
                },  {
                    label: "<?=LABEL_ID?>:",
                    name: "avusers.id"
                },  {
                    label: "<?=LABEL_IMAGE_NAME?>:",
                    name: "avusers_image.name"
                }
            ],
        } );

        // Activate an inline edit on click of a table cell
        $('#avusers').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this, {
                submitOnBlur: true
            } );
        } );


        $('#avusers').dataTable( {
            dom: "Tfrtip",
            ajax: {
                url: "../includes/datatables/tables/avusers.php?idconfig_users=<?=$idconfig_users?>&class=<?=$class?>",
                type: 'POST'
            },
            columns: [
                { data: null, defaultContent: '' },
                { data: "avusers.image" },
                { data: "avusers.firstname" },
                { data: "avusers.lastname" },
                { data: "avusers.lastname2" },
                { data: "avusers.NIF"},
                { data: "avusers.id"},
                { data: "avusers_image.name"}


            ],
            order: [ 1, 'asc' ],
            tableTools: {
                sRowSelect: "os",
                sRowSelector: 'td:first-child',
                aButtons: [
                    { sExtends: "editor_create", editor: editor },
                    { sExtends: "editor_edit",   editor: editor },
                    { sExtends: "editor_remove", editor: editor }
                ]
            },
            "columnDefs": [
                {
                "targets": 1,  //Numero de columna que estamos editando
                "data": "image",
                "render": function ( data, type, row ) {
                return '<a href="../school/useredit.php?id='+row.id+'"><img src="../schools/1/images/'+row[7]+'"></a>';
                }
                },
                {
                "targets": 6,
                "visible": false
                },
                {
                "targets": 7,
                "visible": false
                }
            ],
            "language": {
                        "url": "../includes/idioma/datatables/<?=$language['datatables']?>"
            },
        } );
    } );

The debugged table is in the next web:

https://debug.datatables.net/ipequc

I cannot recover the value neither from row.id nor row[7] and I don't know why.

On the other hand I am able to see the image handler but not to upload the image, I'm sure there's something missing but I don't know what.

Could you help me with the issue?

Thank you Allan,

Ignacio Azcárate

allan

Hi Ignacio,

Thanks for posting up your code for this and the debug code!

row.id

Try:

row.avusers.id

Your JSON structure looks like this:

    {
        "DT_RowId": "row_103771",
        "avusers": {
            "id": "103771",
            "firstname": "Romaisa",
            "lastname": "Benali",
            "lastname2": "El Abbassi",
            "NIF": "",
            "image": "2121"
        },
        "avusers_image": {
            "name": null
        }
    }

so there is no id property, but there is one in avusers.id. That make sense?

Thanks,
Allan

si08789

Thank you Allan, that was the issue.

Could you help me with the upload plugin functionality?

I would want to save it here [$_SERVER['DOCUMENT_ROOT'] . '/schools/1/images/ID.EXTN' but I still don't know what if have done incorrectly.

allan

Can you give me a link to the page please so I can debug it on the client side. I don't know what the problem is at the moment.

Allan

mRender

You seem to have the directory down, what is the issue with saving the files?

si08789

Hi Allan and Modgility,

Here I give you the debug warnings given when I upload the image:

<br />
<b>Warning</b>: move_uploaded_file(/schools/1/images/2128.png): failed to open stream: HTTP wrapper does not support writeable connections in <b>/includes/datatables/php/Editor/Upload.php</b> on line <b>358</b><br />
<br />
<b>Warning</b>: move_uploaded_file(): Unable to move '/tmp/phpX7csxk' to '/schools/1/images/2128.png' in <b>/includes/datatables/php/Editor/Upload.php</b> on line <b>358</b><br />
<br />
<b>Fatal error</b>: Call to undefined method DataTables\Editor\Upload::_error() in <b>/includes/datatables/php/Editor/Upload.php</b> on line <b>361</b><br />

I cannot include the full address in a public forum due to the private information I have inside.

Thank you for your help,

Ignacio

allan

Upload::inst( [$_SERVER['DOCUMENT_ROOT'] . '/schools/1/images/ID.EXTN' )

There looks to be a spare [ before $_SERVER - although I'm surprised that doesn't throw an error!

Allan