Kendo Grid inline editing with Kendo Upload return an null result

问题

I had Kendo UI Grid with inline editing and one of my field (propertyLogo) I use kendoUpload to upload an image. With the kendoUpload function fileUploadEditor, I use saveUrl: "./image.php",and convert the image into base64 format to save into database. When I Add/Edit I manage to update all the field successfully except the propertyLogo field it return a NULL result. I do not know which part I'm doing wrong, but I'm not able to save the image into database. Here I'll provide my script.

My DataSource & Grid

/****************/
/** DATASOURCE **/
/****************/
  
  var dataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url:  "./getPropertyMasterData.php",
        type: "POST",
        data: function() {
          return { 
            method: "getPropertyMasterData",
          }
        }
      },
     
      update: {
        url:  "./getPropertyMasterData.php",
        type: "POST",
        data: function () {
          console.log("I'm calling update!!");
          return {
            method: "editPropertyMasterData",
          }
        },	
        complete: function (e) {  
          $('#grid').data('kendoGrid').dataSource.read();
        } 
      },
      
      destroy: {
        url:  "./getPropertyMasterData.php",
        type: "POST",
        data: function () {
          return {
            method: "deletePropertyMasterData",
          }
        },
        complete: function (e) {  
          $('#grid').data('kendoGrid').dataSource.read();
        } 
      },
    },
    schema: {
      model: {
        id: "propertyID",
        fields: {
          propertyID: { editable: false, nullable: true }
          active: { editable: false, nullable: false, defaultValue: 'y'},
          propertyName: { editable: true,type: "string",validation: {required: {message: "Required"}} },
          propertyLogo: { editable: true, type: "string",validation: {required: {message: "Required"}} },
          propertyColor: { defaultValue: "#000", editable: true, validation: { required: {message: "Required"}} },
          businessRegistrationNo: { editable: true,type: "string",validation: {required: {message: "Required"}} },
          noOfRooms: { defaultValue: 1, editable: true,type: "number",validation: {min: 1, required: {message: "Required"}} }

        }
      }
    },
    pageSize: 25
  }); // End of Kendo DataSource
  
  
/****************/
/** KENDO GRID **/
/****************/
  
  var grid = $("#grid").kendoGrid({
  dataSource: dataSource,
  sortable: true,
  editable: {	mode: "inline" },
  columns: [ 
    { field: "active", title:" ", filterable: false,
       template: "# if (active=='y'){# <span class='k-icon ehors-status-active-icon'></span> #} else {# <span class='k-icon ehors-status-inactive-icon'></span> # }#"}, 

    { field: "propertyName", title:"Property Name",  width: "80" },

    { field: "businessRegistrationNo", title:"Business Reg. No.",  width: "80" },

    { field: "propertyLogo", title:"Logo",  width: "80", editor: fileUploadEditor
    ,template: "<div class='propertyLogo'><a></a>#=propertyLogo#</div>" },

    { field: "propertyColor", title:"Color", width: "80px",  editor : getColor, template:  function(dataItem) {
      return "<div style='background-color: " + dataItem.propertyColor + ";'>&nbsp;</div>";
    }},

    { field: "noOfRooms", title:"No of Rooms",  width: "80px", format: "", template: "<div class='unit'>#= noOfRooms#</div>" },

    //Button Name
    { command: [{ name: "edit", text: {	
      edit: "Edit", 
      update: "Update", 
      cancel: "Cancel"} } 
      ], title: "" }
  ],
  save: onSave, // <--  checking duplicate error.
  noRecords: {template: "No Records" }	
}).data("kendoGrid");  //end of kendo grid


function fileUploadEditor(container, options) {
  $('<input type="file" id="fileUpload" name="fileUpload" /> ')
  .appendTo(container)
  .kendoUpload({ 
    multiple:false,
    async: {
      saveUrl: "./image.php",
      autoUpload: true,
    },
    validation: {
      allowedExtensions: [".jpg", ".png", ".jpeg"]
    },
    success: onSuccess,    // just a console log to view progress
    upload: onUpload,      // just a console log to view progress
    progress: onProgress   // just a console log to view progress
  });
}

My image.php

Image will convert into base64 and store into hexString variable. Once getPropertyMasterData.php been called it will fetch hexString value. Currently in here I can see it successful return a value.

<?php  
$file = $_FILES['fileUpload'];	
$fileName = $_FILES['fileUpload']['name'];
$fileTmpName = $_FILES['fileUpload']['tmp_name']; //directory location	
$fileSize = $_FILES['fileUpload']['size'];
$fileError = $_FILES['fileUpload']['error'];  //default 0 | 1 got error

$fileExt = explode('.', $fileName);	  //split file name to get ext name.
$fileActualExt = strtolower(end($fileExt)); //change to lowercase for the extension file
$allowed = array('jpg','jpeg','png');

  if (!in_array($fileActualExt, $allowed)) {
    return ['error' => 'You cannot upload files of this type!'];
  }

  if ($fileError !== 0) {
    return ['error' => 'Error occur when upload file!'];
  }

  if ($fileSize > 500000) {
    return ['error' => 'Your file size is too big!'];
  }

$fileDestination = './uploads/' . $fileName;                    
move_uploaded_file($fileTmpName, $fileDestination); 

$data = file_get_contents($fileTmpName);
return ['hexString' => base64_encode($data)];
?>

My getPropertyMasterData.php
Supposedly $uploadPayload['hexString'] will fetch a variable from image.php but somehow it return NULL result. Other fields works fine.

<?php
  $propertyID = "1";
  include($_SERVER['DOCUMENT_ROOT'] . '/TM.pdo.php'); 
  $ehorsObj = new TM();
  $ehorsObj->TM_CONNECT($propertyID);

  $uploadPayload = require "image.php";  // READ FILE FROM image.php  |  Return NULL result

  if (isset($uploadPayload['error'])) {
      // echo $uploadPayload['error']);
      /* do something in case of error */
  }

  $method = $_POST['method'];
  switch ($method){
    case "getPropertyMasterData" :
      $method($ehorsObj);
      break;

    case "editPropertyMasterData" :
      $method($ehorsObj, $uploadPayload['hexString']);
      break;
    default:
      break;
  }


  /** READ **/  
  function getPropertyMasterData($ehorsObj) {
      $getcheckbox = (isset($_POST['c1']) ? $_POST['c1'] : "all"); // by default select *
      $sql         = "SELECT * FROM tblAdmProperty ";
      if ($getcheckbox == "true") {
        $sql .= " WHERE active = 'y' ";
    } 
    $sql .= " ORDER BY 2 ASC " ;
    $array = array();	

    $GetResult = $ehorsObj->FetchData($sql, $ehorsObj->DEFAULT_PDO_CONNECTIONS);
    while ($row = $GetResult->fetch()){
      $array[] = $row;
    }
    header("Content-type: application/json");
    $result = json_encode($array);
    echo $result;
  }


  /** EDIT **/
  function editPropertyMasterData($ehorsObj, $NewHexString) {
    $propertyID     = (isset($_POST['propertyID']) ? $_POST['propertyID'] : '');
    $propertyName   = (isset($_POST['propertyName']) ? $_POST['propertyName'] : '');
    $propertyLogo   = (isset($_POST['propertyLogo']) ? $_POST['propertyLogo'] : '');
    $propertyColor   = (isset($_POST['propertyColor']) ? $_POST['propertyColor'] : '');
    $businessRegistrationNo   = (isset($_POST['businessRegistrationNo']) ? $_POST['businessRegistrationNo'] : '');
    $noOfRooms   = (isset($_POST['noOfRooms']) ? $_POST['noOfRooms'] : '');
    $active 		= (isset($_POST['active']) ? $_POST['active'] : '');

    $sqlUpdate = " UPDATE tblAdmProperty
      SET propertyName = '" . $propertyName . "',
      propertyLogo = '" . $NewHexString . "',
      propertyColor = '" . $propertyColor . "',
      businessRegistrationNo = '" . $businessRegistrationNo . "',
      noOfRooms = '" . $noOfRooms . "',
      active = '" . $active . "'
      WHERE propertyID = '" . $propertyID . "' ";  
    $ehorsObj->ExecuteData($sqlUpdate, $ehorsObj->DEFAULT_PDO_CONNECTIONS);
  }

?>

It works if I use cookies or session but I try to avoid using that. I hope I provide a clear explanation.

回答1:

Finally, I manage to get it works.

First, I create a hidden textbox <input type="hidden" id='uploadedFile' data-bind="value: propertyLogo" />
Fixed my fileUploadEditor function and add remove.php (optional). onSucces event will fetch the server response in image.php and push into textbox value which I create before.

function onSuccess(e) {
	console.log(e.response);
	/* push server respoonse to texbox */
	$("#uploadedFile").val(e.response);
}

function fileUploadEditor(container, options){
	$('<input type="file" id="propertyLogo" name="propertyLogo"  /> ')
	.appendTo(container)
	.kendoUpload({
		multiple:false,
		async: {
			saveUrl: "image.php", 
			removeUrl: "remove.php", 
			autoUpload: true,
		},
		validation: {
			allowedExtensions: [".jpg", ".png", ".jpeg"]
	    },
		success: onSuccess
	});
	$("<span class='k-invalid-msg' data-for='propertyLogo'></span>").appendTo(container);
}

image.php after convert into base64, it need to be in json format

<?php

$fileParam = "propertyLogo";
$uploadRoot = "uploads/";
$files = $_FILES[$fileParam];

  if (isset($files['name'])){
    $error = $files['error'];
    if ($error == UPLOAD_ERR_OK) {

      $fileSize = $files['size'];
      if ($fileSize < 500000) { 		//500000 = 500mb

        $targetPath = $uploadRoot . basename($files["name"]);
        $uploadedFile = $files["tmp_name"];

        /* get a full paths */
        $fullpath = getcwd();
        $newTargetPath = $fullpath . '/' . $targetPath;

        move_uploaded_file($uploadedFile, $newTargetPath); 

        /* convert data into base64 */
        $data = file_get_contents($uploadedFile);
        $hex_string = base64_encode($data);

        header('Content-Type: application/json');
        echo json_encode($hex_string);

      } else {
       echo "Your file size is too big! ";
      }	
    } else {
     echo "Error code " . $error;
    }
  }

  // Return an empty string to signify success
  echo "";

?>

remove.php

<?php
  $fileParam = "propertyLogo";
  $uploadRoot = "uploads/";
  $targetPath = $uploadRoot . basename($_POST["name"]);

  unlink($targetPath);

  echo "";
?>

Lastly on my Kendo ui Grid save event i add this line, basically fetch the value from textbox and set into my propertyLogo field

save: function(e){ e.model.set("propertyLogo",$("#uploadedFile").val()); }

来源：https://stackoverflow.com/questions/56829239/kendo-grid-inline-editing-with-kendo-upload-return-an-null-result

标签

php

jquery

kendo-ui

kendo-grid

kendo-upload