Upload file - with custom actions- on mobile browsers. Issue
Upload file - with custom actions- on mobile browsers. Issue
Hi Allan,
I´ve try upload file (with custom action) from mobile browsers and the action fail.
My test environment:
- Datatable Editor 1.6.2:
- Android 6.01 and also iOS 10.x
- Google Chrome v.57.0.2987.132 and also Safari 10.x
- PHP 5.6
- MySQL 5.1
- JQM 1.4.5
- jQuery 1.12
Secuence action: (on my test):
On Chrome , on my form press "Choose file..." button on Datatables Editor , go to gallery picture (on device), select an *.jpg image and when return to form it´s frozen. None error mesage is showed , and the picture It´s not show it on the form. And on server side its not uploaded to server.
How I can to debug this issue?
Thank you indvance!
Eduardo
JS: form and table code (main code):
var parser_origin = 'https://xxxxxxx.com'; \\ NOTE: xxxxxx , is my test domain, omitted on purpose
editor = new $.fn.dataTable.Editor( { //ahora inicializo datatable.editor. se lanza con el $(document).ready anterior
ajax: {
url: parser_origin + "/_country/spain/v137/lacarte.restaurants.back/alacarte/php/mi.carta.php",
type: "POST",
data: function ( d ) {
// ¡¡¡ Personalizar el site para cada cliente!!!!
d.site = id_establecimiento(); //llamada a mi funct. Recupero el (ID), guardado tras logarse
}
},
table: "#example", //se necesita para upload
fields: [ {
label: "Nombre:",
name: "nombre",
status: "This field is required"
},
....
{
label: "Imagen:",
name: "image",
//status: "This field is required", //add, foto lo usa scan and get app
type: "upload",
display: function ( file_id ) {
return '<img src="'+table.file( 'files_cartas', file_id ).web_path_thumb2+'"/>'; //show image optimized
},
clearText: "Clear",
ajaxData: function ( d ) {d.append( 'site', id_establecimiento() ); }, // here I´ve add " }, "
noImageText: 'No image'
},
....
var table = $('#example').DataTable( {
//$('#example').DataTable( { // ori: cuando no se usa upload
responsive: true,
dom: "Bfrtip",
ajax: {
url: parser_origin + "/_country/spain/v137/lacarte.restaurants.back/alacarte/php/mi.carta.php",
type: "POST",
data: function ( d ) {
// ¡¡¡ Personalizar el site para cada cliente!!!!
d.site = id_establecimiento(); //llamada a mi funct. Recupero el (ID), guardado tras logarse
}
},
columns:
[
...
{
data: "image",
render: function ( file_id ) {
return file_id ?
// ver en table tamaño +adecuado: width="200" height="133", proporcion (4:3) para fotos de 480x320
'<img src="'+table.file( 'files_cartas', file_id ).web_path_thumb2+'" class="" width="120" height="79"/>' :
null;
},
defaultContent: "No image",
title: "Imagen"
},
...
PHP: (focus on code)
// DataTables PHP library
include( "../../../../_DataTables/php/DataTables.php" );
$site=$_POST['site'];
$idioma='es'; //se fija el idioma del pais. Es para la app de gerente
// este code esta relacionado con "upload custom actions". INICIO
if ( $_SERVER["REQUEST_METHOD"] == "POST" ) { // comprueba que el metodo es POST (se hizo)
// Web and thumbs paths to file
$webPath = '/upload_cartas/';
$webPathThumbs1 = '/upload_cartas/thumb1/'.$site. '/';
$webPathThumbs2 = '/upload_cartas/thumb2/'.$site. '/';
// System paths
$sysPath = $_SERVER['DOCUMENT_ROOT'] . $webPath; // todas las images q subo las dejo en /upload/. Un script las borrara
$sysPathThumbs1 = $_SERVER['DOCUMENT_ROOT'] . $webPathThumbs1 ;
$sysPathThumbs2 = $_SERVER['DOCUMENT_ROOT'] . $webPathThumbs2 ;
// Create an array to hold variables to be used in the closure function
$varArray = array (
"webPath" => $webPath,
"sysPath" => $sysPath,
"webPathTumbs1" => $webPathThumbs1,
"sysPathThumbs1" => $sysPathThumbs1,
"webPathThumbs2" => $webPathThumbs2,
"sysPathThumbs2" => $sysPathThumbs2
);
}
// este code esta relacionado con "upload custom actions". FIN
function make_thumb($src, $dest, $desired_width) {
if (!file_exists($dest)) {
$source_image = imagecreatefromjpeg($src);
$width = imagesx($source_image);
$height = imagesy($source_image);
$desired_height = floor($height * ($desired_width / $width));
$virtual_image = imagecreatetruecolor($desired_width, $desired_height);
imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);
imagejpeg($virtual_image, $dest);
}
}
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Join,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'r_cartas' )
->fields(
...
Field::inst( 'image' )
->setFormatter( 'Format::nullEmpty' )
->upload(
// Custom upload actions. start
Upload::inst( function ( $file, $id ) use ( $varArray, $db ) {
move_uploaded_file( $file['tmp_name'] , $varArray["sysPath"] .$id. '.jpg' );
make_thumb($varArray["sysPath"] .$id. '.jpg', $varArray["sysPathThumbs1"].$id. '.jpg', 480);
make_thumb($varArray["sysPath"] .$id. '.jpg', $varArray["sysPathThumbs2"].$id. '.jpg', 120);
$db->update(
'files_cartas', // Database table to update
array ( //[
"web_path" => $varArray["webPath"] .$id. '.jpg',
"system_path" => $varArray["sysPath"] .$id. '.jpg',
//"system_path" => $varArray["sysPath"] . $file['name'] //escribe nombre de fich.
"web_path_thumb1" => $varArray["webPathTumbs1"] .$id. '.jpg',
"sys_path_thumb1" => $varArray["sysPathThumbs1"] .$id. '.jpg',
"web_path_thumb2" => $varArray["webPathThumbs2"] .$id. '.jpg',
"sys_path_thumb2" => $varArray["sysPathThumbs2"] .$id. '.jpg',
), //],
array ( "id" => $id )
//[ "id" => $id ] //ori
);
return $id;
//var_dump($file); //ONLY TEST
} )
// Custom upload actions. end
->db( 'files_cartas', 'id', array(
'site' =>$site,
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => '',
'system_path' => '',
'web_path_thumb1' => '',
'sys_path_thumb1' => '',
'web_path_thumb2' => '',
'sys_path_thumb2' => '',
) )
// for upload file
->where( function ( $q ) use ( $site ) {
$q->where( 'site', $site );
} )
->validator( function ( $file ) {
return$file['size'] >= 3000000 ?
"Files must be smaller than 3000K o 3,0 Mb" :
null;
} )
->dbClean( function ( $data ) {
// Remove the files from the file system
for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
unlink( $data[$i]['system_path'] ); // upload file folder
unlink( $data[$i]['sys_path_thumb1'] ); //my thumb file folder #1
unlink( $data[$i]['sys_path_thumb2'] ); //my thumb file folder #2
}
// Have Editor remove the rows from the database
return true;
} )
->allowedExtensions( array( 'jpg' ), "Please upload an image file with JPG extension" )
),
Field::inst( 'creado_date' )
)
->join(
Mjoin::inst( 'alergenos' )
->link( 'r_cartas.id', 'r_cartas_alergenos.item_id' )
->link( 'alergenos.id', 'r_cartas_alergenos.alergeno_id' )
->fields(
Field::inst( 'id' )
->validator( 'Validate::required' )
->options( 'alergenos', 'id', 'name' ),
//->options( 'access', 'id', 'code' ),
Field::inst( 'name' ),
//add mostrar codes alergenos en tabla
Field::inst( 'code' )
)
)
->where( 'site', $site)
//->where( 'id_lang', $idioma )
// puedo anidar where´s pero usando diferentes campos
->process( $_POST )
->json();
JSON output: focus on files_cartas (files)
{"data":[{"}],"options":{"alergenos[].id":[{},
"files":{"files_cartas":{"765":{"id":"765","site":"342800010","filename":"dessert-398966_640.jpg","filesize":"62137","web_path":"\/upload_cartas\/765.jpg","system_path":"\/home\/tripntry\/www\/upload_cartas\/765.jpg","web_path_thumb1":"\/upload_cartas\/thumb1\/342800010\/765.jpg","sys_path_thumb1":"\/home\/tripntry\/www\/upload_cartas\/thumb1\/342800010\/765.jpg","web_path_thumb2":"\/upload_cartas\/thumb2\/342800010\/765.jpg","sys_path_thumb2":"\/home\/tripntry\/www\/upload_cartas\/thumb2\/342800010\/765.jpg"},"763":{"id":"763","site":"342800010","filename":"cod-1252654_640.jpg","filesize":"80948","web_path":"\/upload_cartas\/763.jpg","system_path":"\/home\/tripntry\/www\/upload_cartas\/763.jpg","web_path_thumb1":"\/upload_cartas\/thumb1\/342800010\/763.jpg","sys_path_thumb1":"\/home\/tripntry\/www\/upload_cartas\/thumb1\/342800010\/763.jpg","web_path_thumb2":"\/upload_cartas\/thumb2\/342800010\/763.jpg","sys_path_thumb2":"\/home\/tripntry\/www\/upload_cartas\/thumb2\/342800010\/763.jpg"},"767":{"id":"767","site":"342800010","filename":"cocktail-1542495_640.jpg","filesize":"38365","web_path":"\/upload_cartas\/767.jpg","system_path":"\/home\/tripntry\/www\/upload_cartas\/767.jpg","web_path_thumb1":"\/upload_cartas\/thumb1\/342800010\/767.jpg","sys_path_thumb1":"\/home\/tripntry\/www\/upload_cartas\/thumb1\/342800010\/767.jpg","web_path_thumb2":"\/upload_cartas\/thumb2\/342800010\/767.jpg","sys_path_thumb2":"\/home\/tripntry\/www\/upload_cartas\/thumb2\/342800010\/767.jpg"}}}}
This discussion has been closed.
Answers
Hi Eduardo,
You say that it fails on mobile browsers. Does it work on desktop browsers?
The google documentation for that is here. It would be interesting to know if there is a Javascript error occurring.
Allan
Hi Allan,
Yes, on desktop browsers work fine! , I´ve tested on Chrome v.57.x -( same version that mobile) and Firefox 53.0.x, on both desktop browsers, it works
I take a look your note, I'll hope to get an error this way I could give you a better hint.
Thank you !
Eduardo
Hi Allan,
Useful note, thank you!.
Yes, now I´have a error and always is the same ( differents diagnostic test).
I´ve recreate error, and the secuence are: click on "Choose file.." button, pick up a image from mobile device and... frozen screen, after some seconds appear error (on red), I show you below:
Thank you for you help
Eduardo
Error detail ( get it from Remote Device of Google Chrome):
More info get (from Remote Device of Google Chrome)
Interesting. Good debugging
.
Have you checked the server's error logs to see if there is any indication there of what might be going wrong?
Allan
Hi Allan,
Thank you for you help.
On apache log, none error are register ( i don't know why)
Otherhand, (it not is a news), when use upload file from desktop browsers it's works, and on Apache Logs add a entry with the HTTP header response (ok) : 200 , (see below ) , but it don't give us information about the issue.
Any idea about next step?
Greetings,
Eduardo
Are you looking at the access log? It would be worth looking at the error log as well.
Allan
Hi Allan,
Thank you for you help!
I´ve run test again to provocate issue and none error on access log (web logs) neither on error logs, I´m sorry. There´re another way to get more info of issue?
About the JS error "dataTables.editor.min.js:61" , any hint?
Greetings,
Eduardo
If you use the non-min version of the file, what does it say the error line number is?
Thanks,
Allan
Hi Allan,
Thank you for you help.
I going to create another test environment to discard to be cause of current hosting. Also I to try non-min version. I´ll answer you asap.
Greetings,
Eduardo
Hi Allan,
In my other test enviroments it works ( VMWare and Azure), therefore problem came from the shared hosting OVH (I want refer this so to help to another people that can be on the same problem).
The infrastructure of OVH shared hosting have something (i don't know what,) that JS libraries of Datatables Editor - that I point to inside my hosting -
don't downloaded correctly, I mean: sometimes (erratic) give me the error that I´ve describe on above.
My solution: to discard keep Datatables libraries (JS + CSS) on my shared hosting and to use your CDN paths. With this action, it works always and so I remove the all erratic problems
I´m sorry for create this confusion.
Best Regards, Eduardo
Hi Eduardo,
Thanks for your reply. Good to hear you got it working as you want.
Allan