Codeigniter Uploade File to Put Image Into a Folder
CodeIgniter File Upload
File direction is essential to most web applications. If you lot are developing a content direction system, then you will need to be able to upload images, word documents, pdf reports, etc. If you are working on a membership site, you may need to have a provision for people to upload their contour images. CodeIgniter's File Uploading form makes information technology piece of cake for us to do all of the above.
In this tutorial, nosotros will look at how to use the file upload library to load files.
Uploading Images in CodeIgniter
File uploading in CodeIgniter has two chief parts. The frontend and the backend. The frontend is handled by the HTML grade that uses the form input type file. On the backend, the file upload library processes the submitted input from the course and writes it to the upload directory.
Let's begin with the input form.
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 blazon of file and submits the selected file to the server for processing
- upload_result.php – this view displays the results of the uploaded paradigm including a link that we tin can click to view the results.
Add the following code to upload_form.php
<!DOCTYPE html> <html> <head> <championship>CodeIgniter Prototype Upload</title> <meta charset="UTF-8"> <meta proper name="viewport" content="width=device-width, initial-calibration=1.0"> </head> <body> <div> <h3>Select an prototype from your computer and upload information technology to the cloud</h3> <?php if (isset($error)){ echo $error; } ?> <form method="postal service" 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> </body> </html> Hither,
- if (isset($fault)){…} checks if the mistake variable has been set. If the result is truthful then the error returned past the upload library is displayed to the user.
- <input type="file" id="profile_image" proper name="profile_image" size="33″ /> the type file allows the user to browser to their estimator and select a file for uploading.
Ad the following lawmaking to upload_result.php
<!DOCTYPE html> <html> <head> <title>Prototype Upload Results</title> <meta charset="UTF-viii"> <meta proper name="viewport" content="width=device-width, initial-scale=i.0"> </head> <trunk> <div> <h3>Congratulations, the image has successfully been uploaded</h3> <p>Click here to view the epitome you lot just uploaded <?=ballast('images/'.$image_metadata['file_name'], 'View My Image!')?> </p> <p> <?php echo anchor('upload-prototype', 'Go back to Image Upload'); ?> </p> </div> </body> </html> Here,
- <?=anchor('images/'.$image_metadata['file_name'], 'View My Epitome!')?> uses the anchor helper to create a link to the new uploaded file in the images directory. The name is retrieved from the prototype metadata that is passed to the view when the file has successfully been uploaded.
Let's at present create the controller that will respond to our image uploading
Add a new file ImageUploadController.php in application/controllers
Add the post-obit code to ImageUploadController.php
<?php divers('BASEPATH') OR exit('No direct script access immune'); class ImageUploadController extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url', 'grade'); } public function 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); } } } Hither,
- class ImageUploadController extends CI_Controller {…} defines our controller grade and extends the base of operations controller CI_Controller
- public function __construct() {…} initializes the parent constructor method and loads the url and course helpers
- public function alphabetize() {…} defines the index method that is used to display the prototype upload grade
- public role shop() {…} defines the method that volition upload the image and store 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 acceptable file extensions. This is important for security reasons. The allowed types ensures that just images are uploaded and other file types such every bit php deceit exist 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 two,000kb, then the epitome volition neglect to upload and the library will render an mistake bulletin.
- $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 fault
- $config['max_height'] = 1500; defines the maximum acceptable peak.
- $this->load->library('upload', $config); loads the upload library and initializes it with the assortment $config that we defined to a higher place.
- if (!$this->upload->do_upload('profile_image')) {…} attempts to upload the submitted image which in our example is named profile_image
- $mistake = array('error' => $this->upload->display_errors()); sets the error message if the upload fails
- $this->load->view('files/upload_form', $mistake); loads the file upload class and displays the fault bulletin that is returned from the upload library
- $information = assortment('image_metadata' => $this->upload->data()); sets the prototype 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. Let's now create the directory where our images will exist 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 will display the form and brandish results
Open application/config/routes.php Add the following routes $route['upload-epitome'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
HERE,
- $road['upload-image'] = 'imageuploadcontroller'; defines the URL upload-image that calls the alphabetize method of ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/shop'; defines the URL shop-image that accepts the selected user file and uploads it to the server.
Testing the application
Let's first the built-in PHP server
Open up 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
start the server using the following control
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 come across a dialog window similar to the following
Select your desired image then click on open up
The selected file name will evidence upwards in the form upload equally shown in the image above. Click on an upload paradigm push
You lot will get the post-obit results bold everything goes well
Click on View My Image! Link
You should be able to see the epitome that you lot uploaded. The results will exist similar to the following
Notice uploaded epitome name is displayed in the URL. We got the image 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 "Codeigniter Uploade File to Put Image Into a Folder"
Post a Comment