Mengkombinasikan dropzoneJS dengan bootstrap dan codeigniter

DropzoneJS adalah open souce library yang menyediakan fasilitas drag and drop upload file dengan preview gambar.

Pada pembahasan kali ini saya akan membahas bagaimana membuat fitur upload file khususnya gambar dengan dropzoneJS 4 dan codeigniter + mengkombinasikan dropzone dengan bootstrap.

Spesifikasi Kode :

Dropzone 4.1
Codeigniter 3.0
Mysql Database 5.5
Bootstrap 3.x.x

Praktik

Silahkan salin kode controller dan view di bawah ini.

COntroller ::: Gambar.phpView ::: gambar.php


<?php 
 if (!defined('BASEPATH'))exit('No direct script access allowed');

 class Gambar extends CI_Controller {
  private $datauser;
  function __construct() {
   parent::__construct();
   $this->load->helper(array('url','file'));
  }
  
  function index(){
   $data['js'] = base_url('assets/js');
   $data['css'] = base_url('assets/css');
   $data['img'] = base_url('assets/images');
   
   $this->load->view('gambar', $data);
  }
  
  function gambar_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);
    
    $this->db->insert('img_dropzone',array('nama' => $fileName, 'tipe' => $fileType, 'ukuran' => $fileSize));
   }
  }
 }
?>


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta name="description" content="kang-cahya.com" />
 <meta name="author" content="" />

 <title>Unggah Gambar | Dropzone + Codeigniter</title>
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
 <link rel="stylesheet" href="<?php echo $css; ?>/bootstrap.css">

 <style>
  html, body {
    height: 100%;
  }
  #actions {
    margin: 2em 0;
  }

  /* Mimic table appearance */
  div.table {
    display: table;
  }
  div.table .file-row {
    display: table-row;
  }
  div.table .file-row > div {
    display: table-cell;
    vertical-align: top;
    border-top: 1px solid #ddd;
    padding: 8px;
  }
  div.table .file-row:nth-child(odd) {
    background: #f9f9f9;
  }

  /* The total progress gets shown by event listeners */
  #total-progress {
    opacity: 0;
    transition: opacity 0.3s linear;
  }

  /* Hide the progress bar when finished */
  #previews .file-row.dz-success .progress {
    opacity: 0;
    transition: opacity 0.3s linear;
  }

  /* Hide the delete button initially */
  #previews .file-row .delete {
    display: none;
  }

  /* Hide the start and cancel buttons and show the delete button */

  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
    display: none;
  }
  #previews .file-row.dz-success .delete {
    display: block;
  }
 </style>
 
 <script src="<?php echo $js; ?>/jquery.min.js"></script>

</head>
<body>
 <div class="container" id="container">
  <header>
   <h1>Upload File With Codeigniter-3 + Dropzone-4.1</h1>
  </header>
  <div id="actions" class="row">
   <div class="col-lg-7">
    <!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn btn-success fileinput-button">
     <i class="glyphicon glyphicon-plus"></i>
     <span>Add files...</span>
    </span>
    <button type="submit" class="btn btn-primary start">
     <i class="glyphicon glyphicon-upload"></i>
     <span>Start upload</span>
    </button>
    <button type="reset" class="btn btn-warning cancel">
     <i class="glyphicon glyphicon-ban-circle"></i>
     <span>Cancel upload</span>
    </button>
   </div>

   <div class="col-lg-5">
    <!-- The global file processing state -->
    <span class="fileupload-process">
     <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
      <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
     </div>
    </span>
   </div>
  </div>

  <div class="table table-striped" class="files" id="previews">
   <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
     <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
     <p class="name" data-dz-name></p>
     <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div>
     <p class="size" data-dz-size></p>
     <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
      <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
     </div>
    </div>
    <div>
     <button class="btn btn-primary start">
      <i class="glyphicon glyphicon-upload"></i>
      <span>Start</span>
     </button>
     <button data-dz-remove class="btn btn-warning cancel">
      <i class="glyphicon glyphicon-ban-circle"></i>
      <span>Cancel</span>
     </button>
     <p data-dz-remove class="delete">
      <i class="glyphicon glyphicon-check"></i>
      <span>Finish</span>
     </p>
    </div>
   </div>
  </div>
  <hr>
  <footer>
   <h4 align="center">2015 &copy; www.kang-cahya.com</h4>
  </footer>
 </div>

 <script src="<?php echo $js; ?>/dropzone/dropzone.js"></script>
 <script src="<?php echo $js; ?>/dropzone/build.js"></script>
 <script>
  var Dropzone = require("enyo-dropzone");
  Dropzone.autoDiscover = false;
 </script>
 <script>
   // Dapatkan HTML Template dan menghapusnya dari dokumen
      var previewNode = document.querySelector("#template");
      previewNode.id = "";
      var previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);

      var myDropzone = new Dropzone(document.body, { 
        url: "<?php echo site_url('gambar/gambar_upload');?>", // mengatur url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
  maxFilesize: 1, // membatasi ukuran file yang di upload
  acceptedFiles: "image/jpg, image/jpeg", // menentukan tipe file yang akan di upload
        previewTemplate: previewTemplate,
        autoQueue: false, // Pastikan bahwa file tidak antri sampai ditambahkan secara manual
        previewsContainer: "#previews", // menentukan elemen untuk menampilkan preview
        clickable: ".fileinput-button" // menentukan elemen pemicu untuk memilih file
      });

      myDropzone.on("addedfile", function(file) {
        // menghubungkan tombol trart
        file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
      });

      // Update total progress bar pada saat proses upload
      myDropzone.on("totaluploadprogress", function(progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
      });

      myDropzone.on("sending", function(file) {
        // menampilkan total progressbar
        document.querySelector("#total-progress").style.opacity = "1";
        // pada saat upload berlangsung, tombol start akan mati(disabled)
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
      });

      // progressbar akan di sembunyikan ketika prosess upload sudah selesai
      myDropzone.on("queuecomplete", function(progress) {
        document.querySelector("#total-progress").style.opacity = "0";
      });

      // Membuat fungsi mengunggah semua gambar pada tombol start
  document.querySelector("#actions .start").onclick = function() {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
      };
      // Membuat fungsi pembatalan semua gambar pada saat upload
      document.querySelector("#actions .cancel").onclick = function() {
        myDropzone.removeAllFiles(true);
      };
    </script>
</body>
</html>

Pada program yang saya buat ini, saya menambahkan sedikit validasi, diataranya :

Maksimal upload hanya 1 MB
File yang bisa di upload hanya JPG dan JPEG saja.

Jangan kwatir, anda bisa menambahkan validasi sesuai keinginan anda sendiri. untuk menambahkan validasi, anda bisa menambahkan pada file view, tepatnya pada bagian ini :


var myDropzone = new Dropzone(document.body, { 
        url: "<?php echo site_url('gambar/gambar_upload');?>", // mengatur url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
  maxFilesize: 1, // membatasi ukuran file yang di upload
  acceptedFiles: "image/jpg, image/jpeg", // menentukan tipe file yang akan di upload
        previewTemplate: previewTemplate,
        autoQueue: false, // Pastikan bahwa file tidak antri sampai ditambahkan secara manual
        previewsContainer: "#previews", // menentukan elemen untuk menampilkan preview
        clickable: ".fileinput-button" // menentukan elemen pemicu untuk memilih file
      });

Ketika di test, maka tampilan akan tampak seperti ini :

Upload File Atau Gambar Dengan DropzoneJS Dan Codeignite-3

Agar tidak repot, anda bisa mendownload kode lengkapnya.

Download Disni Referensi

Jika anda sudah mendownload filenya, bacalah terlebih dahulu file README.txt yang ada di :

ci-dropzone/assets/database/readme.txt

Mungkin sekian dulu, semoga bermanfaat ya :)

More Info : Go To DropzoneJS

3 comments

UnknownSeptember 25, 2015 at 7:46 PM
saya mau nanya, gimana caranya ambil nilai input..
saya sudah setting jadi method nya jadi post,dan sudah arahkan url nya ke yang dituju, tapi tidak bisa..

ada pesan error "NetworkError: 500 Internal Server Error"
NovanOctober 1, 2016 at 4:26 PM
saya mempunyai
a.php
b.php

a.php berisi
tabelA yang salah satu kolom rownya ada ada link untuk file upload
b.php berisi halaman untuk file upload.

mas, bagaimana kalau controllernya gambar saya edit begini : http://pastebin.com/UgWDn744

jadi saat saya klik tabel di a.php. dengan mengambil "id"nya dengan perintah GET dan ditampilkan di halaman b.php, dan fungsi POSTnya agar fungsi upload itu terisi id di tabelB. tabelB ini adalah informasi file upload : http://pastebin.com/xDu00i7c

apa saja yang harus saya ganti di kode mananya ?

id di tableA nantinya akan saya link dengan id_hubung di tableB. dalam bentuk masing-masing table.