DataTables Editor 1.5.1 Upload not working

jaredgerber · September 2015

So I upgraded to Editor 1.5.1 and I got all my old functionality up and running well -- happy about that. However, when I add the Upload field to the php process function, not only does the inline editing stop working, but also the upload doesn't work.

You can see my application here, just hit the checkbox of the 1st item (Record 19). Under the documents tab , you can click NEW or attempt inline editing for fields "Description" & "Document" to see what happens during inline editing & uploading.

I checked the debugger under [network] -> [headers] and it looks like it's posting the information the same as it is in the example, but the files are just not getting uploaded. When I click [preview], I get this error:

Parse error: syntax error, unexpected '[' in /home/opes/public_html/res/Editor-PHP-1.5.1/php/Editor/Upload.php on line 297

http://data.my-ofs.com/agent/rpt_policy.php

Also, I created a table for 'files' with all the fields ... e.g., id, filename, etc. tblitem.URL_Document is my field for the file reference.

I'm not exactly sure what the problem is, but I've been at it for quite a while trying to get it to work ... comparing to the example over and over :-) Please help :-) It's got to be something simple.

Again, if I remove the upload field from the php processor, the data in the Description field saves just fine.

    // ===================================
    // EDITOR-DOCUMENTS 
    // ===================================
    
    // # 1 CONTROLS POPUP EDITOR (DEFINE POPUP FIRST)
        editordocuments = new $.fn.dataTable.Editor( {
        ajax: 'upload.php',
        //ajax: window.location.pathname + '?table=tblitem',
        table: "#documents",
        bProcessing: true,
        bServerSide: true,
        fields: [ 
        {
                label: "RecordID",  /* POLICYID */
                name: "RecordID",   /* POLICYID */
        type: "hidden",
                default: $("#PolicyID").val()  /* NEEDS TO BE CURRENT POLICYID */
            }, {
                name: "ItemTypeID",
        type: "hidden",
                default: 12
            }, {
                name: "ItemCategoryID",
        type: "hidden",
                default: 50
            }, {
                label: "Date:",
                name: "ItemDate",
        type: "hidden",
        default: itemdate  /* "2015-09-02" */
            }, {
                label: "Description:",
                name: "ItemName"
            }, {
                label: "Document Upload:",
                name: "URL_Document",
                type: "upload",
                display: function ( file_id ) {
                    return '<a href="'+tabledocuments.file( 'files', id ).webPath+'"/>Document Link</a>';
                },
                clearText: "Clear",
                noImageText: 'No document'
            }           
        ]
    } );        
    

    // # 2 CONTROLS INLINE EDITOR / DataTables columns and columnDefs objects
       var tabledocuments = $('#documents').DataTable( {
           dom: 'Bfrtilp',
               ajax: "../Library/processListObject.php?list=item&itemcategoryid=50&id="+id+"&statusid=",
        bProcessing: true,
        bDestroy: true,
        bServerSide: true,
        bSort: false,
        bFilter: false,
        pageLength: 5,
        select: {style:'os',selector: 'td:first-child'},    
        language: {
                "lengthMenu": "Display _MENU_ records per page",
                "zeroRecords": "Nothing found - sorry",
                "info": "Showing _START_ to _END_ of _TOTAL_ entries",   /*Showing page _PAGE_ of _PAGES_*/
                "infoEmpty": "No records available",
                "infoFiltered": ""}, /*(filtered from _MAX_ total records)*/  
               columns: [
            { data: null,defaultContent: '', className: 'select-checkbox',orderable: false},
                        { data: "ItemName" },
            { data: "ItemDateF", type: "display" },
            {
               data: "URL_Document",
               render: function ( file_id ) {
               return file_id ?
                 '<a href="'+tabledocuments.file( 'files', file_id ).web_path+'"/>Document link</a>' :null;},
                defaultContent: "No document", title: "Document"
            }           
               ],
        order: [ 1, 'desc' ],
        buttons: [
                { extend: "create", editor: editordocuments },
                { extend: "remove", editor: editordocuments }
            ]
    } );

<?php
session_start(); // start up your PHP session! 

// 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;

    $db = NEW mysqli($GLO_HOST_NAME, $GLO_USER_NAME, $GLO_PASS, $GLO_DB_NAME);

    // DataTables PHP library
    include( "../res/Editor-PHP-1.5.1/php/DataTables.php" );

    Editor::inst( $db, 'tblitem', 'ItemID' )
        ->fields(
            Field::inst( 'ItemTypeID' ),
            Field::inst( 'ItemCategoryID' ),
            Field::inst( 'CompletedDate' ),
            Field::inst( 'DueDate' ),
            Field::inst( 'ItemName' ),
            Field::inst( 'Description' ),       // REQUIRED FOR NOTES, BUT NOT FOR TASKS??
            Field::inst( 'URL_Document' )
                ->setFormatter( 'Format::nullEmpty' )
                ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
                    ->db( 'files', 'id', array(
                        'filename'    => Upload::DB_FILE_NAME,
                        'filesize'    => Upload::DB_FILE_SIZE,
                        'web_path'    => Upload::DB_WEB_PATH,
                        'system_path' => Upload::DB_SYSTEM_PATH
                    ) )
//      ->allowedExtensions( array( 'pdf','doc','docx','jpg' ), "Please upload a doc or pdf file" )                 
//      ->validator( function ( $file ) { return $file['size'] >= 2000000 ? "Files must be smaller than 2MB" : null;} )
                )               
        )
        ->process( $_POST )
        ->json();

?>

allan · September 2015

Parse error: syntax error, unexpected '[' in /home/opes/public_html/res/Editor-PHP-1.5.1/php/Editor/Upload.php on line 297

Thank you for pointing that out. I've used PHP 5.4 syntax by mistake there:

$out = [];

If you change it to be:

$out = array();

it will work with PHP 5.3, which is what I presume you are using if you are getting this error. That fix will be in the next release.

Regards,
Allan

jaredgerber · September 2015

Ok -- the uploading is working now -- thank you :-) The uploading is working famously.

However, after following the example closely, there is an issue in displaying the table now -- it may be a bug in the file() function or call. Interestingly enough, the table displays fine after the upload. It just won't show when I run initially.

The table won't display -- it's stuck on "processing..." and throws this error -- which "28" is the file id:

Uncaught TypeError: Cannot read property '28' of undefined

(anonymous function)    @   dataTables.editor.min.js:54
t.extend.g  @   jquery.dataTables.min.js:100
$.DataTable.columns.render  @   rpt_policy.php:921

Here is the code at 921:

columns: [
   { data: null,defaultContent: '', className: 'select-checkbox',orderable: false},
   { data: "ItemName" },
   { data: "ItemDateF", type: "display" },
   { data: "filesid",
       render: function ( file_id ) {
       return file_id ?
        '<a href="'+tabledocuments.file( 'files', file_id ).web_path+'" target=_blank>' + tabledocuments.file( 'files', file_id ).filename + '</a>' :
       null;},
    defaultContent: "No image",
    title: "Document"
   }            
],

jaredgerber · September 2015

Also, is there a way to use the original filename as part of the filename that is saved to the folder without adding another move / rename operation? e.g., contract_id1.pdf

For the benefit of other users, here is the files table structure & sample records.

Table structure:

Field	Type	Null	Key	Default	Extra
id	int(11)	NO	PRI	NULL	auto_increment
filename	varchar(255)	YES		NULL
filesize	int(11)	YES		NULL
web_path	varchar(255)	YES		NULL
system_path	varchar(255)	YES		NULL

Sample records:

id	filename	filesize	web_path	system_path
1	contract.pdf	83227	/uploads/1.pdf	/home/opes/public_html/uploads/1.pdf
2	contract.pdf	83227	/uploads/2.pdf	/home/opes/public_html/uploads/2.pdf
3	contract.pdf	83227	/uploads/3.pdf	/home/opes/public_html/uploads/3.pdf

allan · September 2015

Can you tell me where I can find the upload input in your page linked above? If it click the "New" button I don't see an upload input. If I click a checkbox to select and edit a row I get taken to a different page.

Thanks,
Allan

jaredgerber · September 2015

Here is a direct link to the right page. Just click the "Documents" tab:
http://data.my-ofs.com/agent/rpt_policy.php?id=19

You will see that it's stuck on "Processing". That's where the error below comes up. If you click the [New] button, it will allow you to upload a file and then after submitting, you will see that the Documents refresh fine at that point.

Uncaught TypeError: Cannot read property '29' of undefined

(anonymous function) @ dataTables.editor.min.js:54
t.extend.g @ jquery.dataTables.min.js:100
$.DataTable.columns.render @ rpt_policy.php:920

If you upload a PDF, you'll see the nifty preview come up :-)

allan · September 2015

Thanks for the link. It looks like the file information isn't being loaded by Ajax - if you have a look at my example page you'll see a files parameter in the returned JSON (click the Ajax load tab below the table).

I had wondered if this was use to server-side processing being enabled, but I've just tried that and it appears to work okay. However, I did notice that you have:

ajax: "../Library/processListObject.php?list=item&itemcategoryid=50&id="+id+"&statusid=",

But the Editor script is processing $_POST. Could you try changing your ajax option in DataTables to be:

ajax: {
    type: 'POST',
    url: "../Library/processListObject.php?list=item&itemcategoryid=50&id="+id+"&statusid="
},

I'm not sure that will resolve the issue to be honest, but it will rule out one thing.

Also, just to check, the file posted above is processListObject.php?

Thanks,
Allan

jaredgerber · September 2015

if you have a look at my example page you'll see a files parameter in the returned JSON (click the Ajax load tab below the table).

Ahh -- well, that would be the problem, lol. I'm not using the Editor::inst() as my table data source because I need more server side control over the returned data sets -- I'm using SSP:Simple() with where statement in processListObject.php -- see below. I'd love to know how to do it using SSP -- but the classes don't seem to support additional tables.

echo json_encode( SSP::simple( $_GET, $sql_details, $sTable, $sIndexColumn, $aColumns,'',$sWhere,'',$sUserMessage) );

As a side note, I did isolate the Editor::Inst() for the Documents table & editor in upload.php (for testing purposes) -- and I can see the Ajax data properly formed with "data" & "files". There is a lot of rows -- so you'll need to view source to see the files data, but it's there.

http://data.my-ofs.com/agent/upload.php

For future reference, I'd like to know how to do it your way; however, I did solve the problem by creating my own display function -- see below.

http://data.my-ofs.com/agent/rpt_policy.php?id=19

editordocuments = new $.fn.dataTable.Editor( {
   ajax: window.location.pathname + '?table=tblitem',
   table: "#documents",
   bProcessing: true,
   bServerSide: true,
   fields: [ 
{
    label: "Document Upload:",
    name: "filesid",
    type: "upload",             
    display: 
        function ( data ) {
        return get_value('qryfiles','id','preview',data);
        }, 
    clearText: "Clear",
    noImageText: 'No document',
    fieldInfo: "Upload file, then submit."
}

Also, one more question that remains a mystery-- and may help others -- instead of just using the ID, can I include the original filename in the file that is saved to the disk? e.g., __ID__.__EXTN__

Also, is there a way to use the original filename as part of the filename that is saved to the folder without adding another move / rename operation? e.g., contract_id1.pdf

Full code for the benefit of others:

Field::inst( 'filesid' )
    ->setFormatter( 'Format::nullEmpty' )
    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
        ->db( 'files', 'id', array(
            'filename'    => Upload::DB_FILE_NAME,
            'filesize'    => Upload::DB_FILE_SIZE,
            'web_path'    => Upload::DB_WEB_PATH,
            'system_path' => Upload::DB_SYSTEM_PATH
        ) )
    ->allowedExtensions( array( 'pdf','doc','docx','jpg' ), "Please upload a doc or pdf file" )                 
    ->validator( function ( $file ) { return $file['size'] >= 2000000 ? "Files must be smaller than 2MB" : null;} )
)

allan · September 2015

For future reference, I'd like to know how to do it your way

The Editor libraries support server-side processing (and are actually more capable than the SSP class). It should be possible to use the Editor classes here I think.

instead of just using the ID, can I include the original filename in the file that is saved to the disk? e.g., ID.EXTN

Yes - You can also use __NAME__ - see the documentation. I would suggest using the Id and the name to remove the chances of files with the same name being uploaded and resulting in data loss as one would overwrite the other.

Allan

jaredgerber · September 2015

Ok - I will implement future projects using the Editor libraries.

Thanks for pointing that out on the filename. I'm not sure how I missed that. I will include the ID for sure.

DataTables Editor 1.5.1 Upload not working

DataTables Editor 1.5.1 Upload not working

Answers

Howdy, Stranger!

Categories

DataTables

DataTables Editor 1.5.1 Upload not working

DataTables Editor 1.5.1 Upload not working

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables