PHP Datagrid AJAX File Upload

*The file upload is supported under the commercial license.


File upload is one of the most requested features. It requires only a SINGLE LINE of code through a single function call to set_col_fileupload(). If the PHP is installed as Apache module on the web server, the 3rd parameter is optional that the physical path is automatically mapped based on 2nd parameter, the base URL.

All the file operations (Update, Delete) are Ajax-based. The page does not refresh after a file upload.

$dg = new C_DataGrid("SELECT * FROM shippers", "ShipperID", "shippers");
$dg -> set_col_fileupload("fileToUpload", '/phpGridx/photos/');
$dg -> enable_edit('FORM');
$dg -> set_col_img("fileToUpload", "/phpGridx/photos/");
$dg -> display();

You should consider resizing images displayed so large images won’t blow your php grid out of proportion. Read more about Image resize using CSS.

Note that a common issue users running into during upload is get a alert message about “unexpected token <“. It is because your upload folder doesn’t allow write permission. Please set the folder permission to be writable.


File Upload System Requirements:

  • Only a single file upload per datagrid is allowed.
  • FORM edit mode only
  • File system with valid upload_tmp_dir value in php.ini
  • File name column should allow NULL value
  • $physical_path is automatically obtained if PHP running in Apache module, or MUST be provided as fallback


The below screenshot illustrates the file edit operations in edit form. It has the “delete” button to remove the existing file before uploading a new one. The file name is saved to table “shippers”.



The below screen shows uploading new file as part of creating a new record by click on “choose file”, then pick file “truck.jpg” from the local system. Then the file “truck.jpg” is saved to file system under “/phpGridx/foo/” folder, and the
file name is stored in table “shippers” alone with rest of data.



The following screen shows that new record has been successfully created and the file “truck.jpg” has been successfully uploaded.