Membuat Multiple Upload Images Dengan Dropzone.js Dan Codeigniter

Multiple Upload Images Dengan Dropzone.js Dan Codeigniter



Sudah lama saya tidak menulis di blog, untuk kali ini saya akan berbagi seputar cara membuat multiple upload images dengan dropzone.js dan codeigniter . Dropzone js adalah salah satu libraries untuk memudahkan kita dalam pembuatan upload atau multi upload gambar. Libraries ini memiliki kelebihan yaitu salah satunya fasilitas drag and drop files to upload (or click) .tanpa berlama-lama lagi kita langsung saja praktek.
download file master dropzone.css dan dropzone.js nya disini
(download saja semua file masternya yang ada di github)
    Spesifikasi
    • dropzone js dan css 
    • codeigniter 2.1.4 (Available Codeigniter 2.2.0) 
    • Xampp 1.8.0 (php 5.4.4)

    Create Database (buatlah DB jika anda ingin menyimpan data gambar pada mysql)

    Nama database : dropzone
    Nama tabel : gambar
    Buat field seperti gambar dibawah ini :

    dropzone table images upload


    Set Config
    • edit sintak autoload.php pada folder config :
      • [Jika Memakai Database] pada baris 55 ,ubah jadi seperti ini :
        • $autoload['libraries'] = array('database');
      • pada baris 67 ,ubah jadi seperti ini :
        • $autoload['helper'] = array('url', 'file','html','form');
    • edit sintak config.php pada folder config :
      • pada baris 55 ,ubah jadi seperti ini :
        • $http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://';
        • $newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);
        • $config['base_url']    = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;
    • [Jika Memakai Database] edit sintak database.php pada folder config :
      • pada baris 51 , ubah jadi seperti ini :
        • $db['default']['hostname'] = 'localhost';
        • $db['default']['username'] = 'root';
        • $db['default']['password'] = '';
        • $db['default']['database'] = 'dropzone_img';
        • $db['default']['dbdriver'] = 'mysql';
      • pada bagian ini anda bisa atur nama databases sesuai nama database yang anda buat.
    • edit sintak routes.php pada folder config :
      • pada baris 41 ,ubah jadi seperti ini :
        • $route['default_controller'] = "upload_img";
    Set Controllers
    • sintak controllers upload_img.php :
    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
    
     class Upload_Img extends CI_Controller {
    
      
    
      public function __construct() {
    
      parent::__construct();
    
       $this->load->helper(array('url','html','form'));
    
      }
    
      
    
      public function index() {
    
       $this->load->view('uploadimg');
    
      }
    
      
    
      public function upload() {
    
       if (!empty($_FILES)) {
    
        $tempFile = $_FILES['file']['tmp_name'];
    
        $fileName = $_FILES['file']['name'];
    
        $fileType = $_FILES['file']['type'];
    
        $fileSize = $_FILES['file']['size'];
    
        $targetPath = './assets/uploads/';
    
        $targetFile = $targetPath . $fileName ;
    
        move_uploaded_file($tempFile, $targetFile);
    
        // jika anda ingin menyimpannya ke dalam database
    
        // berikut adalah contoh model sederhana untuk menyimpan kdalam database.
    
        
    
        // sintak untuk menyimpan ke database :
    
        //$this->db->insert('master',array('type' => $fileType, 'nama' => $fileName, 'ukuran' => $fileSize));
    
         }
    
      }
    
     }
    
    ?>



    Set Views
    • sintak views uploadimg.php :
    <html>
    
    <head>
    
    <title>Multiple Upload Images</title>
    <!-----di bagian ini anda bisa menyesuaikan sendiri tergantung dimana tempat file JS dan CSS nya di letakan ----->
    
    <link href="<?php echo base_url('assets/dropzone/'); ?>/css/dropzone.css" type="text/css" rel="stylesheet" />
    
    </head>
    
    <body>
    
    <h2>Simple Multiple Upload Images for dropzone.js and Codeigniter - By Cahya Dyazin</h2>
    
    <form action="<?php echo site_url('/upload_img/upload'); ?>" class="dropzone" >
    
    </form>
    
    </body>
    <script src="<?php echo base_url('assets/dropzone'); ?>/dropzone.js"></script>
    
    </html>


    sebelumnya saya ucapkan terimakasih, semoga artikel ini bisa membantu :)

    17/Post a Comment/Comments

    1. parameter untuk insert ke db nya kurang greget om :D

      BalasHapus
      Balasan
      1. greget gimana nih ?
        hmm di sini aku membahas sesuatu yang sederhana aja, biar mudah di cerna :)

        Hapus
    2. untuk menambahkan watermark dan resize bisa dibuat dijquerynya aja gak om?

      BalasHapus
      Balasan
      1. hmm dropzone udah bagus ketimbang jquery gan,,,,
        dropzone di khususkan untuk melakukan upload file gambar aja setauku,,,

        Hapus
    3. trus apa lagi ya biar sampai 6 komentar ini :D

      BalasHapus
    4. eh harus 15 komentar ternyata biar aktif link downloadnya :D

      BalasHapus
      Balasan
      1. thanks banyak ya om.. buat latihan multiupload image :-)

        Hapus
      2. sama sama gan :)
        semoga bermanfaat :)

        Hapus
    5. Gan artikelnya bagus, tapi saya masih bingung..
      gmana caranya di tablenya di tambah keterangan tentang gambar tersebut dan setiap satu data di tablenya terdapat beberapa image yang di upload..? maaf masih mencoba :D

      BalasHapus
    6. ada tambahan seperti crop, resize gak bang

      BalasHapus
      Balasan
      1. kalau dari bawaan dropzone nya sendiri belum ada kalau untuk crop, mungkin agan bisa kombinasiin pake jqcrop kalada mmau fitur crop

        Hapus
    7. ini artikel keren habis,, tapi kok aku masih bingung cara gunainnya

      masih aku tanya lagi seperti ini gambar nya https://ndesostyle.files.wordpress.com/2015/11/tanya-lagi.png

      BalasHapus
      Balasan
      1. bingung kenapa ?
        emng pengen di costume seperti apa dropzone nya ?

        Hapus
    8. mas mau tanya, gimana caranya saya edit dan hapus gambar yang sudah saya upload ?
      mohon pencerahannya. terima kasih.

      BalasHapus
      Balasan
      1. di tutorial ini cuma bahas uploadnya saja, kalau mau edit atau hapus di php ada fungsi namanya unlink(), coba pelajari itu

        Hapus
    9. muncul error
      request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested

      BalasHapus
      Balasan
      1. Server side & client side-nya dalam satu localhost atau bukan?

        Hapus

    Posting Komentar

    Lebih baru Lebih lama