Two separate file upload fields

sbresch86

Dear comunity,

after i tried the upload example with an additional upload-field, i have an issue in DataTables. The upload progress of both files works fine but after i refresh datatables page i got an issue in console that one of the document file_id's was unknown (uncaught exception: Unknown file id 21 in table files) so the view will return no data.

What changes do I have to make to get both upload values ​​from the database? I can not use the multiple file upload because once an image and once a PDF must be uploaded. These values ​​must be displayed in separate columns.

I think that there must be a change in Select statement because now, two values (files_id's) "image" and "document" ​​have to be fetched but i can't figure it out.

regards from germany,
Simon

HTML

<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Phone #</th>
                <th>City</th>
                <th>Image</th>
                <th>Document</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Phone #</th>
                <th>City</th>
                <th>Image</th>
                <th>Document</th>
            </tr>
        </tfoot>
    </table>

JAVASCRIPT

var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/upload.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Phone #:",
                name: "phone"
            }, {
                label: "City:",
                name: "city"
            }, {
                label: "Image:",
                name: "image",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            },{
                label: "Document:",
                name: "document",
                "type": "upload",
                "clearText": "Clear",
                "noImageText": 'no pdf'
            }
        ]
    } );
 
    var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/upload.php",
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "phone" },
            { data: "city" },
            {
                data: "image",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor.file( 'files', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            },
            {
                data: "document",
                render: function ( file_id ) {
                    return file_id ?
                        '<a href="'+editor.file( 'files', file_id ).web_path+'" target="_blank">PDF</a>' :
                        null;
                },
                "defaultContent": "no pdf",
                "title": "Document"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

SERVERSCRIPT

// DataTables PHP library
include( "../../php/DataTables.php" );
 
// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;
 
 
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users' )
    ->fields(
        Field::inst( 'first_name' ),
        Field::inst( 'last_name' ),
        Field::inst( 'phone' ),
        Field::inst( 'city' ),
        Field::inst( 'image' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/image_upload/__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
                ) )
                ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
            ),
        Field::inst( 'document' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/document_upload/__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
                ) )
                ->validator( Validate::fileSize( 52428800, 'Files must be smaller that 50 MB' ) )
                ->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload an pdf document" ) )
            )
    )
    ->process( $_POST )
    ->json();

allan

What version of Editor are you using (both on the client-side and server-side)? That looks like it should work okay.

Thanks,
Allan

sbresch86

Dear Allan,
thx for your reply. For client-side i use version 1.10.18 and editor is version 1.8.1. Here you will find the table: https://tpleiner.entwicklung1.de/tabelle2/termine.html

If you create or update an entry with both image and document, you got an error message. I tried many days, can't find mistake. :-/

Thanks,
Simon

allan

Hi Simon,

Thanks for the link! I'll take a look shortly and get back to you.

Regards,
Allan

allan

Hi Simon,

I've just tried it, creating a row with the "termin_name" of "test" and it appeared to work okay - two files were uploaded on edit. Is there a specific sequence I need to use to re-create the error?

Thanks,
Allan

sbresch86

Hi Allan,

of course but after creating row, you have to refresh page. After that the error appears. I will delete file id 29 from database so you can repeat the test. Now there is no row data "loading". Thats the error :-)

regards
Simon

allan

Hi Simon,

I'm with you now! I think that is being caused by an optimisation I put in for 1.8 unfortunately. I'll look into it just now and get back to you.

Allan

sbresch86

Awesome! Tahnk you. :-)

allan

Hi Simon,

This change should do the business for you. If you either make those two changes to the Editor.php file you have, or just replace the whole file with the one from github, that should do it.

Regards,
Allan

sbresch86

Hi Allan,
it works. Thank you!
regards
Simon