Blog for Learning

This blog contains lesson material, material summary, questions and answers, definitions, types and examples, and others.


Powered by Blogger.


Flag Counter


Codeigniter Tutorial # 6: Creating a File Upload Feature

Codeigniter Tutorial: Upload File
In the previous tutorial, we have completed the CRUD feature . This is the main feature that must be in the application.
However, there are still less ...
What is that?
Pictures for products.
Product images cannot be displayed
There is no product image. So a broken image will be displayed .
Images for products, we will be filled with values default.jpgIf no image is uploaded.
If we see the path address used, this image will be located at /upload/product/default.jpg.
Whereas we don't have folders and files default.jpg.
How to handle it?
We just have to create a new folder inside the project with a name upload, then inside it contains another folder named product.
Make upload folder
... and that's where we will put the file default.jpg.
The image default.jpgwill be a placeholder image if no image is uploaded.
For example, I will fill it with the "No Image" image that I made with GIMP.
Make a picture in GIMP
If you want to use this picture.
Please download: ðŸ–¼ default.jpg
After that, please put the image in the folder upload/product/
Then the result:
Product list with image
But the problem is:
Not all products will use images default.jpg.
Therefore, we have to make the upload feature, so the admin can determine the image he likes.
How to?
Let's discuss ...

Creating an Upload Feature on Codeigniter

Before we make the upload feature, we need to understand how the concept works.
Uploading files has a process flow like this:
  1. Users send files through the form;
  2. Files are uploaded to the server and stored in the tmpfirst folder ;
  3. We move the files in the directory tmpinto the directory upload/product/that we have created;
  4. Finished.
Sounds simple ...
But let's look at the practice.
Please open the model Product_model.php, then add the method _uploadImage() just below the method delete().
Here is the contents of the method code _uploadImage():
private function _uploadImage()
    $config['upload_path']          = './upload/product/';
    $config['allowed_types']        = 'gif|jpg|png';
    $config['file_name']            = $this->product_id;
    $config['overwrite']   = true;
    $config['max_size']             = 1024; // 1MB
    // $config['max_width']            = 1024;
    // $config['max_height']           = 768;

    $this->load->library('upload', $config);

    if ($this->upload->do_upload('image')) {
        return $this->upload->data("file_name");
    return "default.jpg";
So it will be like this:
Method for uploading files
What does this method do?
  1. We make a configuration to upload files such as:
    • upload_path to determine the location of the file address will be uploaded
    • file_nameto specify a file name. Anyway, we will take the file name from the product ID. Therefore, we fill it with $this->product_id.
    • overwrite to overwrite uploaded files when uploading new files (edit data).
    • allowed_types to limit the type of file that can be uploaded.
    • max_size to determine the file size limit.
    • max_wdithand max_heightI deliberately commented so that it is not activated. This is the function to limit the size of the width and height of the image. If the uploaded image exceeds the specified size, the upload will fail.
  2. We load the library uploadwith the specified configuration.
    $this->load->library('upload', $config);
  3. We will restore the uploaded file name. If upload fails, then just return it default.jpg.
Why is this method given a modifier private?
Aren't we going to call him later from the Controller ?
Oh no-no ...
We will not call this method from the Controller . Therefore, we provide a modifier priavate.
This method will then be called from the class Product_model(the class itself), on the method save()and update().
Now, our task is to change the method save()and update().

Using Method _uploadImage()

Guess what?
Where will we call this method?
Yep! We will use this method to fill the property $this->image.
Please change the method save()and update() become like this:
Change the save () and update () method
Especially for the method update(), we make a check like this:
if (!empty($_FILES["image"]["name"])) {
    $this->image = $this->_uploadImage();
} else {
    $this->image = $post["old_image"];
That is, if a file is uploaded when editing data, then upload the file.
But if it's not there, just use the existing file name ( old_image).
The value old_imagewe get from the form, because edit_form.phpwe have created this field with type hidden.
old image on the form

Trial Upload File

Before trying to upload, we must first change the access rights from the directory upload.
If you use Windows, you don't need to do this.
But, for those of you who use Linux, this must be done so that the application can create new files in the directory upload.
Please type the following command:
sudo chmod 777 /var/www/html/tokobuah/upload/ -R
Or on the terminal in VS Code, type like this:
sudo chmod 777 upload/ -R
We will be asked for a password, please fill in the password that you use on your computer.
Change directory permissions
After that, please try adding a new product and don't forget to include the picture.
Add new data
After that, click Save and open the list products page .
Then the result:
The results of uploading data in the product list
If we check the project directory, there will be a new file there.
The results of uploading data in the project directory
Congratulations, we have successfully created the upload feature ðŸ‘ðŸ‘ðŸ‘...
... But there's still something missing.
What is that?
When we delete data, the file will remain in the application. Because there is no function to delete files.
Let's fix it ...

Delete the uploaded file

We need a special method to delete the uploaded file.
Please add the following method to the class Product_model, just below the method _uploadImage().
private function _deleteImage($id)
    $product = $this->getById($id);
    if ($product->image != "default.jpg") {
     $filename = explode(".", $product->image)[0];
  return array_map('unlink', glob(FCPATH."upload/product/$filename.*"));
So it will be like this:
Method for deleting files
Finally, call the method _deleteImage()on the method delete().
Method for deleting data and files
Okay, now we can delete data and also uploaded files.
Let's try ...
Delete data and files in the application
Yep! succeeded🎉
Maybe you will ask,
Why are there two files deleted?
So this ...
Consider the method, specifically the code inside if .
if ($product->image != "default.jpg") {
    $filename = explode(".", $product->image)[0];
 return array_map('unlink', glob(FCPATH."upload/product/$filename.*"));
There we take the file name with the function exlode()Then we look for the file based on the name with the function glob().
After the files are found, then we use the function array_map()to execute the function unlink()in each file found.
Tanda bitang ( *) after the $filenamemeaning of all extensions is selected.
(Linux users must understand ðŸ˜‰)
This will then delete all files with the same name and any extensions.
Why is that?
Because the upload function that we created, there we are allowed to upload a file with the extension jpggifand png.
When data is edited and uploaded images have different extensions than those already on the server ...
... then it will create a new file.
For example, on the server already exists 123.jpg, then uploaded again — for example a file .png— then it will be made again later 123.png.
How did it happen? Didn't we give a configuration overwrite = true?
overwrite in the upload configuration, it will only overwrite files with the same name and extension.
On the server already exists 123.jpgWhen we upload files again with the same extension, it 123.jpgwill be overwritten with the new file.

Troubleshoot and Debugging

I am sure, some of the friends who follow this tutorial will get errors and problems such as files that do not want to be uploaded.
Do not panic!
We must find the source of the problem.
Well for debugging the upload function, I recommend using this:
Put this code in the method _uploadImage() exactly before returnand turn it off return temporarily.
Function for debugging upload errors
Later, if the error occurs, it will look like this:
Function for debugging upload errors
On this error, the message is clear:
The upload destination folder does not appear to be writable.
The upload folder or directory cannot be written. This is proven by the value imagein the SQL code section is NULL.
Why can it be NULL?
Because the function _uploadImage()failed to upload and he will not return any value.
Later the value that will be used on this product is default.jpg, because in the database table we define it like this.
Product tables in the database
The solution to this problem is actually just changing the access rights to the directory upload.
Change directory permissions
After that, try uploading again.
If successful, you can revive returnand delete this function:
But if it still fails ...
... try here, send a screenshot of the error message via comments!
Who knows, we can help.

0 Komentar untuk "Codeigniter Tutorial # 6: Creating a File Upload Feature"

Silahkan berkomentar sesuai artikel

Template By Kunci Dunia
Back To Top