Upload and Display User Profile Picture Codeigniter
CodeIgniter File Upload
File management is essential to nigh web applications. If y'all are developing a content management organisation, then you will need to be able to upload images, discussion documents, pdf reports, etc. If you are working on a membership site, you may need to take a provision for people to upload their profile images. CodeIgniter's File Uploading class makes it like shooting fish in a barrel for united states to practise all of the higher up.
In this tutorial, we will look at how to use the file upload library to load files.
Uploading Images in CodeIgniter
File uploading in CodeIgniter has 2 main parts. The frontend and the backend. The frontend is handled past the HTML form that uses the form input blazon file. On the backend, the file upload library processes the submitted input from the course and writes it to the upload directory.
Permit's brainstorm with the input form.
Create a new directory called files in application/views directory
Add the following files in awarding/views/files
- upload_form.php – this view contains the HTML form that has the input blazon 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 post-obit lawmaking to upload_form.php
<!DOCTYPE html> <html> <caput> <title>CodeIgniter Image Upload</title> <meta charset="UTF-8"> <meta proper name="viewport" content="width=device-width, initial-calibration=i.0"> </head> <body> <div> <h3>Select an image from your reckoner and upload it to the cloud</h3> <?php if (isset($fault)){ echo $error; } ?> <form method="mail" action="<?=base_url('store-image')?>" enctype="multipart/form-data"> <input type="file" id="profile_image" name="profile_image" size="33" /> <input blazon="submit" value="Upload Image" /> </form> </div> </torso> </html> HERE,
- if (isset($error)){…} checks if the error variable has been set. If the event is true and so the fault returned by the upload library is displayed to the user.
- <input blazon="file" id="profile_image" name="profile_image" size="33″ /> the blazon file allows the user to browser to their computer and select a file for uploading.
Advertising the following code to upload_result.php
<!DOCTYPE html> <html> <head> <title>Prototype Upload Results</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-calibration=ane.0"> </caput> <torso> <div> <h3>Congratulations, the image has successfully been uploaded</h3> <p>Click here to view the epitome yous just uploaded <?=ballast('images/'.$image_metadata['file_name'], 'View My Image!')?> </p> <p> <?php repeat anchor('upload-image', 'Become back to Image Upload'); ?> </p> </div> </body> </html> HERE,
- <?=ballast('images/'.$image_metadata['file_name'], 'View My Image!')?> uses the anchor helper to create a link to the new uploaded file in the images directory. The name is retrieved from the image metadata that is passed to the view when the file has successfully been uploaded.
Allow's now create the controller that will answer to our image uploading
Add a new file ImageUploadController.php in application/controllers
Add the post-obit code to ImageUploadController.php
<?php defined('BASEPATH') OR exit('No direct script access immune'); class ImageUploadController extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url', 'form'); } public office 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', $error); } 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 of operations controller CI_Controller
- public function __construct() {…} initializes the parent constructor method and loads the url and form helpers
- public part index() {…} defines the index method that is used to display the image upload course
- public part 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 every bit php cant exist uploaded because they accept the potential to compromise the server.
- $config['max_size'] = 2000; set the maximum file size in kilobytes. In our case, the maximum file that tin can exist uploaded is two,000kb close to 2MB. If the user tries to upload a file larger than ii,000kb, then the paradigm will fail to upload and the library will return an error message.
- $config['max_width'] = 1500; sets the maximum width of the prototype 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 information technology with the array $config that nosotros divers above.
- if (!$this->upload->do_upload('profile_image')) {…} attempts to upload the submitted image which in our case is named profile_image
- $error = assortment('error' => $this->upload->display_errors()); sets the mistake bulletin if the upload fails
- $this->load->view('files/upload_form', $error); loads the file upload form and displays the error bulletin that is returned from the upload library
- $data = array('image_metadata' => $this->upload->information()); sets the image metadata if the upload has been successful
- $this->load->view('files/upload_result', $data); loads the uploaded successfully view and passes the uploaded file metadata.
That is it for the controller. Allow's at present create the directory where our images will be uploaded to. Create a new directory "images" in the root directory of your application
Finally, we will ad two routes to our routes.php file that volition display the class and display results
Open application/config/routes.php Add the post-obit routes $route['upload-prototype'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
HERE,
- $road['upload-epitome'] = 'imageuploadcontroller'; defines the URL upload-image that calls the index method of ImageUploadController
- $road['store-image'] = 'imageuploadcontroller/shop'; defines the URL store-image that accepts the selected user file and uploads it to the server.
Testing the application
Let'due south start the built-in PHP server
Open the terminal/ command line and browse to the root of your application. In my case, the root is located in drive C:\Sites\ci-app
cd C:\Sites\ci-app
beginning the server using the following command
php -S localhost:3000
Load the post-obit URL in your web browser: http://localhost:3000/upload-image
yous will be able to see the following results
Click on choose file
You lot should be able to run into a dialog window similar to the following
Select your desired epitome then click on open up
The selected file name will show up in the form upload as shown in the paradigm above. Click on an upload image button
You volition get the following results assuming everything goes well
Click on View My Image! Link
You should exist able to see the paradigm that you uploaded. The results volition exist like to the post-obit
Discover uploaded prototype name is displayed in the URL. We got the image name from the uploaded image metadata
Note: The File Upload process remains the aforementioned for other types of files
Source: https://www.guru99.com/codeigniter-file-upload.html
0 Response to "Upload and Display User Profile Picture Codeigniter"
Post a Comment