Upload File Dengan Dropzone di Codeigniter – Dalam posting ini, kita akan belajar upload file dengan drag and drop menggunakan dropzone.js dan Framework Codeigniter 3.
Dropzone.js hadir dengan CSS dan Javascript yang bagus dan memudahkan untuk bekerja dengan API upload file HTML 5. Ini memberi Anda wadah input file yang dapat digunakan user untuk menarik dan melepas file atau cukup klik wadah untuk memilih beberapa file.
Browser yang Didukung?
Berdasarkan dokumentasinya, Dropzone.js berfungsi di:
Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (Saat ini dinonaktifkan untuk MacOS karena API mereka bermasalah)
Safari 5+
Untuk browsers lain, dropzone menyediakan old-school file input fallback.
Bagaimana Cara Mengimplementasikan di Codeigniter?
1. Pertama download dulu CodeIgniternya… š
2. Download dropzone.js dari https://github.com/enyo/dropzone , ekstrak zip didalam folder root codeigniter anda.
3. Buat file controller dengan nama dropzone.php kemudian lengkapi dengan code berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Dropzone extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper(array('url','html','form')); } public function index() { $this->load->view('dropzone_view'); } 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); // jika ingin menyimpannya ke database disini. // tanpa model, hanya sebagai contoh // $this->load->database(); // load database // $this->db->insert('file_table',array('file_name' => $fileName)); } } } /* End of file dropzone.js */ /* Location: ./application/controllers/dropzone.php */ |
4. Buat tampilan File Disebut dropzone_view.php dalam views. lengkapi dengan code berikut!
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <link href="<?php echo base_url(); ?>dropzone/css/dropzone.css" type="text/css" rel="stylesheet" /> <script src="<?php echo base_url(); ?>dropzone/dropzone.min.js"></script> </head> <body> <h1>File Upload using dropzone.js and Codeigniter - arjun.net.in</h1> <form action="<?php echo site_url('/dropzone/upload'); ?>" class="dropzone" > </form> </body> </html> |
Saya harap tutorial ini membantu Anda, jangan lupa untuk memberi kami umpan balik Anda dalam komentar.
