Upload example - having some trouble

Upload example - having some trouble

lincolncbennettlincolncbennett Posts: 23Questions: 10Answers: 1

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();

This question has an accepted answers - jump to answer

Answers

  • lincolncbennettlincolncbennett Posts: 23Questions: 10Answers: 1

    problem solved

  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

    Hi,

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

    Allan

  • lincolncbennettlincolncbennett Posts: 23Questions: 10Answers: 1

    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 );
    
  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

    Sounds good - thanks for posting back :-)

    Allan

  • lincolncbennettlincolncbennett Posts: 23Questions: 10Answers: 1

    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 );
    
    
  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

    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

  • lincolncbennettlincolncbennett Posts: 23Questions: 10Answers: 1

    ofuhoy

  • lincolncbennettlincolncbennett Posts: 23Questions: 10Answers: 1
    Answer ✓

    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...........
    
  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

    Good to hear you got it sorted!

    Allan

This discussion has been closed.