Uploads not displaying

johnuga

I am using the DT Editor that is created from the Generator.

When I edit an entry, the uploaded photo will show up in the "pop out" editor window. I can then reedit the same entry, clear the image and then update the photo. This part seems to work. It is the table rendering part that does not work. It says "no image" on a row that I have just added a photo to. What am I doing wrong?

MariaDB []> describe associates;
+---------------+--------------+------+-----+---------+----------------+
| Field         | Type         | Null | Key | Default | Extra          |
+---------------+--------------+------+-----+---------+----------------+
| id            | int(10)      | NO   | PRI | NULL    | auto_increment |
| display_order | int(10)      | YES  |     | NULL    |                |
| first         | varchar(255) | YES  |     | NULL    |                |
| last          | varchar(255) | YES  |     | NULL    |                |
| title         | varchar(255) | YES  |     | NULL    |                |
| bio           | text         | YES  |     | NULL    |                |
| image         | varchar(255) | YES  |     | NULL    |                |
+---------------+--------------+------+-----+---------+----------------+


MariaDB []> describe associates_photos;
+-------------+---------------+------+-----+---------+----------------+
| Field       | Type          | Null | Key | Default | Extra          |
+-------------+---------------+------+-----+---------+----------------+
| id          | int(10)       | NO   | PRI | NULL    | auto_increment |
| filename    | varchar(255)  | YES  |     | NULL    |                |
| filesize    | int(10)       | YES  |     | NULL    |                |
| web_path    | varchar(255)  | YES  |     | NULL    |                |
| system_path | varchar(1024) | YES  |     | NULL    |                |
+-------------+---------------+------+-----+---------+----------------+

Here is my table.associates.js file:

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.associates.php',
        table: '#associates',
        fields: [
            {
                "label": "display order:",
                "name": "display_order"
            },
            {
                "label": "first:",
                "name": "first"
            },
            {
                "label": "last:",
                "name": "last"
            },
            {
                "label": "title:",
                "name": "title"
            },
            {
                "label": "bio:",
                "name": "bio",
                "type": "textarea"
            },
            {
                "label": "image:",
                "name": "image",
                "type": "upload",
                    "display": function ( file_id ) {
                    return '<img src="'+table.file( 'associates_photos', file_id ).web_path+'"/>';
                },
                "clearText": "Clear",
                "noImageText": "No Image"
            }
        ]
    } );

    var table = $('#associates').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.associates.php',
        columns: [
            {
                "data": "display_order"
            },
            {
                "data": "first"
            },
            {
                "data": "last"
            },
            {
                "data": "title"
            },
            {
                "data": "bio"
            },
            {
                "data": "image",
                "render": function ( file_id ) {
                    return file_id ? '<img src="'+table.file( 'associates_photos', file_id     ).web_path+'"/>' : null;
                },
                "defaultContent": "No image",
                "title": "Image"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );
}(jQuery));

Here is my php code:

<?php
include( "lib/DataTables.php" );

use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

Editor::inst( $db, 'associates', 'id' )
    ->fields(
        Field::inst( 'display_order' )
            ->validator( 'Validate::notEmpty' )
            ->validator( 'Validate::numeric' ),
        Field::inst( 'first' )
            ->validator( 'Validate::notEmpty' ),
        Field::inst( 'last' )
            ->validator( 'Validate::notEmpty' ),
        Field::inst( 'title' ),
        Field::inst( 'bio' ),
        Field::inst( 'image' )
            ->setFormatter( 'Format::ifEmpty', null )
            ->upload( Upload::inst( $_SERVER["DOCUMENT_ROOT"] .     '/xyz/associates/upload/__ID__.__EXTN__' )
            ->db( 'associates_photos', '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( function ( $file ) {
                return $file['size'] >= (500*1024) ? "Files must be smaller than 500K" : null;
            } )
            ->allowedExtensions( [ 'png', 'jpg', 'jpeg', 'gif' ], "Please upload an image" )
        )
    )
    ->process( $_POST )
    ->json();

johnuga

OK, a little frustration. I edited it in the above post, but the problem was I had associate_photo as a table name instead of associates_photos (line 64 in the js file).

It would have been nice to see some sort of error message. I think this error check would be good to have in the next version of the code base.

allan

Hi,

Thanks for posting back and great to hear that you've got it working now.

Adding a check for an unknown file table name sounds like a very good idea. I've logged it for inclusion.

Regards,
Allan