Upload File Atau Gambar Dengan DropzoneJS Dan Codeignite-3

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

Agar tidak repot, anda bisa mendownload kode lengkapnya.

Download Disni

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

25/Post a Comment/Comments

Ranvez21 September 2015 pukul 13.45
mau tanya dong mas klo untuk membatasi dimensi image bisa ga dengan dropzone ? thx before
BalasHapus
Balasan
Cahya Dyazin12 November 2015 pukul 20.34
hahaha stres kenapa ?
emng mau mu dropzone nya pengen di edit kyk apa ?
BalasHapus
Balasan
Cahya Dyazin12 November 2015 pukul 22.20
cobain ini : http://www.jqueryajaxphp[dot]com/upload-resize-image-dropzone-php/
BalasHapus
Balasan
Ridho Illahi17 Desember 2015 pukul 10.32
Mau nanya mas. kalo ditambah masing-masing foto ada namanya gimana ya kalo pake dropzone? makasih mas
BalasHapus
Balasan
Maksudi Indra20 Januari 2016 pukul 23.09
mas file di model untuk koneksi ke databasenya ko ga ada ya
BalasHapus
Balasan
Sunaryo Yagami7 Agustus 2016 pukul 12.59
gan ini ane udah work,mantap.
tapi pas ane nyoba nambahin judul di imput manual ko malah error yak.?
tapi si gambar ke upload.?
BalasHapus
Balasan
Sunaryo Yagami7 Agustus 2016 pukul 13.00
gan ini ane udah work,mantap.
tapi pas ane nyoba nambahin judul di imput manual ko malah error yak.?
tapi si gambar ke upload.?
BalasHapus
Balasan
Sunaryo Yagami7 Agustus 2016 pukul 13.00
gan ini ane udah work,mantap.
tapi pas ane nyoba nambahin judul di imput manual ko malah error yak.?
tapi si gambar ke upload.?
BalasHapus
Balasan
kiki24 Agustus 2016 pukul 21.12
mau tanya mas, gambar yang sudah di upload bisa di edit lagi engga ya ?
BalasHapus
Balasan
Unknown19 November 2016 pukul 16.00
terimakasih buat codenya. sangat membantu :)
BalasHapus
Balasan
GUnawan w7 Desember 2016 pukul 22.24
enyo-dropzone
BalasHapus
Balasan
GUnawan w7 Desember 2016 pukul 22.25
enyo-dropzone itu apa ya... errornya disitu
BalasHapus
Balasan
dedi ahmad24 Agustus 2020 pukul 01.18
mas , boleh minta sc nya? link nya expired
BalasHapus
Balasan

Tambahkan komentar

Upload File Atau Gambar Dengan DropzoneJS Dan Codeignite-3

Diposting oleh Nicht Menschen

25/Post a Comment/Comments

Posting Komentar

Formulir Kontak

Upload File Atau Gambar Dengan DropzoneJS Dan Codeignite-3

Diposting oleh Nicht Menschen

You might like

25/Post a Comment/Comments

Posting Komentar

Formulir Kontak