*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(). The Upload directory settings is now in conf.php using constant UPLOADDIR (v7.4.5+).
All the file operations (Update, Delete) are Ajax-based. The page does not refresh after a file upload.
1 2 3 4 5 | $dg = new C_DataGrid("SELECT * FROM shippers", "ShipperID", "shippers"); $dg -> set_col_fileupload("fileToUpload"); $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 user running into during upload is getting an 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
- Must set UPLOADDIR in conf.php for Upload directory (New in v7.4.5 ).
- Be sure the folder specified in UPLOADDIR is given write permission.
- 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 the 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 a new file as part of creating a new record by click on “choose file”, then pick file “truck.jpg” from the local system. The uploaded file will be saved to the folder specified in UPLOADDIR, and the file name is stored in table “shippers” alone with the rest of the data.
The following screen shows that a new record has been successfully created and the file “truck.jpg” has been successfully uploaded.
Update: Display link to uploaded file
Normally the text displayed in grid are all text. To display a hyperlink to uploaded file, we can use column formatter. Learn more about column formatter and customer column formatter here.
1 2 3 | $dg->set_col_format("fileToUpload", "showlink", array("baseLinkUrl"=>"javascript:", "target"=>"_new", "showAction"=>"gotoUrl(jQuery('#fileToUpload'),'", "addParam"=>"');")); |
In Javascript “url” variable, be sure to use specific file upload path on your server.
1 2 3 4 5 6 7 8 9 10 | <script> gotoUrl = function (grid,param) { var ar = param.split('='); if (grid.length > 0 && ar.length === 2 && ar[0] === '?id') { var rowid = ar[1]; var url = 'https://example.com/uploads/' + grid.getCell(rowid, 'fileToUpload'); window.location.href = url; } }; </script> |
See “File Upload” on Demo Explorer for complete code snippet.