Sunday, May 17, 2015

Upload File Atau Gambar Dengan DropzoneJS Dan Codeignite-3

upload gambar dengan dropzone js

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

Dipembahasan sebelumnya saya pernah membahas cara membuat multi upload dengan dropzone ,pada waktu itu saya masih menggunakan dropzone 3. Nah 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

Buat file baru bernama Gambar.php , lalu simpan di controller. (salin kode dibawah ini)

<?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));
   }
  }
 }
?>

Lalu terakhir buat file baru dengan nama gambar.php , lalu simpan di folder view (salin kode di bawah ini)

<!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

Upload File Atau Gambar Dengan DropzoneJS Dan Codeignite-3

Agar tidak repot, anda bisa mendownload kode lengkapnya.
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

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.

23 komentar

mau tanya dong mas klo untuk membatasi dimensi image bisa ga dengan dropzone ? thx before

kurang tau, tapi sepertinya belum bisa.
untuk permasalahan ukuran gambar bisa pake fungsi "resize" aja
http://www.dropzonejs.com/#config-resize

var myDropzone = new Dropzone(document.body,


kode tsb berada di file mana ya mas, makasih byk

ada di javascript di bawah html pada file gambar.php

thanks, sudah ketemu. klo mau resize gambar yg diupload bagaimana yaa cara buat fungsi nya..?

lihat ini : http://www.dropzonejs.com/#config-resize

rasa nya bingung taruh code nya dmn untuk resize apakah dibawah
maxFilesize: 2,

hahaha stres kenapa ?
emng mau mu dropzone nya pengen di edit kyk apa ?

cobain ini : http://www.jqueryajaxphp[dot]com/upload-resize-image-dropzone-php/

Mau nanya mas. kalo ditambah masing-masing foto ada namanya gimana ya kalo pake dropzone? makasih mas

mas file di model untuk koneksi ke databasenya ko ga ada ya

sepertinya tidak bisa,,,,
soalnya dropzone ini lib buat upload image aja, mungkin kalau mau namanya bisa di rename, itu bukan di dropzone nya

gan ini ane udah work,mantap.
tapi pas ane nyoba nambahin judul di imput manual ko malah error yak.?
tapi si gambar ke upload.?

gan ini ane udah work,mantap.
tapi pas ane nyoba nambahin judul di imput manual ko malah error yak.?
tapi si gambar ke upload.?

gan ini ane udah work,mantap.
tapi pas ane nyoba nambahin judul di imput manual ko malah error yak.?
tapi si gambar ke upload.?

mau tanya mas, gambar yang sudah di upload bisa di edit lagi engga ya ?

bisa, cuman untuk tutorial ini hanya ngebahas uploadnya saja

cara edit nya gimana ya mas ?
terima kasih sebelumnya

terimakasih buat codenya. sangat membantu :)

enyo-dropzone itu apa ya... errornya disitu


EmoticonEmoticon