redw1ne
Whimsical Wizard
LEVEL 1
300 XP
In this tutorial, you will learn how the Simple Way of Uploading Files using PHP CodeIgniter. CodeIgniter is one of the popular PHP frameworks that make the developer jobs easier. The goal of this tutorial is to provide the new programmers, especially those who are new to CodeIgniter Framework an Idea of how to upload files. Here, I will be providing a simple application source code that demonstrates our goal for the tutorial.
Getting Started
Before we continue to the coding part, kindly download the following so you could also run the demo application on your end.
The demo application source code I will be providing only uses CDNs for loading the Bootstrap Framework Dependencies. Bootstrap Framework is a CSS (Cascading Style Sheet) that helps the developer to build an application with a good and pleasant user design or user interface to give end-users a better experience while using the application. You must connect to the internet so the CDNs will work and so the system design.
Creating the Database
The database will serve as the storage of the file details that the users will upload to the application.
App Configuration
Open the App >> Config >> App.php
file in your text editor and configure it the same as the script below. In my case, I named my source code folder as ci4_file_upload which you can find in the $baseURL variable. The script below is not the full script of this file. It only shows the part where changes need to be done on your end for this tutorial.
Configuring the Route
On your App >> Config
directory, you will find a PHP file named Routes.php. Open the file on your text editor and configure it like the script below. This will allow us to browse the part or pages on the application using the specific segments or URLs.
Creating the Model
On your App >> models
directory, create a new PHP file named File.php. This file contains the script and variables for our application to manage data in our database file_upload table. Write the following script below and save the file.
Creating the Controller
On your App >> Controllers
directory, create a new PHP file naming Main.php. This file contains the PHP codes that display our pages and process our uploaded data. Write the following script on your end too.
Creating the View
Lastly, create a new file naming home.php on your App >> Views
directory. This file contains the HTML and PHP Scripts of our application interface. The script contains included CDNs, our form panel elements, and the display panel for the list of uploaded files.
That's it! You can now test the application on your end. To do that, browse http://localhost/[source_code_folder_name]/public/
in your browser. Check the application if it works and achieves our goal for this tutorial.
DEMO VIDEO
If in any case you'll find or encounter any errors on your end, please review your source code maybe you have missed something or you can also download the working source code I created for this tutorial. The download link is located below this article.
That's the end of this tutorial. I hope this tutorial will help you with what you are looking for and you'll find this useful for your current or future CodeIgniter Project. Explore more on this website for more tutorials and Free Source Codes.
Happy Coding :)
Download
Getting Started
Before we continue to the coding part, kindly download the following so you could also run the demo application on your end.
- XAMPP
- This is a virtual server that allows your local machine to run our PHP Scripts. You can also use other similar software.
- This is a virtual server that allows your local machine to run our PHP Scripts. You can also use other similar software.
- CodeIgniter
- Since this tutorial uses the CodeIgniter Framework, you must download it.
- Since this tutorial uses the CodeIgniter Framework, you must download it.
The demo application source code I will be providing only uses CDNs for loading the Bootstrap Framework Dependencies. Bootstrap Framework is a CSS (Cascading Style Sheet) that helps the developer to build an application with a good and pleasant user design or user interface to give end-users a better experience while using the application. You must connect to the internet so the CDNs will work and so the system design.
Creating the Database
- Open your XAMPP's Control Panel and start the Apache and the MySQL Server.
- Open a new tab on your browser and browse
.
Loading…
localhost
- Create a new database naming "file_upload_db"
- Then, navigate your page to the SQL page and copy/paste the MySQL Script below. The script will create a new table in your database with the columns needed on the app.
- CREATE
TABLE
`files`
(
`id`
int
(
30
)
UNSIGNED
NOT
NULL
PRIMARY KEY
AUTO_INCREMENT
,
`label`
varchar
(
250
)
NOT
NULL
,
`path`
text
DEFAULT
NULL
,
`created_
at`
datetime
DEFAULT
current_timestamp
(
)
,
`updated_
at`
datetime
DEFAULT
current_timestamp
(
)
ON
UPDATE
current_timestamp
(
)
)
ENGINE
=
InnoDB
DEFAULT
CHARSET
=
utf8;
The database will serve as the storage of the file details that the users will upload to the application.
App Configuration
Open the App >> Config >> App.php
file in your text editor and configure it the same as the script below. In my case, I named my source code folder as ci4_file_upload which you can find in the $baseURL variable. The script below is not the full script of this file. It only shows the part where changes need to be done on your end for this tutorial.
- <?php
- namespace
Config;
- use
CodeIgniter\Config\BaseConfig;
- use
CodeIgniter\Session\Handlers\FileHandler;
- class
App extends
BaseConfig
- {
- /**
- * --------------------------------------------------------------------------
- * Base Site URL
- * --------------------------------------------------------------------------
- *
- * URL to your CodeIgniter root. Typically this will be your base URL,
- * WITH a trailing slash:
- *
- * http://example.com/
- *
- * If this is not set then CodeIgniter will try guess the protocol, domain
- * and path to your installation. However, you should always configure this
- * explicitly and never rely on auto-guessing, especially in production
- * environments.
- *
- * @var string
- */
- public
$baseURL
=
'http://localhost/ci4_file_upload/public/'
;
- /**
- * --------------------------------------------------------------------------
- * Index File
- * --------------------------------------------------------------------------
- *
- * Typically this will be your index.php file unless you've renamed it to
- * something else. If you are using mod_rewrite to remove the page set this
- * variable so that it is blank.
- *
- * @var string
- */
- public
$indexPage
=
''
;
Configuring the Route
On your App >> Config
directory, you will find a PHP file named Routes.php. Open the file on your text editor and configure it like the script below. This will allow us to browse the part or pages on the application using the specific segments or URLs.
- <?php
- namespace
Config;
- // Create a new instance of our RouteCollection class.
- $routes
=
Services::
routes
(
)
;
- // Load the system's routing file first, so that the app and ENVIRONMENT
- // can override as needed.
- if
(
is_file
(
SYSTEMPATH .
'Config/Routes.php'
)
)
{
- require
SYSTEMPATH .
'Config/Routes.php'
;
- }
- /*
- * --------------------------------------------------------------------
- * Router Setup
- * --------------------------------------------------------------------
- */
- $routes
->
setDefaultNamespace
(
'App\Controllers'
)
;
- $routes
->
setDefaultController
(
'Main'
)
;
- $routes
->
setDefaultMethod
(
'index'
)
;
- $routes
->
setTranslateURIDashes
(
false
)
;
- $routes
->
set404Override
(
)
;
- // The Auto Routing (Legacy) is very dangerous. It is easy to create vulnerable apps
- // where controller filters or CSRF protection are bypassed.
- // If you don't want to define all routes, please use the Auto Routing (Improved).
- // Set `$autoRoutesImproved` to true in `app/Config/Feature.php` and set the following to true.
- //$routes->setAutoRoute(false);
- /*
- * --------------------------------------------------------------------
- * Route Definitions
- * --------------------------------------------------------------------
- */
- // We get a performance increase by specifying the default
- // route since we don't have to scan directories.
- $routes
->
get
(
'/'
,
'Main::index'
)
;
- $routes
->
post
(
'file/upload'
,
'Main::upload'
)
;
- /*
- * --------------------------------------------------------------------
- * Additional Routing
- * --------------------------------------------------------------------
- *
- * There will often be times that you need additional routing and you
- * need it to be able to override any defaults in this file. Environment
- * based routes is one such time. require() additional route files here
- * to make that happen.
- *
- * You will have access to the $routes object within that file without
- * needing to reload it.
- */
- if
(
is_file
(
APPPATH .
'Config/'
.
ENVIRONMENT .
'/Routes.php'
)
)
{
- require
APPPATH .
'Config/'
.
ENVIRONMENT .
'/Routes.php'
;
- }
Creating the Model
On your App >> models
directory, create a new PHP file named File.php. This file contains the script and variables for our application to manage data in our database file_upload table. Write the following script below and save the file.
- <?php
- namespace
App\Models;
- use
CodeIgniter\Model;
- class
File
extends
Model
- {
- protected
$DBGroup
=
'default'
;
- protected
$table
=
'files'
;
- protected
$primaryKey
=
'id'
;
- protected
$useAutoIncrement
=
true
;
- protected
$insertID
=
0
;
- protected
$returnType
=
'array'
;
- protected
$useSoftDeletes
=
false
;
- protected
$protectFields
=
true
;
- protected
$allowedFields
=
[
'label'
,
'path'
]
;
- // Dates
- protected
$useTimestamps
=
false
;
- protected
$dateFormat
=
'datetime'
;
- protected
$createdField
=
'created_at'
;
- protected
$updatedField
=
'updated_at'
;
- protected
$deletedField
=
'deleted_at'
;
- // Validation
- protected
$validationRules
=
[
]
;
- protected
$validationMessages
=
[
]
;
- protected
$skipValidation
=
false
;
- protected
$cleanValidationRules
=
true
;
- // Callbacks
- protected
$allowCallbacks
=
true
;
- protected
$beforeInsert
=
[
]
;
- protected
$afterInsert
=
[
]
;
- protected
$beforeUpdate
=
[
]
;
- protected
$afterUpdate
=
[
]
;
- protected
$beforeFind
=
[
]
;
- protected
$afterFind
=
[
]
;
- protected
$beforeDelete
=
[
]
;
- protected
$afterDelete
=
[
]
;
- }
Creating the Controller
On your App >> Controllers
directory, create a new PHP file naming Main.php. This file contains the PHP codes that display our pages and process our uploaded data. Write the following script on your end too.
- <?php
- namespace
App\Controllers;
- use
App\Controllers\BaseController;
- use
App\Models\File
;
- class
Main extends
BaseController
- {
- public
function
__construct(
)
{
- $this
->
db
=
db_connect(
)
;
- $this
->
model
=
new
File
;
- $this
->
session
=
session(
)
;
- $this
->
request
=
\Config\Services::
request
(
)
;
- $this
->
data
[
'session'
]
=
$this
->
session
;
- $this
->
data
[
'request'
]
=
$this
->
request
;
- $this
->
data
[
'uploads'
]
=
$this
->
model
->
findAll
(
)
;
- }
- public
function
index(
)
{
- return
view(
'home'
,
$this
->
data
)
;
- }
- public
function
upload(
)
{
- if
(
!
is_dir
(
'./uploads/'
)
)
- mkdir
(
'./uploads/'
)
;
- $label
=
$this
->
request
->
getPost
(
'label'
)
;
- $file
=
$this
->
request
->
getFile
(
'file'
)
;
- $fname
=
$file
->
getRandomName
(
)
;
- while
(
true
)
{
- $check
=
$this
->
model
->
where
(
"path"
,
"uploads/{$fname}
"
)
->
countAllResults
(
)
;
- if
(
$check
>
0
)
{
- $fname
=
$file
->
getRandomName
(
)
;
- }
else
{
- break
;
- }
- }
- if
(
$file
->
move
(
"uploads/"
,
$fname
)
)
{
- $this
->
model
->
save
(
[
- "label"
=>
$this
->
db
->
escapeString
(
$label
)
,
- "path"
=>
"uploads/"
.
$fname
- ]
)
;
- $this
->
session
->
setFlashdata
(
'main_success'
,
"New File Uploaded successfully."
)
;
- return
redirect(
)
->
to
(
'/'
)
;
- }
else
{
- $this
->
session
->
setFlashdata
(
'main_success'
,
"File Upload failed."
)
;
- }
- return
view(
'home'
,
$this
->
data
)
;
- }
- }
Creating the View
Lastly, create a new file naming home.php on your App >> Views
directory. This file contains the HTML and PHP Scripts of our application interface. The script contains included CDNs, our form panel elements, and the display panel for the list of uploaded files.
- <!DOCTYPE html>
- <html
lang
=
"en"
>
- <head
>
- <meta
charset
=
"UTF-8"
>
- <meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
- <meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
- <title
>
CodeIgniter File Upload</
title
>
- <!-- Font Awesome -->
- <link
rel
=
"stylesheet"
href
=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity=
"sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin=
"anonymous"
referrerpolicy=
"no-referrer"
/
>
- <link
rel
=
"stylesheet"
href
=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
integrity=
"sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw=="
crossorigin=
"anonymous"
referrerpolicy=
"no-referrer"
/
>
- <!-- Bootstrap -->
- <link
rel
=
"stylesheet"
href
=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin=
"anonymous"
>
- <!-- Font Awesome -->
- <script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"
integrity=
"sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ=="
crossorigin=
"anonymous"
referrerpolicy=
"no-referrer"
></
script
>
- <script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity=
"sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin=
"anonymous"
referrerpolicy=
"no-referrer"
></
script
>
- <script
src
=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin=
"anonymous"
></
script
>
- <script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"
integrity=
"sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A=="
crossorigin=
"anonymous"
referrerpolicy=
"no-referrer"
></
script
>
- <style
>
- html, body{
- height:100%;
- width:100%;
- }
- </
style
>
- </
head
>
- <body
class
=
"bg-dark bg-gradient bg-opacity-25"
>
- <div
class
=
"container py-4"
>
- <h1
class
=
"text-center fw-bold"
>
File Uploading in CodeIgniter 4</
h1
>
- <hr
>
- <?php if(
$session->
getFlashdata('main_error')): ?>
- <div
class
=
"alert alert-danger rounded-0"
>
- <?=
$session->
getFlashdata('main_error') ?>
- </
div
>
- <?php endif; ?>
- <?php if(
$session->
getFlashdata('main_success')): ?>
- <div
class
=
"alert alert-success rounded-0"
>
- <?=
$session->
getFlashdata('main_success') ?>
- </
div
>
- <?php endif; ?>
- <div
class
=
"clear-fix py-2"
></
div
>
- <div
class
=
"row"
>
- <div
class
=
"col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
- <div
class
=
"card rounded-0 shadow"
>
- <div
class
=
"card-header"
>
- <div
class
=
"card-title h4 mb-0 fw-bold"
>
Upload File Form</
div
>
- </
div
>
- <div
class
=
"card-body"
>
- <div
class
=
"container-fluid"
>
- <form
action
=
"<?= base_url('file/upload') ?>
" method="POST" id="file-upload" enctype="multipart/form-data">
- <div
class
=
"mb-3"
>
- <label
for
=
"label"
class
=
"control-label"
>
File Label</
label
>
- <input
type
=
"text"
name
=
"label"
id
=
"label"
class
=
"form-control rounded-0"
>
- </
div
>
- <div
class
=
"mb-3"
>
- <label
for
=
"formFile"
class
=
"form-label"
>
File</
label
>
- <input
class
=
"form-control rounded-0"
name
=
"file"
type
=
"file"
id
=
"formFile"
>
- </
div
>
- </
form
>
- </
div
>
- </
div
>
- <div
class
=
"card-footer text-center"
>
- <button
class
=
"btn btn-primary btn-sm bg-gradient rounded-0"
form=
"file-upload"
><i
class
=
"fa fa-save"
></
i
>
Save File</
button
>
- <button
class
=
"btn btn-light border btn-sm bg-gradient rounded-0"
type
=
"reset"
form=
"file-upload"
><i
class
=
"fa fa-times"
></
i
>
Reset</
button
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"col-lg-8 col-md-6 col-sm-12 col-xs-12"
>
- <div
class
=
"card rounded-0 shadow"
>
- <div
class
=
"card-header"
>
- <div
class
=
"card-title h4 mb-0 fw-bolder"
>
Uploaded Files</
div
>
- </
div
>
- <div
class
=
"card-body"
>
- <div
class
=
"container-fluid"
>
- <table
class
=
"table table-striped table-bordered"
>
- <colgroup
>
- <col
width
=
"10%"
>
- <col
width
=
"20%"
>
- <col
width
=
"50%"
>
- <col
width
=
"20%"
>
- </
colgroup
>
- <thead
>
- <tr
class
=
"bg-primary bg-gradient text-light"
>
- <th
class
=
"p-1 text-center"
>
#</
th
>
- <th
class
=
"p-1 text-center"
>
Label</
th
>
- <th
class
=
"p-1 text-center"
>
Path</
th
>
- <th
class
=
"p-1 text-center"
></
th
>
- </
tr
>
- </
thead
>
- <tbody
>
- <?php
- $i =
1
;
- foreach(
$uploads as $row)
:
- $row[
'fname'
]
=
str_replace(
"uploads/"
,""
, $row[
'path'
]
)
;
- ?>
- <tr
>
- <td
class
=
"px-2 py-1 align-middle text-center"
><?=
number_format(
$i++)
?></
td
>
- <td
class
=
"px-2 py-1 align-middle"
><?=
$row[
'label'
]
?></
td
>
- <td
class
=
"px-2 py-1 align-middle"
><p
class
=
"m-0 text-truncate"
title
=
"<?= $row['fname'] ?>
"><?=
$row[
'fname'
]
?></
p
></
td
>
- <td
class
=
"px-2 py-1 align-middle text-center"
>
- <a
href
=
"<?= $row['path'] ?>
" class="text-muted text-decoration-none mx-2" target="_blank" title="View File"><i
class
=
"fa fa-external-link"
></
i
></
a
>
- <a
href
=
"<?= base_url($row['path']) ?>
" class="text-primary fw-bolder text-decoration-none mx-2" target="_blank" title="Download File" download="<?=
$row[
'fname'
]
?>
"><i
class
=
"fa fa-download"
></
i
></
a
>
- </
td
>
- </
tr
>
- <?php endforeach; ?>
- <?php if(
!isset(
$uploads)
|| (
isset(
$uploads)
&& count(
$uploads)
<=
0
)
)
: ?>
- <tr
>
- <th
colspan
=
"4"
class
=
"p-1 text-center"
>
No records found</
th
>
- </
tr
>
- <?php endif; ?>
- </
tbody
>
- </
table
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- </
div
>
- </
body
>
- </
html
>
That's it! You can now test the application on your end. To do that, browse http://localhost/[source_code_folder_name]/public/
in your browser. Check the application if it works and achieves our goal for this tutorial.
DEMO VIDEO
If in any case you'll find or encounter any errors on your end, please review your source code maybe you have missed something or you can also download the working source code I created for this tutorial. The download link is located below this article.
That's the end of this tutorial. I hope this tutorial will help you with what you are looking for and you'll find this useful for your current or future CodeIgniter Project. Explore more on this website for more tutorials and Free Source Codes.
Happy Coding :)
Download
You must upgrade your account or reply in the thread to view the hidden content.