DropzoneJS and CodeIgniter 3

dropzone

Dropzone JS adalah sebuah library open source yang menyediakan untuk keperluan drag & drop file upload dengan preview gambar.
Lalu bagaimana dropzone js integrasi dengan CodeIgniter? Mudah sekali, yuk ikuti langkah berikut:

Langkah – 1
Download terlebih dahulu file dropzone.js di
https://github.com/enyo/dropzone

dropzonegithub

Langkah – 2
Ekstrak file rar tersebut di folder assets.

Langkah – 3
Buatlah file controller dropzone, script sebagai berikut:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dropzone extends CI_Controller {
public function index() {
$this->load->view('dropzone');
}
public function upload() {
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$fileName = $_FILES['file']['name'];
$targetPath = getcwd() . '/uploads/';
$targetFile = $targetPath . $fileName ;
move_uploaded_file($tempFile, $targetFile);
}
}
}

Langkah – 4
Buatlah view dropzone, script sebagai berikut:

<html>
<head>
<link href="<?php echo base_url(); ?>assets/dropzone-master/dist/dropzone.css" type="text/css" rel="stylesheet" />
?php%20echo%20base_url();%20?assets/dropzone-master/dist/min/dropzone.min.js
?php%20echo%20base_url();%20?assets/js/jquery.js
</head>
<body>
<form action="<?php echo site_url('/dropzone/upload'); ?>" class="dropzone" ></form>
</body>
</html>

Langkah – 5
Done, hasil test pada browser
http://localhost/tutorial-codeigniter/CodeIgniter-3.0.6-libraries/index.php/dropzone

testdropzone

 

done. 😀

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s