Pada tutorial kali ini, kita akan belajar membuat form upload file pada codeigniter dengan jquery ajax. Pertama, pastikan kalian mempunya file ajaxfileupload.js, dapat diunduh disini Selanjutnya siapkan file codeigniter dan tempatkan pada localhost masing-masing. Buat folder ajaxupload didalam folder h...

Jquery AJax File Upload Codeigniter

Upload file dengan php mungkin suatu hal yang tidak terlalu menjadi momok "menyeramkan" untuk para programer website, namun jika kalian pernah coba membuat uploader file dengan codeigniter, hal ini dapat menjadi pengalaman yang menjengkelkan dan memusingkan. Pada tutorial ini, saya akan berbagi bagaimana  membuat uploader dengan codeigniter dan ajax yang tidak hanya bekerja dengan optimal, namun tetap pada faedah MVC.

Pertama, pastikan kalian mempunya Codeigniter, jquery, dan script AjaxFileUpload yang dapat kalian copy pada tutorial ini.

Pada tutorial ini kalian diharapkan telah mengerti dan dapat menggunakan codeigniter dan jquery, jika belum silahkan pelajari kedua hal tersebut terlebih dahulu.

Buat sebuah databse dan sebuah tabel dengan nama files.

CREATE TABLE `files` (
  `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `filename` varchar(255) NOT NULL,
  `title` varchar(100) NOT NULL
);

Tahap 1 Buat form upload

 

Pertama, kita perlu membuat form upload sebagai interface untuk upload file, copy kode berikut dan simpan dengan nama upload.php

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="<?php echo base_url()?>js/site.js"></script>
    <script src="<?php echo base_url()?>js/ajaxfileupload.js"></script>
    <link href="<?php echo base_url()?>css/style.css" rel="stylesheet" />
</head>
<body>
    <h1>Upload File</h1>
    <form method="post" action="" id="upload_file">
        <label for="title">Title</label>
        <input type="text" name="title" id="title" value="" />
 
        <label for="userfile">File</label>
        <input type="file" name="userfile" id="userfile" size="20" />
 
        <input type="submit" name="submit" id="submit" />
    </form>
    <h2>Files</h2>
    <div id="files"></div>
</body>
</html>

 

Tahap 2 Buat controller

Buat sebuah controller sebagai jembatan antara file view dan model, copy kode berikut, simpan dengan nama upload.php

class Upload extends CI_Controller 
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('files_model');
        $this->load->database();
        $this->load->helper('url');
    }
 
    public function index()
    {
        $this->load->view('upload');
    }
}

 

Tahap 3 Buat Custom Javascript

Untuk menangani submit form pada view, kita buat sebuah file javascript yang nantinya akan digunakan untuk memproses inputan dari pengguna. Copy kode berikut dan simpan dengan nama site.js

$(function() {
	$('#upload_file').submit(function(e) {
		e.preventDefault();
		$.ajaxFileUpload({
			url 			:'./upload/upload_file/', 
			secureuri		:false,
			fileElementId	:'userfile',
			dataType		: 'json',
			data			: {
				'title'				: $('#title').val()
			},
			success	: function (data, status)
			{
				if(data.status != 'error')
				{
					$('#files').html('<p>Reloading files...</p>');
					refresh_files();
					$('#title').val('');
				}
				alert(data.msg);
			}
		});
		return false;
	});
});

Pada bagian ini kita membuat form handler dengan javascript pada sisi client server, dan mengirimkan konten data via ajax. Jika tidak terjadi error, kita refresh file list, clear title dan kita tampilkan alert respon.

 

Tahap 4 Membuat fungsi untuk upload file

Controller

Untuk upload file, url yang akan digunakan adalah /upload/upload_file/, jadi kita harus membuat method baru di controller upload, copy code berikut dan tempatkan pada controller upload yang telah kita buat sebelumnya.

public function upload_file()
{
    $status = "";
    $msg = "";
    $file_element_name = 'userfile';
     
    if (empty($_POST['title']))
    {
        $status = "error";
        $msg = "Please enter a title";
    }
     
    if ($status != "error")
    {
        $config['upload_path'] = './files/';
        $config['allowed_types'] = 'gif|jpg|png|doc|txt';
        $config['max_size'] = 1024 * 8;
        $config['encrypt_name'] = TRUE;
 
        $this->load->library('upload', $config);
 
        if (!$this->upload->do_upload($file_element_name))
        {
            $status = 'error';
            $msg = $this->upload->display_errors('', '');
        }
        else
        {
            $data = $this->upload->data();
            $file_id = $this->files_model->insert_file($data['file_name'], $_POST['title']);
            if($file_id)
            {
                $status = "success";
                $msg = "File successfully uploaded";
            }
            else
            {
                unlink($data['full_path']);
                $status = "error";
                $msg = "Something went wrong when saving the file, please try again.";
            }
        }
        @unlink($_FILES[$file_element_name]);
    }
    echo json_encode(array('status' => $status, 'msg' => $msg));
}

Kita buat pengecekan sederhana untuk memastikan apakah inputan title berisi sebuah value atau tidak. Jika value title tidak kosong kita load librari upload bawaan codeigniter.

Selanjutnya. kita coba upload file. Jika berhasil, kita simpan judul dan nama file ke dalam databse.

Model

Sesuai dengan konsep MVC, kita buat sebuah model untuk menangani fungsi-fungsi yang terkait  dengan database. Copy kode berikut dan simpan dengan nama files_model.php

class Files_Model extends CI_Model {
 
    public function insert_file($filename, $title)
    {
        $data = array(
            'filename'      => $filename,
            'title'         => $title
        );
        $this->db->insert('files', $data);
        return $this->db->insert_id();
    }
 
}

Folder Upload

Selanjutnya kita buat folder untuk menampung file-file yang akan di upload pada folder web root kita dengan nama files, pastikan folder tersebut dapat diakses(writable) oleh server.

Tahap 5 Buat Daftar file upload

 

 

Buka file site.js yang telah kita buat sebelumnya, kemuadian masukkan kode berikut:

function refresh_files()
{
	$.get('./upload/files/')
	.success(function (data){
		$('#files').html(data);
	});
}

fungsi ini akan memasukan data kedalam varibale file yang terdapat pada view untuk menampilkan daftar file yang diupload, kita harus memanggil fungsi ini pada awal ketika load halaman untuk menampilkan daftar file upload. Untuk itu kita harus menempatkan fungsi ini pada document.ready.function di bagian atas file.

refresh_files();

 Controller

Untuk menampilkan daftar file upload, url yang akan digunakan adalah /upload/files/, jadi kita harus membuat method baru di controller upload, copy code berikut dan tempatkan pada controller upload yang telah kita buat sebelumnya.

public function files()
{
    $files = $this->files_model->get_files();
    $this->load->view('files', array('files' => $files));
}

Model

Untuk retrieve data file upload dari database, kita buat fungsi get_files, masukkan kode berikut ke dalam files_model.php yang telah kita buat sebelumnya.

public function get_files()
{
    return $this->db->select()
            ->from('files')
            ->get()
            ->result();
}

View

Kita perlu membuat view untuk menampilkan daftar file upload, buat file baru dengan nama files.php, dan paste kode berikut:

<?php
if (isset($files) && count($files))
{
    ?>
        <ul>
            <?php
            foreach ($files as $file)
            {
                ?>
                <li class="image_wrap">
                    <a href="#" class="delete_file_link" data-file_id="<?php echo $file->id?>">Delete</a>
                    <strong><?php echo $file->title?></strong>
                    <br />
                    <?php echo $file->filename?>
                </li>
                <?php
            }
            ?>
        </ul>
    </form>
    <?php
}
else
{
    ?>
    <p>No Files Uploaded</p>
    <?php
}
?>

Melalui view ini kita akan menampilkan judul dan nama file masing-masing. Kita juga menambahkan link untuk menghapus file, yang masing-masing memiliki atribut ID dari file yang tersimpan dalam database.

Delete File

Untuk dapat menghapus file yang telh kita upload, kita buat fungsi baru untuk menangani hal tersebut.

 

Javascript

Copy dan masukkan kode berikut pada document.ready.function:

$('.delete_file_link').live('click', function(e) {
	e.preventDefault();
	if (confirm('Are you sure you want to delete this file?'))
	{
		var link = $(this);
		$.ajax({
			url			: './upload/delete_file/' + link.data('file_id'),
			dataType	: 'json',
			success		: function (data)
			{
				files = $(#files);
				if (data.status === "success")
				{
					link.parents('li').fadeOut('fast', function() {
						$(this).remove();
						if (files.find('li').length == 0)
						{
							files.html('<p>No Files Uploaded</p>');
						}
					});
				}
				else
				{
					alert(data.msg);
				}
			}
		});
	}
});

Ketika link delete di click, kita tampilkan dialog konfirmasi penghapusan. Jika konfirmasi ok maka kita panggil fungsi /upload/delete_file.

Controller

Seperti penjelasan diatas, url yang akan kita akses untuk menghapus file adalah /upload/delete_file, jadi kita buat fungsi delete_file, masukkan kode berikut pada controller upload.

public function delete_file($file_id)
{
    if ($this->files_model->delete_file($file_id))
    {
        $status = 'success';
        $msg = 'File successfully deleted';
    }
    else
    {
        $status = 'error';
        $msg = 'Something went wrong when deleteing the file, please try again';
    }
    echo json_encode(array('status' => $status, 'msg' => $msg));
}

Model

Buka files_model.php dan masukkan kode berikut:

public function delete_file($file_id)
{
    $file = $this->get_file($file_id);
    if (!$this->db->where('id', $file_id)->delete('files'))
    {
        return FALSE;
    }
    unlink('./files/' . $file->filename);    
    return TRUE;
}
 
public function get_file($file_id)
{
    return $this->db->select()
            ->from('files')
            ->where('id', $file_id)
            ->get()
            ->row();
}

Karena kita hanya mengirimkan ID, kita perlu untuk mendapatkan nama file, jadi kita membuat metode baru untuk memuat file. Setelah dimuat, kita menghapus record dan menghapus file dari server.

Selesai! Jika Anda menjalankannya, Anda harus dapat meng-upload file, melihatnya muncul, dan kemudian menghapusnya.


About Author

Dimas Agung Noviyanto


Comment & Discussions

  • Erfan Nur Rifai
    gan upload filenya lgi donk

  • Amanda Dahlia
    mantap gan

  • Nandang Mulyadi
    Kok persis ya gan . .
    https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684

  • Please LOGIN before if you want to give the comment.