Link to test case: Don't know how to create a link case for upload
Debugger code (debug.datatables.net): Don't know how to do it
Error messages shown: Uncaught Error: Unknown file table name: table_image
Description of problem:
Hello,
I have a problem with the "editor" component and the ability to upload images.
This code worked well with version 1.9.6 of the component.
Since I bought and migrated to version 2.4.1 I have an error on the display of the image.
The upload is done well, the database is correctly filled but at the end of the upload (before rendering the image), I have a javascript error:
display: function ( file_id ) {
return '<img src="'+editor.file( 'table_image', file_id ).webPath+'"/>';
},
The error message shown in the console
Uncaught Error: Unknown file table name: table_image
jt http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
Ft http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
display http://localhost/test/test.php?action=edit&id=15:152
set http://localhost/test/plugins/DataTables/datatables.min.js:55
create http://localhost/test/plugins/DataTables/datatables.min.js:55
Je http://localhost/test/plugins/DataTables/datatables.min.js:55
success http://localhost/test/plugins/DataTables/datatables.min.js:55
jQuery 6
onload http://localhost/test/plugins/DataTables/datatables.min.js:55
we http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
onload http://localhost/test/plugins/DataTables/datatables.min.js:55
oe http://localhost/test/plugins/DataTables/datatables.min.js:55
Je http://localhost/test/plugins/DataTables/datatables.min.js:55
jQuery 8
Je http://localhost/test/plugins/DataTables/datatables.min.js:55
create http://localhost/test/plugins/DataTables/datatables.min.js:55
_typeFn http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
O http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
st http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
st http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
R http://localhost/test/vendor/Editor/js/dataTables.editor.min.js:6
<anonymous> http://localhost/test/test.php?action=edit&id=15:186
Here is an example of my PHP code:
// Parameters given by ajax data
$folderGallery = 'custom-sub-folder/'; // Can be changed in my case in order to upload in sub-folders
$idGallery = 1;
// Create an array to hold variables to be used in the closure function.
$varArray = [
"webPath" => 'uploads/', // Web path to file
"sysPath" => $_SERVER['CONTEXT_DOCUMENT_ROOT'] . 'uploads/', // System path
"folderGallery" => $folderGallery . ($folderGallery != "" ? "/" : "")
];
// DataTables PHP library
include( "../vendor/Editor/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\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'table_gallery', 'id' )
->fields(
Field::inst( 'table_gallery.id' ),
Field::inst( 'table_gallery.title' ),
Field::inst( 'table_gallery.description' ),
Field::inst( 'table_gallery.image' )
->setFormatter( Format::ifEmpty( null ) )
// ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
->upload( Upload::inst(
function ( $file, $id ) use ( $varArray, $db ) {
$filename = $id . "_" . $file['name'];
if (!is_dir($varArray["sysPath"] . $varArray["folderGallery"])) {
mkdir($varArray["sysPath"] . $varArray["folderGallery"], 0755, true);
}
move_uploaded_file( $file['tmp_name'] , $varArray["sysPath"] . $varArray["folderGallery"] . $filename );
$db->update(
'table_image', // Database table to update
[
"webpath" => $varArray["webPath"] . $varArray["folderGallery"] . $filename,
"systempath" => $varArray["sysPath"] . $varArray["folderGallery"] . $filename
],
["id" => $id]
);
return $id;
} )
->db( 'table_image', 'id', array(
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'mimetype' => Upload::DB_MIME_TYPE,
//'webpath' => Upload::DB_WEB_PATH,
//'systempath' => Upload::DB_SYSTEM_PATH
'webpath' => "",
'systempath' => ""
) )
->dbClean( function ( $data ) {
// Remove the files from the file system
for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
unlink( $data[$i]['systempath'] );
}
// Have Editor remove the rows from the database
return true;
} )
->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
),
)
->leftJoin( 'table_image', 'table_image.id', '=', 'table_gallery.image' )
->where( 'table_gallery.id', $idGallery, '=')
->process( $_POST )
->json();
And the piece of javascript code
$(document).ready(function() {
var context = {};
context.editorFields =
[
{"label": "id", "name": "table_gallery.id", "def": "'.$id.'", "type": "hidden"},
{"label": "title", "name": "table_gallery.title"},
{"label": "Description", "name": "table_gallery.description", "def": ""},
{"label": "Image:", "name": "table_gallery.image", "type": "upload",
display: function ( file_id ) {
return '<img src="'+editor.file( 'table_image', file_id ).webPath+'"/>';
}
}
]
;
context.datatablesColumns =
[
{"data": "table_gallery.id", "title": "Id"},
{"data": "table_gallery.title", "title": "Title"},
{"data": "table_gallery.description", "title": "Description"},
{
"data": "table_gallery.image", "defaultContent": "No image", "title": "Image",
render: function ( data, type, row ) {
return '<img src="' + editor.file('table_image', data).webPath + '" style="max-width: 100px; height: auto; max-height: 100%;" />';
}
}
]
;
///////////////////////////////////////////////
var editor = new DataTable.Editor({
ajax: {
'url' : 'server/test.php',
'data' : function (d) {
d.idGallery = <?=$resGallery["id"]?>,
d.folderGallery = '<?=$resGallery["folder"]?>'
}
},
table: '#table-content',
i18n: gEditor_Language,
fields: context.editorFields,
display: 'bootstrap'
, formOptions: {
main: {
onBackground: false
}
}
});
var table = $('#table-content').DataTable({
layout: gDataTablesObj.gDataTableLayoutFormat,
select: true,
ajax: {
'url' : 'server/test.php',
'data' : function (d) {
d.idGallery = <?=$resGallery["id"]?>,
d.folderGallery = '<?=$resGallery["folder"]?>'
}
},
language: gDataTables_Language,
columns: context.datatablesColumns,
lengthMenu: [
gDataTablesObj.gDataTablesPaginationOrder,
gDataTablesObj.gDataTablesPaginationText
],
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
});
I have 2 tables:
- The first one (table_gallery) for store informations about images (with following fiels)
id title description image- The second one (table_image) to store informations about upload (with following fiels)
id fileName fileSize mimeType webPath systemPath
I used the examples provided in the source code of the "editor" component and it works fine. But when I look at the source code, I see that the examples use version 2.2.2 of the editor component.
Was there a change between version 2.2.2 and 2.4.1?
Let me know if you need more details and thanks in advance for your help.
I wish you a pleasant day.