Editor...Image Upload error: 'Unknown upload field name submitted'
Editor...Image Upload error: 'Unknown upload field name submitted'
TonyR
Posts: 27Questions: 6Answers: 0
Mac OS X, Apache2, and the latest versions of PHP, DataTables, Editor, etc.
DataTables and Editor work very well. But when I select an image file to upload, I get 'Unknown upload field name submitted' after I select a qualifying image file (.jpg) from the file selection dialog. The setup is as close as I can make it to the examples provided throughout the reference/manual throughout this site. There is a main table called 'lookup_maker', description below:
mysql> describe lookup_maker;
+--------------+-------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+--------------+-------------+------+-----+---------+----------------+
| id | int(11) | NO | PRI | NULL | auto_increment |
| maker_name | varchar(40) | NO | | NULL | |
| addr1 | varchar(40) | YES | | NULL | |
| addr2 | varchar(40) | YES | | NULL | |
| city | varchar(40) | YES | | NULL | |
| state | varchar(40) | YES | | NULL | |
| zip | varchar(10) | YES | | NULL | |
| phone | varchar(12) | YES | | NULL | |
| servicephone | varchar(12) | YES | | NULL | |
| city_code | int(2) | NO | | NULL | |
| image_id | int(3) | NO | | NULL | |
+--------------+-------------+------+-----+---------+----------------+
A basic table for image meta data that closely resembles the examples on this site. I am not completely sure about the field types here, but I think I am close. For example, the fileSize should be an integer, not a VARCHAR.
mysql> describe dt_images;
+------------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+------------+-------------+------+-----+---------+-------+
| fileName | varchar(50) | YES | | NULL | |
| fileSize | int(9) | YES | | NULL | |
| webPath | varchar(50) | YES | | NULL | |
| systemPath | varchar(50) | YES | | NULL | |
| id | int(11) | NO | PRI | NULL | |
+------------+-------------+------+-----+---------+-------+
The main client-side HTML/PHP:
<script>
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "php/maker_join.php",
table: "#mainlist",
fields: [
{ label: 'Name', name: 'lookup_maker.maker_name'},
{ label: 'Address 1', name: 'lookup_maker.addr1' },
{ label: 'Address 2', name: 'lookup_maker.addr2' },
{
label: 'City',
name: 'lookup_maker.city_code',
type: 'select'
},
{ label: 'State', name: 'lookup_maker.state'},
{ label: 'Zip', name: 'lookup_maker.zip' },
{ label: 'Phone', name: 'lookup_maker.phone'},
{ label: 'Service', name: 'lookup_maker.servicephone'},
{
label: 'Image:',
name: 'dt_images.id', // id column in images table
type: 'upload',
display: function ( file_id ) {
return '<img src="' +
editor.file( 'dt_images', file_id ).webPath + '"/>';
},
clearText: 'Remove',
noImageText: 'No image!'
}
]
});
var table = new $('#mainlist').DataTable( {
ajax: "php/maker_join.php",
dom: "Bfrtip",
columns: [
{ data: 'lookup_maker.maker_name',
render: function ( data, type, row ) {
return data+(row['city']?", "+row['city']:"");
}
},
{ data: 'lookup_maker.phone',
render: function ( data, type, row ) {
return "<span class='sn'>" + data + "</span>";
}
},
{ data: 'lookup_city.city_name'},
{
data: "dt_images.id",
render: function ( file_id ) {
return file_id ?
'<img src="'+editor.file( 'dt_images', file_id ).webPath+'"/>'
: 'No image';
},
title: "Image"
}
],
select: true,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="content">
<div class="col-sm-4">
<h4>TONY'S COOL TABLE</h4>
<table id="mainlist" class="table row-border display">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>City</th>
<th>Image</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
The server-side code:
<?php
// DataTables PHP library
include("DataTables.php");
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\MJoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
Editor::inst( $db, 'lookup_maker')
->debug( true )
->fields(
Field::inst( 'lookup_maker.maker_name')
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'a name is required' ) ) ),
Field::inst( 'lookup_maker.addr1'),
Field::inst( 'lookup_maker.addr2'),
Field::inst( 'lookup_maker.city'),
Field::inst( 'lookup_maker.state'),
Field::inst( 'lookup_maker.zip'),
Field::inst( 'lookup_maker.phone'),
Field::inst( 'lookup_maker.servicephone'),
Field::inst( 'lookup_maker.city_code')
->options( Options::inst()
->table( 'lookup_city')
->value( 'id')
->label( 'city_name') ),
field::inst( 'lookup_city.city_name'),
field::inst( 'lookup_maker.image_id')
->setFormatter( 'Format::nullEmpty' )
->upload(
Upload::inst(
$_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
->db( 'dt_images', 'dt_images.id',
array(
'fileName' => Upload::DB_FILE_NAME,
'fileSize' => Upload::DB_FILE_SIZE,
'webPath' => Upload::DB_WEB_PATH,
'systemPath' => Upload::DB_SYSTEM_PATH
)
)
->validator( Validate::fileSize(
10000000, 'Files must be smaller that 10 MB' ) )
->validator( Validate::fileExtensions(
array( 'png', 'jpg', 'jpeg', 'gif' ),
"Image file is required" ) )
)
)
->leftJoin( 'lookup_city', 'lookup_city.id', '=', 'lookup_maker.city_code')
->leftJoin( 'dt_images', 'dt_images.id', '=', 'lookup_maker.image_id')
->process( $_POST )
->json();
I have created a directory called 'uploads' under '/Library/Webserver/Documents' which, for testing purposes, I have chmod 777 on so I know it shouldn't be a permissions issue. That is the path that I think should be returned with $_SERVER['DOCUMENT_ROOT']. My site is under my /Users/tony/Sites and is referenced with http://localhost/~tony/... And I think a good next step is to place everything under the main site document root to eliminate any weird pathing issues. I did type in a PHP script that returned many server variables which returned. I will post that info in a comment due to a character-limit constraint on posting here. (continued)
Replies
(continuation)... results of the server_variables script:
I am unclear whether or not I should include the leftJoin for 'dt_images' but it doesn't make any difference if I comment that line out or not.
Was something supposed to carry over the dt_images.id value to the image_id value in the main table? Also I am not sure if the dt_images.id field needs to be auto-increment, but I think it does.
I get no server errors, but when I open up the console in Chrome, the most useful looking result I can find under Network for the 'maker_join.php' (Server Side code) is:
{fieldErrors: [], error: "Unknown upload field name submitted", data: [], ipOpts: [], cancelled: [],…}
error:"Unknown upload field name submitted"
(there were some other lines that didn't paste too well into this, but their values were blank inside brackets.)
My overall goal is to have a single image related to records in the lookup_makers table. At some point I am going to try the multiple images per record, but I want to understand what I am doing before I attempt that.
Just watch: the solution will be one lonely character missing, or I have referenced a column incorrectly. That happens to me every time. Any help will be greatly appreciated!
The DataTables tables and editor are working very well for me; it's just the upload function.
I have run the debugger - here is the link to the results:
https://debug.datatables.net/ebopof
The issue is that on the client-side the Upload field is called
dt_images.idbut on the server-side the field with the upload attached is calledlookup_maker.image_id.I think the sever-side is actually correct here - change the Editor Javascript to reference
lookup_maker.image_id- that is the field name that you want to change the value of with a reference to the file that was uploaded.Allan
Hi, Allan, many thanks for your response and answer! It is much better now. When I implemented your change, the behavior was better although with an SQL error, but that was because the id field in my dt_images table didn't have a default value... once I changed that to auto-increment, it works better. There is still some small issue, but I will work on that; it is probably very minor. Again, thanks tons.