Upload example - having some trouble

lincolncbennett

Hi Allan, just trying to replicate the example Upload plugin to try. Not sure what I'm doing wrong, hopefully something simple.
Any help would be greatly appreciated.

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        "ajax": "examples/php/staff2.php",
        "table": "#staff",
        "fields": [
            {
                "label": "name",
                "name": "staff.name"
            },
            {
                "label": "title",
                "name": "staff.title"
            },
            
            {
                "label": "Info:",
                "name": "staff.image",
                "type": "upload",
                "display": function ( val, row ) {
         return val && row.image.webPath ?
             '<img src="'+row.image.webPath+'"/>' :
             'No image';
            }
            }
        ]
    } );

    $('#staff').DataTable( {
        "dom": "Tfrtip",
        "ajax": "examples/php/staff2.php",
        "columns": [
            {
                "data": "staff.name"
            },
            {
                "data": "staff.title"
            },
            {
           "data": "image",
           "defaultContent": "No image",
           "render": function ( d ) {
               return d.webPath ?
                   '<img src="'+d.webPath+'"/>' :
                   null;
           }
        }
        ],
        "tableTools": {
            "sRowSelect": "os",
            "aButtons": [
                { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
        }
    } );
} );
}(jQuery));

<?php

/*
 * Editor server script for DB table staff
 * Created by http://editor.datatables.net/generator
 */

// DataTables PHP library and database connection
include( "../../php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'staff' , 'id')
    ->fields(
        Field::inst( 'staff.name' ),
        Field::inst( 'staff.title' ),
        Field::inst( 'staff.info' ),
        Field::inst( 'staff.image' )
    ->upload(
        Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
            ->db( 'image', 'id', array(
                'fileName' => Upload::DB_FILE_NAME,
                'fileSize' => Upload::DB_FILE_SIZE,
        'webPath' => Upload::DB_WEB_PATH,
        'systemPath'  => Upload::DB_SYSTEM_PATH
            ) )
    ),
       Field::inst( 'image.fileName' )
    )
    ->leftJoin( 'image', 'image.id', '=', 'staff.image' )
    ->process( $_POST )
    ->json();

lincolncbennett

problem solved

allan

Hi,

Sorry I missed this at the time. What was your resolution in the end?

Allan

lincolncbennett

I have a table at the moment which uses the Custom display controller for editing basic client info and I have successfully added the upload feature to add a PDF file containing client info. In each table row I also have 7 inline active check boxes, so as to monitor progression tasks required for each client. I have only just added the upload plugin so am going to have a play around and then post the code if I cant get to work correctly. Thanks Allan for this awesome plugin.

below shows the changes I made to the code above and then it worked just fine.

 var editor;

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: "examples/php/staff2.php",
        table: "#staff",
        fields: [
            {
                label: "name",
                name: "staff.name"
            },
            {
                label: "title",
                name: "staff.title"
            },
            
            {
                label: "Info:",
                name: "staff.image",
                type: "upload",
                 display: function ( val, row ) {
         return val && row.image.webPath ?
             '<img src="'+row.image.webPath+'"/>' :
             'No image';
     },
        
            },
        ]
    } );

    $('#staff').DataTable( {
        dom: "Tfrtip",
        ajax: "examples/php/staff2.php",
        columns: [
            {
                data: "staff.name"
            },
            {
                data: "staff.title"
            },
            {
             data: "image",
           defaultContent: "No image",
           render: function ( d ) {
               return d.webPath ?
                   '<img src="'+d.webPath+'"/>' :
                   null;
           }}
        ],
        tableTools: {
            sRowSelect: "os",
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
    } );
} );

<?php

/*
 * Editor server script for DB table staff
 * Created by http://editor.datatables.net/generator
 */

// DataTables PHP library and database connection
include( "../../php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;


// Build our Editor instance and process the data coming from _POST
$data = Editor::inst( $db, 'staff' , 'id')
    ->fields(
        Field::inst( 'staff.name' ),
        Field::inst( 'staff.title' ),
        Field::inst( 'staff.info' ),
        Field::inst( 'staff.image' )

    ->upload(
        Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__NAME__' )
            ->db( 'image', 'id', array(
                'fileName' => Upload::DB_FILE_NAME,
                'fileSize' => Upload::DB_FILE_SIZE,
                'webPath' => Upload::DB_WEB_PATH,
                'systemPath'  => Upload::DB_SYSTEM_PATH
            ) )
    ),

       Field::inst( 'image.fileName' ),
       Field::inst( 'image.webPath' )

    )
    ->leftJoin( 'image', 'staff.image', '=', 'image.id' )
    ->process( $_POST )
    ->data();
    echo json_encode( $data );

allan

Sounds good - thanks for posting back :-)

Allan

lincolncbennett

Hi Allan further to my second post, I seem to be having some issues.
I had 2 inline active checkboxes and was using the Custom display controller for editing. Since adding the Upload plugin, with a link in each row to the uploaded file, I cannot see the checkboxes ticked in the table but see them checked when opening the child editor. The only other change was defining the database table as required for upload left join, in php. Sorry the code below is long. Any help would be appreciated.

var editor;

(function () {

var Editor = $.fn.dataTable.Editor;
Editor.display.details = $.extend( true, {}, Editor.models.displayController, {
    "init": function ( editor ) {
        // No initialisation needed - we will be using DataTables' API to display items
        return Editor.display.details;
    },
 
    "open": function ( editor, append, callback ) {
        var table = $(editor.s.table).DataTable();
        var row = editor.s.modifier;
 
        // Close any rows which are already open
        Editor.display.details.close( editor );
 
        // Open the child row on the DataTable
        table
            .row( row )
            .child( append )
            .show();

        $( table.row( row ).node() ).addClass( 'shown' );

        if ( callback ) {
            callback();
        }
    },
 
    "close": function ( editor, callback ) {
        var table = $(editor.s.table).DataTable();

        table.rows().every( function () {
            if ( this.child.isShown() ) {
                this.child.hide();
                $( this.node() ).removeClass( 'shown' );
            }
        } );
 
        if ( callback ) {
            callback();
        }
    }
} );

} )();

$(document).ready(function() {
     
    editor = new $.fn.dataTable.Editor( {
        ajax: "examples/php/staff3.php",
        table: "#example",
        display: "details",
        fields:                          
              [ {
                label:     "Active:",
                name:      "bdm.active",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ]
             }, {
                label:     "Active_2:",
                name:      "bdm.active_2",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ]
            }, {
                
                label: "First name:",
                name: "bdm.first_name"
            }, {
                label: "Last name:",
                name: "bdm.last_name",
                     
                
            }, {
                label: "Info:",
                name: "bdm.image",
                type: "upload",
                 display: function ( val, row ) {
         return val && row.image.webPath ?
             '<img src="'+row.image.webPath+'"/>' :
             'No image';
     },
        
            },
        ]
        
        
    } );
            
    var table = $('#example').DataTable( { 
    
    
        dom: "lfrtip",
        ajax: "examples/php/staff3.php",
        
        
        columns: [
         {
           data: "null, defaultContent: ''"
           
           
          },
        
            {
                className:      'details-control',
                orderable:      false,
                data:           null,
                defaultContent: ''
                
                
            },
            {
                 data: "bdm.Ref2"  
            },
            {
                 data: "bdm.Reference"  
            },
            {
                 data: "bdm.Year"  
            },
            {
                 data: "bdm.Loc"  
            }, 
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.bdm.First_names+' '+data.bdm.Last_name;
            } },
            
            
             {
                data:   "bdm.active",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-bdm.active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            },          
        
        {
                data:   "bdm.active_2",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-bdm.active_2">';
                    }
                    return data;
                },
                className: "dt-body-center"
            },
            
            
        ],      

"order": [[1, 'asc']],
 
 "columnDefs": [
            {
            "targets": 0,  
            "data": "bdm.image",
            "render": function ( data, type, row ) {
            return '<a href="../uploads/'+row.bdm.image+'.pdf">file</a>';
            }
            }
            ],
                             
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.bdm.active', row).prop( 'checked', data.bdm.active == 1 );
            $('input.bdm.active_2', row).prop( 'checked', data.bdm.active_2 == 1 );
            
            
        }
        
        } )
        
    
    
        
    $('#example').dataTable().yadcf([
    
    {column_number : 5, filter_container_id: "external_filter_container"},
    ]);
                    
    
$('#example').on( 'change', 'input.bdm.active', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'input.bdm.active', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
 } );   
 $('#example').on( 'change', 'input.bdm.active_2', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'input.bdm.active_2', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
 } );
     
 
    $('#example').on( 'click', 'td.details-control', function () {
        var tr = this.parentNode;
 
        if ( table.row( tr ).child.isShown() ) {
            editor.close();
        }
        else {
            editor.edit(
                tr,
                'Edit row',
                [
                    {
                        "className": "delete",
                        "label": "Delete row",
                        "fn": function () {
                            // Close the edit display and delete the row immediately
                            editor.close();
                            editor.remove( tr, '', null, false );
                            editor.submit();
                        }
                    }, {
                        "label": "Update row",
                        "fn": function () {
                            editor.submit();
                        }
                    }
                ]
            );
        }
    } );
    
} );

  
    </script>

$data = Editor::inst( $db, 'bdm', 'Ref2' )
    ->fields(
    Field::inst( 'bdm.Ref2' ),
    Field::inst( 'bdm.Reference' ),
    Field::inst( 'bdm.Year' ),
    Field::inst( 'bdm.Loc' ),
        Field::inst( 'bdm.First_names' ),
        Field::inst( 'bdm.Last_name' ),
        Field::inst( 'bdm.image' )
         ->upload(
        Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
        ->allowedExtensions( array( 'pdf'), "Please upload a pdf file" )
            ->db( 'image', 'id', array(
                'fileName' => Upload::DB_FILE_NAME,
                'fileSize' => Upload::DB_FILE_SIZE,
                'webPath' => Upload::DB_WEB_PATH,
                'systemPath'  => Upload::DB_SYSTEM_PATH

            ) )
    ),
        Field::inst( 'bdm.active' )
            ->setFormatter( function ( $val, $data, $opts ) {
                return ! $val ? 0 : 1;
            } 
            ),  
            Field::inst( 'bdm.active_2' )
            ->setFormatter( function ( $val, $data, $opts ) {
                return ! $val ? 0 : 1;
            } 
            ),      

       Field::inst( 'image.fileName' ),
       Field::inst( 'image.webPath' )

       )

    ->leftJoin( 'image', 'bdm.image', '=', 'image.id' )
    ->process( $_POST )
    ->data();
    echo json_encode( $data );

allan

I don't immediately see anything wrong with the above code. Are you able to give me a link to the page or use the DataTables debugger so I can see what is happening?

Thanks,
Allan

lincolncbennett

ofuhoy

lincolncbennett

Found the fault,the issue was in defining the fields. snippets below show changes made to table code. Server script was fine.

 {
                data:   "bdm.active",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            },      
{
                data:   "bdm.active_2",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-.active_2">';
                    }
                    return data;
                },
                className: "dt-body-center"
            }, 

etc..........

rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-active', row).prop( 'checked', data.bdm.active == 1 );
            $('input.editor-active_2', row).prop( 'checked', data.bdm.active_2 == 1 );

etc.........

$('#example').on( 'change', 'input.editor-active', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'bdm.active', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
 } );   
 $('#example').on( 'change', 'input.editor-active_2', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'bdm.active_2', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
etc...........

allan

Good to hear you got it sorted!

Allan