Artikel

Tutorial upload multiple foto dengan ajax dan Codeigniter (Dropzone.js)

    Dibaca 32937 kali Javascript ajax codeigniter

Selamat datang pada tutorial hari ini.  

 

 

Kali ini saya mau membagikan panduan gimana caranya melakukan upload banyak foto sekaligus dengan menggunakan framework Codeigniter, dan tentunya proses uploadnya melalui ajax.

 

 

Btw alasan saya membuat tutorial ini adalah dikarenakan sejak pertama kali saya publish Apricot CMS, saya banyak menerima pesan masuk dari teman teman yang sebagian besar menanyakan tentang komponen kompenen didalamnya.

 

 

Dan salah satu yang sering ditanyakan adalah tentang fitur drag dan drop upload gambar yang ada pada halaman admin Apricot CMS

 

 

Contoh area upload pada yang ada pada halaman administrator Apricot CMS 

 

 

Kepada semua yang bertanya, sebenarnya saja sudah saya arahkan untuk langsung melihat source codenya. Tapi banyak yang masih bingung, mungkin karena praktiknya sudah lumayan kompleks dan juga karena code codenya sudah sesak sesakan dengan code code komponen lain.

 

 

Untuk itu, kali ini saya mau buatkan tutorialnya.  Saya harapkan setelah selesai membaca dan mengikuti tutorial ini, kamu sudah bisa memahami dan dapat mempraktikanya ke dalam kasus yang lebih kompeks lagi.

 

 

Sebenarnya pembuatannya cukup mudah dan sederhana dikarenakan pada kasus ini kita akan menggunakan sebuah plugin  javascript yang bernama Dropzone.js

(Silahkan kan download pluginnya disini atau download contoh yang sudah jadi pada bagian akhir artikel ini).
Plugin ini nantinya menghandle proses pengiriman/upload data keserver (melalui Ajax). Setelah itu, pada sisi server, kita akan menggunakan Codeigniter untuk mempeoses penyimpanan file dan penyimpanan database.

 

 

Persiapan

 

 

1. Buat directory baru pada localhost kamu dengan nama upload

 

 

2. Didalam directory  upload, buat dua directory bernama upload-foto dan assets

 

 

3. Ekstrak semua file file Codeigniter didalam directory upload, sehingga menjadi seperti ini

 

4. DIdalam folder assets, masukan semua file Dropzone bersama file jQuery.

 

5. Buat Controller baru didalam directory application/controllers bernama Upload.php.

 

 

6. Buat View baru didalam directory application/views bernama upload_view.php.

 

 

7. Buka file application/config/config.php lalu atur base url menjadi $config['base_url'] = 'http://localhost/upload/'

 

 

8. Buka phpmyadmin lalu buat database baru bernama upload.

 

 

9. Buatlah table baru didalamnya 

CREATE TABLE `foto` (
  `id` int(11) PRIMARY KEY AUTO_INCREMENT,
  `nama_foto` varchar(250),
  `token` varchar(100)
)

 

 

Akan dapat seperti ini

 

 

10. Buka file application/config/database.php lalu atur nama databasenya 

 

 

 

Coding

 

 

Pada file upload_view.php, masukan kode berikut ini

 

<!DOCTYPE HTML>

<html>
<head>
	<title>Multiple Upload</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/dropzone.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/basic.min.css') ?>">

<script type="text/javascript" src="<?php echo base_url('assets/jquery.js') ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/dropzone.min.js') ?>"></script>

<style type="text/css">

body{
	background-color: #E8E9EC;
}

.dropzone {
	margin-top: 100px;
	border: 2px dashed #0087F7;
}

</style>

</head>
<body>


<div class="dropzone">

  <div class="dz-message">
   <h3> Klik atau Drop gambar disini</h3>
  </div>

</div>



<script type="text/javascript">


</script>

</body>
</html>

 

 

 

dan pada file Upload.php

 

class Upload extends CI_Controller
{

	function __construct(){
		parent::__construct();
		$this->load->database();
		$this->load->helper(array('url','file'));
	}

	function index(){
		$this->load->view('upload_view');
	}

	

}

 

 

 

Buka browser  lalu masukan alamat ini http://localhost/upload/index.php/upload

 

 

Ini hasilnya

 Namun masih belum bisa mengupload gambar.

 

 

Masih pada file upload_view.php, tambahkan code berikut didalam tag javascriptnya

 

 

Dropzone.autoDiscover = false;

var foto_upload= new Dropzone(".dropzone",{
url: "<?php echo base_url('index.php/upload/proses_upload') ?>",
maxFilesize: 2,
method:"post",
acceptedFiles:"image/*",
paramName:"userfile",
dictInvalidFileType:"Type file ini tidak dizinkan",
addRemoveLinks:true,
});


//Event ketika Memulai mengupload
foto_upload.on("sending",function(a,b,c){
	a.token=Math.random();
	c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
});

 

 

 

Dan pada file Upload.php, masukan code PHP berikut ini

class Upload extends CI_Controller
{

	function __construct(){
		parent::__construct();
		$this->load->database();
		$this->load->helper(array('url','file'));
	}

	function index(){
		$this->load->view('upload_view');
	}

	function proses_upload(){

        $config['upload_path']   = FCPATH.'/upload-foto/';
        $config['allowed_types'] = 'gif|jpg|png|ico';
        $this->load->library('upload',$config);

        if($this->upload->do_upload('userfile')){
        	$token=$this->input->post('token_foto');
        	$nama=$this->upload->data('file_name');
        	$this->db->insert('foto',array('nama_foto'=>$nama,'token'=>$token));
        }


	}


}

 

 

 

Sekarang refresh browser kamu , lalu drag beberapa foto didalamnya. Kini area upload sudah berfungsi

 

 

 

Foto foto nya sudah berhasil terupload dan sudah ada didalam folder upload.

 

 

Dan juga nama nama foto sudah tersimpan didalam database

 

 

Sampai disini semuanya sudah berjalan dengan baik.

 

Tapi masih ada satu hal lagi. Gimana jika kita ingin membatalkan foto yang sudah terupload dan sudah tersimpan didatabase?
Tentu itu bisa dilakukan. Jika kamu perhatikan dibawah thumbnail gambar terdapat anchor link "Remove File". Jika kamu klik link itu, gambar akan menghilang dari area upload. Namun file yang sudah terupload akan tetap ada dan tidak akan terhapus. Begitupun data yang telah tersimpan didatabase, masih tetap akan ada didatabase.

 

 

Jadi, bagaimana caranya agar data yang ada diserver ikut terhapus ketika kita mengklik "Remove File"? SIlahkan tambahkan code code berikut ini.

 

 

Pada file upload_view.php , dibagian javascriptnya tambahkan beberapa code sehingga menjadi seperti ini

Dropzone.autoDiscover = false;

var foto_upload= new Dropzone(".dropzone",{
url: "<?php echo base_url('index.php/upload/proses_upload') ?>",
maxFilesize: 2,
method:"post",
acceptedFiles:"image/*",
paramName:"userfile",
dictInvalidFileType:"Type file ini tidak dizinkan",
addRemoveLinks:true,
});


//Event ketika Memulai mengupload
foto_upload.on("sending",function(a,b,c){
	a.token=Math.random();
	c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
});


//Event ketika foto dihapus
foto_upload.on("removedfile",function(a){
	var token=a.token;
	$.ajax({
		type:"post",
		data:{token:token},
		url:"<?php echo base_url('index.php/upload/remove_foto') ?>",
		cache:false,
		dataType: 'json',
		success: function(){
			console.log("Foto terhapus");
		},
		error: function(){
			console.log("Error");

		}
	});
});

 

 

Terakhir, pada file Upload.php, tambahkan juga beberapa code didalamnya, hingga menjadi seperti ini

class Upload extends CI_Controller
{

	function __construct(){
		parent::__construct();
		$this->load->database();
		$this->load->helper(array('url','file'));
	}

	function index(){
		$this->load->view('upload_view');
	}


	//Untuk proses upload foto
	function proses_upload(){

        $config['upload_path']   = FCPATH.'/upload-foto/';
        $config['allowed_types'] = 'gif|jpg|png|ico';
        $this->load->library('upload',$config);

        if($this->upload->do_upload('userfile')){
        	$token=$this->input->post('token_foto');
        	$nama=$this->upload->data('file_name');
        	$this->db->insert('foto',array('nama_foto'=>$nama,'token'=>$token));
        }


	}


	//Untuk menghapus foto
	function remove_foto(){

		//Ambil token foto
		$token=$this->input->post('token');

		
		$foto=$this->db->get_where('foto',array('token'=>$token));


		if($foto->num_rows()>0){
			$hasil=$foto->row();
			$nama_foto=$hasil->nama_foto;
			if(file_exists($file=FCPATH.'/upload-foto/'.$nama_foto)){
				unlink($file);
			}
			$this->db->delete('foto',array('token'=>$token));

		}


		echo "{}";
	}

}

 

 

Demikianlah keseluruhan tutorial uploade mutiple foto dengan codeigniter.
Karena sudah mempelajari dasar dasar ini, silahkan dikembangkan dan buat untuk kepentingan yang lebih kompleks lagi .

 

 

Silahkan download contoh project yang sudah jadi, jangan lupa dibuat dulu databasenya.
DOWNLOAD

 

 

 Mohon dikoreksi jika ada kesalahan pada tutorial ini. Dan jika ada komentar atau pertanyaa, silahkan tinggalkan pesan kamu pada form komentar dibawah :)