need help getting images to save/delete in my datatables application please.
need help getting images to save/delete in my datatables application please.
itxuser
Posts: 18Questions: 5Answers: 0
I am posting both of my files below. the 'partsData.php' file is where my server code is.
-----parts.php------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Sonic Parts</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.1/css/select.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/dataTables.editor.min.js">
</script>
<script type="text/javascript" language="javascript" src="js/editor.bootstrap.js">
</script>
<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: "partsData.php",
table: "#example",
fields: [
{
label: "Category:",
name: "TBL_NAME.Category"
}, {
label: "Description:",
name: "TBL_NAME.PartDescription"
}, {
label: "Details:",
type: "textarea",
name: "TBL_NAME.PartDetails"
}, {
label: "Cost:",
name: "TBL_NAME.Cost"
}, {
label: "List Price:",
name: "TBL_NAME.ListPrice"
}, {
label: "UOM:",
name: "TBL_NAME.UOM"
}, {
label: "Height:",
name: "TBL_NAME.Height"
}, {
label: "Width:",
name: "TBL_NAME.Width"
}, {
label: "Length:",
name: "TBL_NAME.Length"
}, {
label: "Weight:",
name: "TBL_NAME.Weight"
}, {
label: "Image:",
name: "files.id",
type: "upload",
display: function ( id ) {
return '<img src="'+editor.file( 'files', id ).web_path+'/'+editor.file( 'files', id ).filename+'"/>';
},
clearText: "Clear",
noImageText: 'No image'
}
]
} );
// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td.editable', function (e) {
editor.inline( this );
} );
var table = $('#example').DataTable( {
lengthChange: false,
ajax: {
url: "partsData.php",
type: "POST"
},
serverSide: false,
columns: [
{ data: "TBL_NAME.PartNumber"},
{ data: "TBL_NAME.PartDescription", className: 'editable' },
{ data: "TBL_NAME.PartDetails", className: 'editable' },
{ data: "TBL_NAME.UPC"},
{ data: 'files.id', render: function ( id ) {
return id ?
'<img class="img-responsive" src="'+editor.file( 'files', id ).web_path+'/'+editor.file( 'files', id ).filename+'" />' :
'No image';
} },
],
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-sm-6:eq(0)', table.table().container() ) );
} );
</script>
</head>
<body class="dt-example dt-example-bootstrap">
<div class="container">
<div class="row">
<div class="col-md-12">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Description</th>
<th>Details</th>
<th>UPC</th>
<th>Image</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Number</th>
<th>Description</th>
<th>Details</th>
<th>UPC</th>
<th>Image</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
</html>
<?php
?>
------partsData.php-------
<?php
include("php/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;
// Build our Editor instance and process the data coming from _POST
Editor::inst($db, 'TBL_NAME')
->fields(
Field::inst( 'TBL_NAME.Category' ),
Field::inst( 'TBL_NAME.PartNumber' ),
Field::inst( 'TBL_NAME.PartDescription' ),
Field::inst( 'TBL_NAME.PartDetails' ),
Field::inst( 'TBL_NAME.Cost' ),
Field::inst( 'TBL_NAME.ListPrice' ),
Field::inst( 'TBL_NAME.UOM' ),
Field::inst( 'TBL_NAME.UPC' ),
Field::inst( 'TBL_NAME.Weight' ),
Field::inst( 'TBL_NAME.Width' ),
Field::inst( 'TBL_NAME.Height' ),
Field::inst( 'TBL_NAME.Length' ),
Field::inst( 'files.id' ),
Field::inst( 'files.filename' ),
Field::inst( 'TBL_NAME.image' )
->setFormatter( 'Format::ifEmpty', null )
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/media/images/__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
) )
->allowedExtensions( array( 'png', 'jpg', 'gif' ), "Please upload an image" )
)
)
->leftJoin( 'files', 'TBL_NAME.image', '=', 'files.image' )
->process($_POST)
->json();
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Please explain the detail of what you are trying to do.
Are you saving/deleting links to images, or images themselves? What happens when you run your code?
I am attempting to edit images, delete them, and add new ones using the 'upload' feature of the 'Editor' tool in datatables.
here is a error I am getting in the console.
You've got the Upload instance configured for the field called
TBL_NAME.imagein PHP, but in Javascript you have usedfiles.id, hence why it is giving an error stating that the upload option hasn't been configured for the field given.Allan
Okay, I updated the field in my PHP to
files.id, but am now getting a different error. see attached. All my permissions on the folders are correct.That error suggests the user that the web server is running under doesn't have write access to the
/var/www/html/media/imagesdirectory. You could make it 777 permissions initially to make sure it works. Then refine it to make it more secure (i.e. make it writable by the user your web-server is running under rather than everyone).Allan