datatables error when adding type Upload, suggestions?
datatables error when adding type Upload, suggestions?
Stacey1134
Posts: 101Questions: 18Answers: 0
Hi, first sorry for never coming to you all with easy problems.
I am having the the weirdest problem with trying to use the file upload function.
When I add the type and it's parameters I get the following error
dataTables.editor.min.js:6 Uncaught Error: Unknown file table name: files
at R.Ft [as files] (dataTables.editor.min.js:6:23010)
at R.kt [as file] (dataTables.editor.min.js:6:22855)
at render (correspondence.php:619:49)
at jquery.dataTables.min.js:4:12048
at e.fnGetData (jquery.dataTables.min.js:4:15343)
at S (jquery.dataTables.min.js:4:17860)
at St (jquery.dataTables.min.js:4:20342)
at x (jquery.dataTables.min.js:4:17588)
at jquery.dataTables.min.js:4:32832
at Object.e [as success] (jquery.dataTables.min.js:4:25688)
But this error only occurs with the type field, otherwise it works fine. Here's the Libraries, and Script. When I remove the remarks, it fails. I can run the same script independently, and it works.
libload.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://kit.fontawesome.com/d30fa74399.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.4/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/select/1.6.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.3.0/js/dataTables.dateTime.min.js"></script>
<script src="Editor-PHP-2.1.0/js/dataTables.editor.min.js"></script>
<script src="Editor-PHP-2.1.0/js/editor.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/js/standalone/selectize.js"></script>
<script src="Editor-PHP-2.1.0/js/editor.selectize.js"></script>
<script src="https://cdn.quilljs.com/latest/quill.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.13.2/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.3.4/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.6.0/css/select.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/datetime/1.3.0/css/dataTables.dateTime.min.css" rel="stylesheet" />
<link href="Editor-PHP-2.1.0/css/editor.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.9.0/css/selectize.css" rel="stylesheet" />
<link href="Editor-PHP-2.1.0/css/editor.selectize.css" rel="stylesheet" />
<link href="https://cdn.quilljs.com/latest/quill.snow.css" rel="stylesheet" />
ajaxCorrespondence.php
<?php
session_start();
include( "Editor-PHP-2.1.0/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;
/*
* Example PHP implementation used for the join.html example
*/
Editor::inst( $db, 'Correspondence' )
->fields(
Field::inst( 'CR_ID' ),
Field::inst( 'Notes' ),
Field::inst( 'image' )
// ->setFormatter( Format::ifEmpty( null ) )
// ->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
// ) )
// ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
// ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an letter" ) )
// )
)
->process( $_POST )
->json();
scanners.html
<script>
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "ajaxCorrespondence.php",
table: "#correspondenceTable",
display: 'bootstrap',
fields: [ {
label: "Contact ID:",
name: "CR_ID"
}, {
label: "Notes:",
name: "Notes"
}, {
label: "Scanned Letter:",
name: "image"
// type: "upload",
// display: function ( file_id ) {
// return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
// },
// clearText: "Clear",
// noImageText: 'No Scan'
}
]
} );
editor.on('open', function(e, mode, action) {
$('div.modal-dialog', editor.displayNode()).addClass('modal-xl');
});
var table = $('#correspondenceTable').DataTable( {
lengthChange: false,
ajax: "ajaxCorrespondence.php",
columns: [
{data: "CR_ID" },
{data: "Notes" },
{
data: "image"
// render: function ( file_id ) {
// return file_id ?
// '<img src="'+editor.file( 'files', file_id ).web_path+'" width="45" height="45"/>' :
// null;
// },
// defaultContent: "No scan",
// title: "Letter"
}
],
select: true
} );
// Display the buttons
new $.fn.dataTable.Buttons( table, [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
] );
table.buttons().container()
.appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
} );
</script>
<table id="correspondenceTable" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>CR_ID</th>
<th>Notes</th>
<th>image</th>
</tr>
</thead>
<tfoot>
<tr>
<th>CR_ID</th>
<th>Notes</th>
<th>image</th>
</tr>
</tfoot>
</table>
I had more code, but it exceeded the posting limits.
I am at a loss, and my forehead is bruised from banging it against the wall for the past few days. Any insights and suggestions would be really helpful right now. The scanner.html file will actually have more fields, with selects, and joins. But I already have them working okay in other modules.
Thanks...... Oh, before I forget, the following code does not work in 2.1.0, is there a new work around?
editor.on('open', function(e, mode, action) {
$('div.modal-dialog', editor.displayNode()).addClass('modal-xl');
});
Thanks so much!
This question has accepted answers - jump to:
Answers
So I got it to work with your users and files table. I need it to work with my tables, but I am getting the above error when using my tables.
If I use any table named other than users, it errors our.
Nevermind. With a rested brain, I copied the users and files tables from my examples, and they work. Don't know what the difference is but since this is a new module it doesn't matter.
Hi,
Thanks for the update - good to hear you've got it working now. If if gives you problems again in future, just post back then.
Allan
So, I'm posting back ... The problem now is I am linking two tables from different databases using dbname.tablename.fieldname convention. It works the link and everything works fine. However the upload function seems not be able to recognize it.
relevant php code:
relevant js code:
error code:
I am not joining the scanned_files table witht the Contributors table if that makes a difference. Thanks in advance.
Can you show me the JSON response from the server for when the data is loaded for the table please?
Allan
https://drive.google.com/file/d/176nk5vZFUtT65J6r16tFBNc_3angJvC8/view?usp=sharing
Sorry, can you give me the full, raw JSON of the response please? There is a lot of truncated information there.
Allan
Sorry, I created it in a text file, and it is huge (nearly a MB) and sensitive. I tried sanitize the first 5 records, and grab the bottom, but there is so much join data I can't make heads or tails of it. I guess I could do this without datatables....but kinda defeats the purpose. Wednesday, I could try to put a where clause and insert 5 test records, the file will still be too huge to post directly however.
I'm actually not that bothered about what is in the
dataparameter for this JSON return (i.e. the data for the rows). It is thefilesobject that I would need to see. Based on the error, I presume that there is noabo.scanned_filesproperty in it, but I don't know for certain if that is the issue or not (hence the back and forth needing more debugging information - sorry!).Allan
here I took the first record, and the and the rest is just links, based on what you posted I believe this will help?
Thanks for you assistance. Like I said before, the editor works fine without the reference to the image file.
There should be a
filesproperty for the JSON that is return from the server. You've shown thedataandoptionsproperties above (thanks for that), but if you could also show me thefilesproperty, that is what I'm currently after.Thanks,
Allan
okay, I found only one(1) instance in the whole return
Thanks.
That explains why you are getting the error
Unknown file table name: filesfrom the original post then. If you are going to use thefile()API method to display information about a file, then you need to prime the JSON with that information.That should be getting done by the
Uploadmethod. That it isn't suggests that there are no files in recorded in the database (or that there is an error somewhere!).Consider this example. If you upload a file then reload the page, you'll be able to see that the JSON returns information about the file - e.g.:
So the question becomes - why is the PHP on your server not including that sort of information.
A step towards answering that would be to enable debug mode - which you do by adding
->debug(true)immediately before the->process(...)method call. Then in the JSON return the SQL that is generated and executed will be shown. Can you show me thedebugproperty from the JSON abbreviated please?Thanks,
Allan
Sorry for the delay, here it is (and now I know what that debug true line does).
Yay!, fixed it. Using what you mentioned in your last post and adding this:
I was able to cleanly look at the ajax response and I noticed that the every image record had '0' instead of 'null'. Of course there is no '0' in the files table. I reset the column in all the rows to null, and the table loaded correctly.
What concerns me, however, is that if the the datatable fails to load because it didn't see a the file identifier, will it fail if the file is removed from the the file table? Could be problematic.
Thanks for helping with this, and giving me good feedback to find the problem
Nice one!
Why would it try to reference a file that has been deleted though? The link to the file should use a foreign key - so you can't delete the file without deleting the reference to it. If that were possibly, then as you say, that would be a problem, and you'd need a
try / catchwhen you call thefile()method if that is something you expect might happen.Allan