integrated with Dropzone and PHP<\/a>.<\/p>\nIf your web application is developed with CodeIgniter and wants to upload multiple files or images, this functionality can be implemented with Dropzone. In this tutorial, we will show you how to integrate drag and drop file upload in CodeIgniter<\/b> using DropzoneJS.<\/p>\n
In the example code, the following functionality will be implemented to upload multiple files with drap & drop<\/b> feature in CodeIgniter.<\/p>\n\n- Allow users to drag and drop multiple files to upload.<\/li>\n
- Upload multiple files to the server using CodeIgniter\u2019s Upload library.<\/li>\n
- Store file data in the MySQL database.<\/li>\n
- Retrieve files\/images from the database and display them on the web page.<\/li>\n<\/ul>\n
Before getting started, take a look at the file structure of the sample CodeIgniter Drag & Drop File Upload<\/b> application.<\/p>\ncodeigniter_drag_drop_file_upload\/<\/span>\r\n\u251c\u2500\u2500 application\/<\/span>\r\n\u2502 \u251c\u2500\u2500 controllers\/<\/span>\r\n\u2502 \u2502 \u2514\u2500\u2500 Upload_file.php\r\n\u2502 \u251c\u2500\u2500 models\/<\/span>\r\n\u2502 \u2502 \u2514\u2500\u2500 File.php\r\n\u2502 \u2514\u2500\u2500 views\/<\/span>\r\n\u2502 \u2514\u2500\u2500 upload_file\/<\/span>\r\n\u2502 \u2514\u2500\u2500 index.php\r\n\u2502\u2500\u2500 assets\/<\/span>\r\n\u2502 \u251c\u2500\u2500 js\/<\/span>\r\n\u2502 \u2502 \u2514\u2500\u2500 dropzone\/<\/span>\r\n\u2502 \u2502 \u2502\u2500\u2500 dropzone.min.js\r\n\u2502 \u2502 \u2514\u2500\u2500 dropzone.min.css\r\n\u2502 \u2514\u2500\u2500 css\/<\/span>\r\n\u2502 \u2514\u2500\u2500 style.css\r\n\u2502\r\n\u2514\u2500\u2500 uploads\/<\/span>\r\n<\/pre>\nCreate Database Table<\/h2>\n
To store the file information, a table is required in the database. The following SQL creates a files table with some basic fields in the MySQL database.<\/p>\n
CREATE<\/span> TABLE<\/span> `files`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `file_name`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `uploaded_on`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nCreate Upload Folder<\/h2>\n
To store the files, a directory is required on the server. Create a folder (uploads\/<\/code>) in the root folder of the CodeIgniter application where you want to store the uploaded files.<\/p>\nController (Upload_file.php)<\/h2>\n
The Upload_File controller handles the multiple files upload functionality.<\/p>\n
\n- __construct()<\/b> \u2013\n
\n- Loads File model that helps to insert file info into the database and fetch files data from the database.<\/li>\n<\/ul>\n<\/li>\n
- index()<\/b> \u2013\n
\n- Fetch all images from the database using the
getRows()<\/code> method of the File model.<\/li>\n- Pass files data to the view.<\/li>\n<\/ul>\n<\/li>\n
- dragDropUpload()<\/b> \u2013\n
\n- Set preferences (upload path, allowed types, etc), load and initialize the Upload library.<\/li>\n
- Upload files to the server using the
do_upload()<\/code> function of the Upload library.<\/li>\n- Insert the file data in the database using the
insert()<\/code> method of the File model.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<?php
defined<\/span>(<\/span>'BASEPATH'<\/span>) OR exit(<\/span>'No direct script access allowed'<\/span>);
class <\/span>Upload_File <\/span>extends <\/span>CI_Controller <\/span>{
function <\/span>__construct<\/span>() {
<\/span>parent<\/span>::<\/span>__construct<\/span>();
<\/span>\/\/ Load file model
<\/span>$this<\/span>-><\/span>load<\/span>-><\/span>model<\/span>(<\/span>'file'<\/span>);
}
function <\/span>index<\/span>(){
<\/span>$data <\/span>= array();
<\/span>\/\/ Get files data from the database
<\/span>$data<\/span>[<\/span>'files'<\/span>] = <\/span>$this<\/span>-><\/span>file<\/span>-><\/span>getRows<\/span>();
<\/span>\/\/ Pass the files data to view
<\/span>$this<\/span>-><\/span>load<\/span>-><\/span>view<\/span>(<\/span>'upload_file\/index'<\/span>, <\/span>$data<\/span>);
}
function <\/span>dragDropUpload<\/span>(){
if(!empty(<\/span>$_FILES<\/span>)){
<\/span>\/\/ File upload configuration
<\/span>$uploadPath <\/span>= <\/span>'uploads\/'<\/span>;
<\/span>$config<\/span>[<\/span>'upload_path'<\/span>] = <\/span>$uploadPath<\/span>;
<\/span>$config<\/span>[<\/span>'allowed_types'<\/span>] = <\/span>'*'<\/span>;
<\/span>\/\/ Load and initialize upload library
<\/span>$this<\/span>-><\/span>load<\/span>-><\/span>library<\/span>(<\/span>'upload'<\/span>, <\/span>$config<\/span>);
<\/span>$this<\/span>-><\/span>upload<\/span>-><\/span>initialize<\/span>(<\/span>$config<\/span>);
<\/span>\/\/ Upload file to the server
<\/span>if(<\/span>$this<\/span>-><\/span>upload<\/span>-><\/span>do_upload<\/span>(<\/span>'file'<\/span>)){
<\/span>$fileData <\/span>= <\/span>$this<\/span>-><\/span>upload<\/span>-><\/span>data<\/span>();
<\/span>$uploadData<\/span>[<\/span>'file_name'<\/span>] = <\/span>$fileData<\/span>[<\/span>'file_name'<\/span>];
<\/span>$uploadData<\/span>[<\/span>'uploaded_on'<\/span>] = <\/span>date<\/span>(<\/span>\"Y-m-d H:i:s\"<\/span>);
<\/span>\/\/ Insert files info into the database
<\/span>$insert <\/span>= <\/span>$this<\/span>-><\/span>file<\/span>-><\/span>insert<\/span>(<\/span>$uploadData<\/span>);
}
}
}
}<\/span><\/pre>\nModel (File.php)<\/h2>\n
The File model handles the database related operations (fetch and insert).<\/p>\n
\n- __construct()<\/b> \u2013 Define the table name where the files data will be stored.<\/li>\n
- getRows()<\/b> \u2013\n
\n- Fetch the file data from the database.<\/li>\n
- Returns a single record if the ID is specified, otherwise all records.<\/li>\n<\/ul>\n<\/li>\n
- insert()<\/b> \u2013\n
\n- Insert file data into the database using the
insert()<\/code> function of CodeIgniter Query Builder Class.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<?php
defined<\/span>(<\/span>'BASEPATH'<\/span>) OR exit(<\/span>'No direct script access allowed'<\/span>);
class <\/span>File <\/span>extends <\/span>CI_Model<\/span>{
function <\/span>__construct<\/span>() {
<\/span>$this<\/span>-><\/span>tableName <\/span>= <\/span>'files'<\/span>;
}
<\/span>\/*
* Fetch files data from the database
* @param id returns a single record if specified, otherwise all records
*\/
<\/span>public function <\/span>getRows<\/span>(<\/span>$id <\/span>= <\/span>''<\/span>){
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>select<\/span>(<\/span>'id,file_name,uploaded_on'<\/span>);
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>from<\/span>(<\/span>