Upload Image in Html Using Browse Button
CodeIgniter File Upload
File management is essential to most web applications. If you lot are developing a content management system, then you will need to be able to upload images, word documents, pdf reports, etc. If y'all are working on a membership site, you may need to take a provision for people to upload their profile images. CodeIgniter'due south File Uploading form makes it piece of cake for usa to do all of the higher up.
In this tutorial, nosotros will await at how to employ the file upload library to load files.
Uploading Images in CodeIgniter
File uploading in CodeIgniter has two master parts. The frontend and the backend. The frontend is handled past the HTML form that uses the course input type file. On the backend, the file upload library processes the submitted input from the form and writes information technology to the upload directory.
Allow'due south begin with the input grade.
Create a new directory called files in application/views directory
Add the following files in application/views/files
- upload_form.php – this view contains the HTML form that has the input type of file and submits the selected file to the server for processing
- upload_result.php – this view displays the results of the uploaded image including a link that we can click to view the results.
Add the following code to upload_form.php
<!DOCTYPE html> <html> <caput> <title>CodeIgniter Epitome Upload</title> <meta charset="UTF-viii"> <meta proper noun="viewport" content="width=device-width, initial-calibration=1.0"> </caput> <body> <div> <h3>Select an image from your computer and upload it to the deject</h3> <?php if (isset($error)){ echo $error; } ?> <class method="post" activity="<?=base_url('store-image')?>" enctype="multipart/form-information"> <input type="file" id="profile_image" name="profile_image" size="33" /> <input type="submit" value="Upload Image" /> </form> </div> </torso> </html> Hither,
- if (isset($fault)){…} checks if the error variable has been set. If the effect is true and so the error returned by the upload library is displayed to the user.
- <input type="file" id="profile_image" proper noun="profile_image" size="33″ /> the type file allows the user to browser to their calculator and select a file for uploading.
Advertizement the following code to upload_result.php
<!DOCTYPE html> <html> <caput> <championship>Image Upload Results</title> <meta charset="UTF-8"> <meta proper noun="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <h3>Congratulations, the image has successfully been uploaded</h3> <p>Click here to view the epitome you lot just uploaded <?=anchor('images/'.$image_metadata['file_name'], 'View My Prototype!')?> </p> <p> <?php repeat anchor('upload-epitome', 'Go back to Image Upload'); ?> </p> </div> </body> </html> HERE,
- <?=ballast('images/'.$image_metadata['file_name'], 'View My Image!')?> uses the ballast helper to create a link to the new uploaded file in the images directory. The name is retrieved from the paradigm metadata that is passed to the view when the file has successfully been uploaded.
Let's at present create the controller that will reply to our image uploading
Add a new file ImageUploadController.php in application/controllers
Add the following code to ImageUploadController.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); grade ImageUploadController extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url', 'grade'); } public part index() { $this->load->view('files/upload_form'); } public function store() { $config['upload_path'] = './images/'; $config['allowed_types'] = 'gif|jpg|png'; $config['max_size'] = 2000; $config['max_width'] = 1500; $config['max_height'] = 1500; $this->load->library('upload', $config); if (!$this->upload->do_upload('profile_image')) { $error = array('error' => $this->upload->display_errors()); $this->load->view('files/upload_form', $fault); } else { $data = array('image_metadata' => $this->upload->data()); $this->load->view('files/upload_result', $data); } } } HERE,
- class ImageUploadController extends CI_Controller {…} defines our controller class and extends the base controller CI_Controller
- public office __construct() {…} initializes the parent constructor method and loads the url and form helpers
- public role alphabetize() {…} defines the index method that is used to display the image upload grade
- public function store() {…} defines the method that will upload the image and store it on the web application server.
- $config['upload_path'] = './images/'; sets the directory where the images should be uploaded
- $config['allowed_types'] = 'gif|jpg|png'; defines the acceptable file extensions. This is of import for security reasons. The allowed types ensures that only images are uploaded and other file types such as php cant be uploaded because they have the potential to compromise the server.
- $config['max_size'] = 2000; gear up the maximum file size in kilobytes. In our example, the maximum file that can be uploaded is 2,000kb close to 2MB. If the user tries to upload a file larger than 2,000kb, then the image will fail to upload and the library will return an error message.
- $config['max_width'] = 1500; sets the maximum width of the image which in our case is 1,500 px. Any width larger than that results in an error
- $config['max_height'] = 1500; defines the maximum adequate height.
- $this->load->library('upload', $config); loads the upload library and initializes it with the array $config that we defined above.
- if (!$this->upload->do_upload('profile_image')) {…} attempts to upload the submitted epitome which in our case is named profile_image
- $error = array('error' => $this->upload->display_errors()); sets the error message if the upload fails
- $this->load->view('files/upload_form', $fault); loads the file upload grade and displays the error message that is returned from the upload library
- $data = assortment('image_metadata' => $this->upload->data()); sets the image metadata if the upload has been successful
- $this->load->view('files/upload_result', $information); loads the uploaded successfully view and passes the uploaded file metadata.
That is it for the controller. Let's now create the directory where our images volition be uploaded to. Create a new directory "images" in the root directory of your application
Finally, nosotros will advertising two routes to our routes.php file that will brandish the course and display results
Open application/config/routes.php Add the following routes $route['upload-epitome'] = 'imageuploadcontroller'; $route['shop-image'] = 'imageuploadcontroller/shop';
HERE,
- $route['upload-epitome'] = 'imageuploadcontroller'; defines the URL upload-image that calls the alphabetize method of ImageUploadController
- $road['shop-image'] = 'imageuploadcontroller/store'; defines the URL store-prototype that accepts the selected user file and uploads it to the server.
Testing the application
Let'southward kickoff the built-in PHP server
Open up the last/ command line and browse to the root of your application. In my example, the root is located in drive C:\Sites\ci-app
cd C:\Sites\ci-app
start the server using the following command
php -S localhost:3000
Load the following URL in your web browser: http://localhost:3000/upload-image
you will be able to see the following results
Click on choose file
You should be able to see a dialog window similar to the following
Select your desired image then click on open
The selected file name volition show up in the course upload equally shown in the image above. Click on an upload image button
Yous will become the following results bold everything goes well
Click on View My Image! Link
You should be able to see the image that you uploaded. The results will exist similar to the following
Notice uploaded image name is displayed in the URL. Nosotros got the image proper name from the uploaded paradigm metadata
Note: The File Upload procedure remains the same for other types of files
Source: https://www.guru99.com/codeigniter-file-upload.html