Code for Filter Uploading Image Size and Extension in
CodeIgniter File Upload
File management is essential to most web applications. If you are developing a content management system, then you lot will demand to be able to upload images, word documents, pdf reports, etc. If yous are working on a membership site, you may need to take a provision for people to upload their profile images. CodeIgniter's File Uploading grade makes information technology easy for united states of america to do all of the above.
In this tutorial, we will look at how to utilize 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 by the HTML course that uses the form input type file. On the backend, the file upload library processes the submitted input from the form and writes it to the upload directory.
Allow's begin with the input form.
Create a new directory chosen files in application/views directory
Add together the following files in awarding/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 lawmaking to upload_form.php
<!DOCTYPE html> <html> <head> <title>CodeIgniter Image Upload</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <h3>Select an image from your computer and upload information technology to the deject</h3> <?php if (isset($error)){ echo $error; } ?> <form method="postal service" activity="<?=base_url('store-paradigm')?>" enctype="multipart/grade-data"> <input type="file" id="profile_image" proper noun="profile_image" size="33" /> <input type="submit" value="Upload Image" /> </form> </div> </body> </html> Here,
- if (isset($error)){…} checks if the error variable has been set. If the result is true then the error returned by the upload library is displayed to the user.
- <input type="file" id="profile_image" name="profile_image" size="33″ /> the type file allows the user to browser to their computer and select a file for uploading.
Ad the post-obit lawmaking to upload_result.php
<!DOCTYPE html> <html> <head> <title>Image Upload Results</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-calibration=1.0"> </head> <body> <div> <h3>Congratulations, the epitome has successfully been uploaded</h3> <p>Click here to view the image you but uploaded <?=ballast('images/'.$image_metadata['file_name'], 'View My Paradigm!')?> </p> <p> <?php echo anchor('upload-image', 'Go back to Image Upload'); ?> </p> </div> </torso> </html> HERE,
- <?=anchor('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'south now create the controller that will answer to our epitome uploading
Add together a new file ImageUploadController.php in application/controllers
Add the post-obit lawmaking to ImageUploadController.php
<?php defined('BASEPATH') OR exit('No direct script admission allowed'); class ImageUploadController extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url', 'form'); } public function alphabetize() { $this->load->view('files/upload_form'); } public part 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 = assortment('fault' => $this->upload->display_errors()); $this->load->view('files/upload_form', $mistake); } else { $information = assortment('image_metadata' => $this->upload->data()); $this->load->view('files/upload_result', $data); } } } HERE,
- form ImageUploadController extends CI_Controller {…} defines our controller grade and extends the base controller CI_Controller
- public function __construct() {…} initializes the parent constructor method and loads the url and form helpers
- public office index() {…} defines the index method that is used to display the image upload form
- public office store() {…} defines the method that volition upload the image and shop information technology 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 adequate file extensions. This is important for security reasons. The immune types ensures that merely 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; set 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, and so the image will fail to upload and the library volition return an error message.
- $config['max_width'] = 1500; sets the maximum width of the image which in our example is ane,500 px. Whatsoever 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 image which in our case is named profile_image
- $fault = array('error' => $this->upload->display_errors()); sets the fault message 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
- $information = array('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 information technology for the controller. Let's now create the directory where our images will be uploaded to. Create a new directory "images" in the root directory of your application
Finally, nosotros will ad ii routes to our routes.php file that volition display the course and display results
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['shop-image'] = 'imageuploadcontroller/store';
Hither,
- $road['upload-image'] = 'imageuploadcontroller'; defines the URL upload-image that calls the index method of ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/store'; defines the URL shop-epitome that accepts the selected user file and uploads it to the server.
Testing the application
Let'south start the built-in PHP server
Open the concluding/ 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
start the server using the following control
php -S localhost:3000
Load the following URL in your spider web browser: http://localhost:3000/upload-image
you will exist able to come across the post-obit results
Click on cull file
You lot should be able to see a dialog window similar to the following
Select your desired paradigm and then click on open up
The selected file proper name will evidence up in the form upload as shown in the epitome above. Click on an upload image push button
You will get the following results bold everything goes well
Click on View My Image! Link
You should be able to see the paradigm that you uploaded. The results will be similar to the following
Discover uploaded prototype proper noun is displayed in the URL. We got the epitome proper noun from the uploaded paradigm metadata
Note: The File Upload process remains the same for other types of files
Source: https://www.guru99.com/codeigniter-file-upload.html
0 Response to "Code for Filter Uploading Image Size and Extension in"
Post a Comment