Help asked for uploading a file

mbedukaty · August 2016

Hello everyone,

Although many tests, I'm struggling to reproduce the upload file example.

1 - I created 2 tables (users and files) like this ;

CREATE TABLE users (
id int(11) NOT NULL,
first_name varchar(250) NOT NULL,
last_name varchar(255) NOT NULL,
phone varchar(255) NOT NULL,
city varchar(255) NOT NULL,
image varchar(255) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE files (
id int(11) NOT NULL,
file_name varchar(255) NOT NULL,
file_size varchar(255) NOT NULL,
web_path varchar(255) NOT NULL,
system_path varchar(255) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

This is my users.html code :

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <title>DataTables Editor - users</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.3/moment-2.13.0/dt-1.10.12/b-1.2.2/se-1.2.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.3/moment-2.13.0/dt-1.10.12/b-1.2.2/se-1.2.0/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.users.js"></script>
    </head>
    <body class="dataTables">
        <div class="container">

            <h1>
                DataTables Editor <span>users</span>
            </h1>
            
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="users" width="100%">
                <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Phone #</th>
                <th>City</th>
                <th>Image</th>
            </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

then my table.users js file :

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

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.users.php',
        table: '#users',
        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 ( id ) {
                    return '<img src="'+editor.file( 'files', id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }
        ]
    } );

    var table = $('#users').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.users.php',
       columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "phone" },
            { data: "city" },
            {
                data: "image",
                render: function ( id ) {
                    return id ?
                        '<img src="'+editor.file( 'files', id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

}(jQuery));

The table.users.php file :

<?php

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

// DataTables PHP library and database connection
include( "lib/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\Upload,
    DataTables\Editor\Validate;

// The following statement can be removed after the first run (i.e. the database
// table has been created). It is a good idea to do this to help improve
// performance.
$db->sql( "CREATE TABLE IF NOT EXISTS `users` (
    `id` int(10) NOT NULL auto_increment,
    `first_name` varchar(255),
    `last_name` varchar(255),
    `phone` varchar(255),
    `city` varchar(255),
    `image` varchar(255),
    PRIMARY KEY( `id` )
);" );

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users', 'id' )
    ->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'].'/upload/__ID__.__EXTN__' )
                ->db( 'files', 'id', array(
                    'file_name'    => Upload::DB_FILE_NAME,
                    'file_size'    => Upload::DB_FILE_SIZE,
                    'web_path'    => Upload::DB_WEB_PATH,
                    'system_path' => Upload::DB_SYSTEM_PATH
                ) )
                ->validator( function ( $file ) {
                    return$file['size'] >= 500000 ?
                        "Images must be smaller than 500K" :
                        null;
                } )
                ->allowedExtensions( [ 'png', 'jpg', 'gif' ], "Please upload an image" )
            )
    )
    ->process( $_POST )
    ->json();

I can't make this work. Please help me to find where is the issue.

Thank you guys.

mbedukaty · August 2016

Hello,

I discovered that the tables I created were false so I did like on the example :
CREATE TABLE files (
id int(11) NOT NULL AUTO_INCREMENT,
filename varchar(250) NOT NULL,
filesize int(11) NOT NULL,
web_path varchar(250) NOT NULL,
system_path varchar(250) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

and

CREATE TABLE users (
id mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
title varchar(255) DEFAULT NULL,
first_name varchar(255) DEFAULT NULL,
last_name varchar(255) DEFAULT NULL,
phone varchar(100) DEFAULT NULL,
city varchar(50) DEFAULT NULL,
zip varchar(10) DEFAULT NULL,
updated_date datetime DEFAULT NULL,
registered_date datetime DEFAULT NULL,
active tinyint(1) DEFAULT NULL,
manager int(11) DEFAULT NULL,
site int(11) DEFAULT NULL,
image int(11) DEFAULT NULL,
shift_start time DEFAULT NULL,
shift_end time DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Then I used exactly the code provided but It didn't work. Any help will be very appreciated.

Thanks guys

mbedukaty · August 2016

Hello everyone,

I'm pretty sure the issue is coming from somewhere here

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'].'/uploads/__NAME__' )
                ->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( function ( $file ) {
                    return$file['size'] >= 500000 ?
                        "Files must be smaller than 500K" :
                        null;
                } )
                ->allowedExtensions( [ 'png', 'jpg', 'gif' ], "Please upload an image" )
            )
    )
    ->process( $_POST )
    ->json();

Any help please ?

allan · August 2016

Hi,

Thanks for your updates. From what I can see above it looks good (obviously other than the fact that it isn't working).

When you upload a file, what is returned by the server? You can use your browser's network tools to see that.

Also, it would be worth checking your server's error logs to see if there are any error messages reported there.

Allan

mbedukaty · August 2016

Hello Allan,

Thank you very much for your reply.

First I have the following message :

Datatables warning table id=users Ajax error.

This message doesn't appear when I skip the image field in the php file. Then I can enter first name and other classic fields.
That's why I believe the issue comes from there.

How can I check the server's error logs ?

Thanks Allan.

mbedukaty · August 2016

For information I'm on ipage

mbedukaty · August 2016

I can read the following message on my browser :

load resource: the server responded with a status of 500 (Internal Server Error)

allan · August 2016

Datatables warning table id=users Ajax error.

I would need to know what the Ajax response is. The instructions here details how you can get that in your browser.

How can I check the server's error logs ?

You would need to refer to your web-server's documentation. For Apache it is typically in /var/log/apache/error_log for example.

Allan

mbedukaty · August 2016

Hello Allan,

I have this message

datatables.min.js:16 GET http://www.adescomaroc.com/A13/php/table.users.php?_=1472557816957 500 (Internal Server Error)

Can the issue related to the datatables.min.js file. I'm using the one provided with the generator.

Thank you.

mbedukaty · August 2016

For information the link is www.adescomaroc.com/A13/users.html

allan · August 2016

Thanks for the link. Unfortunately any error information is not being sent to the client-side. This is good for security, but not so good for debugging.

You would need to have a look at whatever messages are being entered into your server's error log.

Allan

Help asked for uploading a file

Help asked for uploading a file

Answers

Howdy, Stranger!

Categories

DataTables

Help asked for uploading a file

Help asked for uploading a file

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables