editor upload file
editor upload file
cala
Posts: 52Questions: 15Answers: 0
Hi everybody...
I've created a dataTable with upload feature.
When i create a new line with the editor (without uploading the image), it is saved and showed in my page. When I also add the image, an error appear in the console: "Uncaught TypeError: Cannot read property 'id' of undefined".
Now, if I look at the SQL file table, the "file row" is created but the corresponding field in the other SQL table has not the id of the image.
If I force the id in the field with an external sql software, the image is shown in the table.
I've followed step-by-step the example, but I cannot figure out how to correct the error.
<?php
$path=realpath(dirname(__FILE__).'/../'.'Editor/php/DataTables.php');
require(realpath($path));
// 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;
$data=Editor::inst( $db, 'wp__register', 'id')
->fields(
...some text fields...
Field::inst( 'wp_image' )
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/__ID__.__EXTN__' )
->db( 'wp_image', 'id', array(
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => Upload::DB_WEB_PATH,
'system_path' => Upload::DB_SYSTEM_PATH
) )
)
->setFormatter( 'Format::nullEmpty' )
)
->process($_POST)
->data();
echo json_encode( $data );
?>
and in the js:
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": {
"url": "../server_processing_editor_9_9.php",
"type": "POST"
},
"table": "#protocol_table",
fields: [
...
{
label: "Allegati:",
name: "wp_image",
type: "upload",
display: function ( file_id ) {
return '<img src="'+table.file( 'wp_image', file_id ).web_path+'"/>';
},
clearText: "Clear",
noImageText: 'No image'
}
]
} );
var table=$('#protocol_table').DataTable( {
"ajax": {
"url": "../server_processing_editor_9_9.php",
"type": "POST"
},
columns: [
{ data: "wp_image",
render: function ( file_id ) {
console.log(table.file( 'wp_image', file_id));
console.log(file_id);
return file_id ?
'<img src="'+table.file( 'wp_image', file_id).web_path+'"/>' :
null;
},
defaultContent: "No image",
title: "Image"
}
],
"select": true,
"processing": true,
dom: 'Bfrtip',
buttons: [
{ text: 'Reload',
action: function ( e, dt, node, config ) {
//alert("I am an alert box!");
dt.ajax.reload();
}},
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor }
],
"paging": true,
"order": [[ 1, "asc" ]],
"info": true,
"filter": true,
"language": {
"lengthMenu": "Visualizza _MENU_ records per pagina",
"zeroRecords": "Nessun record trovato",
"info": "Pagina _PAGE_ di _PAGES_",
"infoEmpty": "Nessun record disponibile",
"infoFiltered": "(Filtrati da _MAX_ record totali)"
}
} );
} );
debug link: http://debug.datatables.net/afowuf
Thank you for the help!
This discussion has been closed.
Answers
Are you able to give a link to the page so I can check it out please? I don't immediately see what the issue would be there I'm afraid.
Thanks,
Allan
Also - does it still give the error after a refresh? Or does it load the table correctly at that point?
thank you for the reply!
no... I cannot give it because is a private development site.
the problem is not in the load of the table, is the connection between the wp_image field in the register table (wp__register) and the id of the file table.
The id of the file is not copied into the corresponding field in the other table.
For debug, in which function does the code update the "data" table? I know that the file table is updated after the file to be loaded is chosen. Could you give me an example of the 2 sql table involved (that two of the example on https://editor.datatables.net/examples/advanced/upload.html for example)?
Thank you for the help!
The SQL schema from that example is available here. The tables are
users_filesandfiles.At all? Or just when the file is uploaded? That was the point of my question about the reload - does the image show when you reload the page, but not initially?
Thanks,
Allan
thank you for another reply (and for the tables, I'll study them carefully)!
no... the id is not copied at all! when I press create/update in the form, the console error "Uncaught TypeError: Cannot read property 'id' of undefined" has occurred; I think this is the reason of the non-copy, but I cannot figure out who is that "undefined" object/field/thing and how to set it.
In addition to the error, the window of the Editor does not close.
Thanks!
What is the JSON that the server returns when a file is uploaded?
Allan
I've created the structure for the multi-upload and I can upload the files on the database table. This is the server response:
When I press Create/Update on the editor form the error is always the same.
Why in the example page is not written to create the "mid" table that connect user id and files id? Is it not necessary? Does the Editor self-create it?
I need to understand where and which instructions create the link between the tables in the database. Could you tell me it, please?
Could you show me the JSON that is returned when the file has been uploaded? That should also contain information about the files that have been uploaded (otherwise the file information will be out of date and you'll likely get the error you are seeing).
Allan
In my previous post from line 39 there are the information about the uploaded files. That is the output of the
file.
What other information do you need and what do I have to add to the scripts to get them?
Thank you so much!
Hi,
The information shown above looks like the JSON from when the DataTable is initialised - not the JSON from when the file is uploaded. Is that the case? If you look in the "Network" tab of your browser's web developer tools you should be able to see an Ajax request being made immediately when a file is selected. I'm interested to know what the returned data is from that request.
Allan
This one? I've uploaded in the first data in the table, the id=32 file.
Yes - thank you.
Does it tell you which line this occurs on, and what the error backtrace is please?
The data shown above looks good.
Thanks,
Allan
dataTables.editor.js:319
Uncaught TypeError: Cannot read property 'id' of undefined
Finally a good news :)
Are you able to give me a full backtrace of the error please? Unfortunately that is the encoded version of Editor so that line number isn't going to mean very much.
Also to confirm, this error shows up immediately after you load the file?
Are you able to PM me a link to the page, it would make debugging it much quicker!
Allan
I've copied verbatim the file upload example in order to test if something was wrong in my file. I've updated the files only with the correct paths of the datatable libraries and the save path for the uploaded files.
Same error in the same line... Could you provide me a previous version of the Editor?
that line is in this piece of code of dataTables.editor.js:
Not immediately after the upload (which is successful), but when the create/update button of the Editor form is pressed.
No, it is on a private server.
Ah. Okay, in which case, can you give me the JSON response that the server is returning from its Ajax request as a result of the submit button please? Or does the error occur before the Ajax request is even sent?
Sorry for asking so many questions - its difficult to understand the issue without being able to see it :-)
Allan
This is the reply at the upload of the 42 file on row_1:
and this when the submit button is pressed:
You can see that the row_1 isn't updated (it has the old files id=1).
Could it be a problem that I'm using DataTable in Wordpress?
Thank you for the help!
That's very odd. Yet another question to try and see what is going on I'm afraid - what is the data that is submitted to the server when you hit the submit button The network tab should have an option to show that as well. I'm wondering if it sent 42 or 1?
I'm not seeing why that would cause an id error though.
Allan
Gotcha...
Instead of
you need to use:
in the javascript file.
Why the firstscript call 2 times the upload function?
Thanks allan for the help!
Good to hear that mostly worked.
I don't understand? Could you link to a page showing the issue.
Allan