The Filetype You Are Attempting to Upload Is Not Allowed. Image Codeigniter 3
CodeIgniter File Upload
File management is essential to virtually spider web applications. If you are developing a content management system, and then y'all will need to be able to upload images, give-and-take documents, pdf reports, etc. If you are working on a membership site, you lot may need to have a provision for people to upload their profile images. CodeIgniter'south File Uploading form makes it easy for us to practice all of the above.
In this tutorial, nosotros volition look at how to use the file upload library to load files.
Uploading Images in CodeIgniter
File uploading in CodeIgniter has two principal parts. The frontend and the backend. The frontend is handled by the HTML form 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'due south begin with the input form.
Create a new directory called files in application/views directory
Add together the post-obit 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 can click to view the results.
Add the following lawmaking to upload_form.php
<!DOCTYPE html> <html> <caput> <title>CodeIgniter Image Upload</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=one.0"> </head> <body> <div> <h3>Select an paradigm from your computer and upload it to the cloud</h3> <?php if (isset($error)){ repeat $error; } ?> <form method="mail" activeness="<?=base_url('store-paradigm')?>" enctype="multipart/form-data"> <input type="file" id="profile_image" name="profile_image" size="33" /> <input type="submit" value="Upload Epitome" /> </form> </div> </torso> </html> HERE,
- if (isset($mistake)){…} checks if the error variable has been set up. If the result is true so the error returned by the upload library is displayed to the user.
- <input blazon="file" id="profile_image" name="profile_image" size="33″ /> the type file allows the user to browser to their figurer and select a file for uploading.
Advertising the following code to upload_result.php
<!DOCTYPE html> <html> <caput> <title>Image Upload Results</championship> <meta charset="UTF-eight"> <meta proper noun="viewport" content="width=device-width, initial-scale=ane.0"> </head> <body> <div> <h3>Congratulations, the prototype has successfully been uploaded</h3> <p>Click here to view the image you just uploaded <?=ballast('images/'.$image_metadata['file_name'], 'View My Paradigm!')?> </p> <p> <?php repeat ballast('upload-paradigm', 'Go back to Paradigm Upload'); ?> </p> </div> </trunk> </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 epitome metadata that is passed to the view when the file has successfully been uploaded.
Let'due south now create the controller that volition 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'); 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')) { $mistake = array('fault' => $this->upload->display_errors()); $this->load->view('files/upload_form', $mistake); } else { $data = assortment('image_metadata' => $this->upload->data()); $this->load->view('files/upload_result', $information); } } } HERE,
- form ImageUploadController extends CI_Controller {…} defines our controller class and extends the base controller CI_Controller
- public role __construct() {…} initializes the parent constructor method and loads the url and form helpers
- public function index() {…} defines the index method that is used to display the image upload form
- public function store() {…} defines the method that will 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 acceptable file extensions. This is important for security reasons. The immune types ensures that only images are uploaded and other file types such as php cant 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 shut to 2MB. If the user tries to upload a file larger than ii,000kb, then the prototype will neglect to upload and the library volition render an error message.
- $config['max_width'] = 1500; sets the maximum width of the image which in our case is 1,500 px. Whatever width larger than that results in an mistake
- $config['max_height'] = 1500; defines the maximum acceptable pinnacle.
- $this->load->library('upload', $config); loads the upload library and initializes it with the array $config that we defined higher up.
- if (!$this->upload->do_upload('profile_image')) {…} attempts to upload the submitted prototype which in our example is named profile_image
- $error = array('error' => $this->upload->display_errors()); sets the mistake bulletin if the upload fails
- $this->load->view('files/upload_form', $fault); loads the file upload form and displays the error message that is returned from the upload library
- $data = array('image_metadata' => $this->upload->information()); 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. Allow'due south 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 advertising two routes to our routes.php file that will brandish the grade and display results
Open application/config/routes.php Add together the following routes $route['upload-prototype'] = 'imageuploadcontroller'; $road['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/store'; defines the URL store-image that accepts the selected user file and uploads it to the server.
Testing the application
Let'southward start the born PHP server
Open the concluding/ command line and browse to the root of your application. In my example, the root is located in bulldoze C:\Sites\ci-app
cd C:\Sites\ci-app
start the server using the post-obit control
php -S localhost:3000
Load the post-obit URL in your web browser: http://localhost:3000/upload-epitome
you volition be able to run across the following results
Click on choose file
Y'all should exist able to come across a dialog window like to the following
Select your desired prototype and so click on open
The selected file name volition show upwardly in the form upload every bit shown in the paradigm above. Click on an upload epitome push
Yous volition get the following results assuming everything goes well
Click on View My Paradigm! Link
Y'all should be able to run into the image that you uploaded. The results will be like to the following
Discover uploaded image name is displayed in the URL. We got the epitome proper name from the uploaded paradigm metadata
Note: The File Upload procedure remains the aforementioned for other types of files
Source: https://www.guru99.com/codeigniter-file-upload.html
0 Response to "The Filetype You Are Attempting to Upload Is Not Allowed. Image Codeigniter 3"
Post a Comment