Datatable With Dropzone for Multiple File Uploads
Tutorial upload multiple foto dengan ajax dan Codeigniter (Dropzone.js)
Selamat datang pada tutorial hari ini.
Kali ini saya mau membagikan panduan gimana caranya melakukan upload banyak foto sekaligus dengan menggunakan framework Codeigniter, dan tentunya proses uploadnya melalui ajax.
Btw alasan saya membuat tutorial ini adalah dikarenakan sejak pertama kali saya publish Apricot CMS, saya banyak menerima pesan masuk dari teman teman yang sebagian besar menanyakan tentang komponen kompenen didalamnya.
Dan salah satu yang sering ditanyakan adalah tentang fitur drag dan drop upload gambar yang ada pada halaman admin Apricot CMS.
Contoh expanse upload pada yang ada pada halaman ambassador Apricot CMS
Kepada semua yang bertanya, sebenarnya saja sudah saya arahkan untuk langsung melihat source codenya. Tapi banyak yang masih bingung, mungkin karena praktiknya sudah lumayan kompleks dan juga karena code codenya sudah sesak sesakan dengan code code komponen lain.
Untuk itu, kali ini saya mau buatkan tutorialnya. Saya harapkan setelah selesai membaca dan mengikuti tutorial ini, kamu sudah bisa memahami dan dapat mempraktikanya ke dalam kasus yang lebih kompeks lagi.
Sebenarnya pembuatannya cukup mudah dan sederhana dikarenakan pada kasus ini kita akan menggunakan sebuah plugin javascript yang bernama Dropzone.js.
(Silahkan kan download pluginnya disini atau download contoh yang sudah jadi pada bagian akhir artikel ini).
Plugin ini nantinya menghandle proses pengiriman/upload data keserver (melalui Ajax). Setelah itu, pada sisi server, kita akan menggunakan Codeigniter untuk mempeoses penyimpanan file dan penyimpanan database.
Persiapan
ane. Buat directory baru pada localhost kamu dengan nama upload
2. Didalam directory upload, buat dua directory bernama upload-foto danassets
iii. Ekstrak semua file file Codeigniterdidalam directoryupload, sehingga menjadi seperti ini
4. DIdalam folder assets, masukan semua file Dropzone bersama filejQuery.
5. Buat Controllerbaru didalam directory awarding/controllers bernama Upload.php.
6. Buat Viewbaru didalam directory application/views bernama upload_view.php.
7. Buka file awarding/config/config.php lalu atur base urlmenjadi $config['base_url'] = 'http://localhost/upload/'
viii. Buka phpmyadmin lalu buat database baru bernama upload.
ix. Buatlah table baru didalamnya
CREATE Table `foto` ( `id` int(11) PRIMARY Key AUTO_INCREMENT, `nama_foto` varchar(250), `token` varchar(100) ) Akan dapat seperti ini
x. Buka file application/config/database.php lalu atur nama databasenya
Coding
Pada file upload_view.php, masukan kode berikut ini
<!DOCTYPE HTML> <html> <head> <title>Multiple Upload</championship> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" blazon="text/css" href="<?php echo base_url('assets/dropzone.min.css') ?>"> <link rel="stylesheet" type="text/css" href="<?php repeat base_url('assets/basic.min.css') ?>"> <script type="text/javascript" src="<?php echo base_url('assets/jquery.js') ?>"></script> <script type="text/javascript" src="<?php repeat base_url('assets/dropzone.min.js') ?>"></script> <way type="text/css"> torso{ background-color: #E8E9EC; } .dropzone { margin-top: 100px; border: 2px dashed #0087F7; } </fashion> </head> <body> <div class="dropzone"> <div course="dz-message"> <h3> Klik atau Drop gambar disini</h3> </div> </div> <script type="text/javascript"> </script> </body> </html> dan pada file Upload.php
grade Upload extends CI_Controller { role __construct(){ parent::__construct(); $this->load->database(); $this->load->helper(assortment('url','file')); } function index(){ $this->load->view('upload_view'); } } Buka browser lalu masukan alamat ini http://localhost/upload/index.php/upload
Ini hasilnya
Namun masih belum bisa mengupload gambar.
Masih pada file upload_view.php, tambahkan code berikut didalam tag javascriptnya
Dropzone.autoDiscover = simulated; var foto_upload= new Dropzone(".dropzone",{ url: "<?php echo base_url('index.php/upload/proses_upload') ?>", maxFilesize: 2, method:"post", acceptedFiles:"image/*", paramName:"userfile", dictInvalidFileType:"Type file ini tidak dizinkan", addRemoveLinks:true, }); //Effect ketika Memulai mengupload foto_upload.on("sending",function(a,b,c){ a.token=Math.random(); c.suspend("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto }); Dan pada file Upload.php, masukan lawmaking PHP berikut ini
class Upload extends CI_Controller { function __construct(){ parent::__construct(); $this->load->database(); $this->load->helper(array('url','file')); } function alphabetize(){ $this->load->view('upload_view'); } office proses_upload(){ $config['upload_path'] = FCPATH.'/upload-foto/'; $config['allowed_types'] = 'gif|jpg|png|ico'; $this->load->library('upload',$config); if($this->upload->do_upload('userfile')){ $token=$this->input->mail service('token_foto'); $nama=$this->upload->data('file_name'); $this->db->insert('foto',array('nama_foto'=>$nama,'token'=>$token)); } } } Sekarang refresh browserkamu , lalu drag beberapa foto didalamnya. Kini area upload sudah berfungsi
Foto foto nya sudah berhasil terupload dan sudah ada didalam folder upload.
Dan juga nama nama foto sudah tersimpan didalam database
Sampai disini semuanya sudah berjalan dengan baik.
Tapi masih ada satu hal lagi. Gimana jika kita ingin membatalkan foto yang sudah terupload dan sudah tersimpan didatabase?
Tentu itu bisa dilakukan. Jika kamu perhatikan dibawah thumbnailgambar terdapat ballast link "Remove File". Jika kamu klik link itu, gambar akan menghilang dari area upload. Namun file yang sudah terupload akan tetap ada dan tidak akan terhapus. Begitupun data yang telah tersimpan didatabase, masih tetap akan ada didatabase.
Jadi, bagaimana caranya agar data yang ada diserver ikut terhapus ketika kita mengklik "Remove File"? SIlahkan tambahkan code code berikut ini.
Pada file upload_view.php , dibagian javascriptnya tambahkan beberapa code sehingga menjadi seperti ini
Dropzone.autoDiscover = simulated; var foto_upload= new Dropzone(".dropzone",{ url: "<?php repeat base_url('index.php/upload/proses_upload') ?>", maxFilesize: 2, method:"post", acceptedFiles:"prototype/*", paramName:"userfile", dictInvalidFileType:"Blazon file ini tidak dizinkan", addRemoveLinks:true, }); //Event ketika Memulai mengupload foto_upload.on("sending",office(a,b,c){ a.token=Math.random(); c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto }); //Event ketika foto dihapus foto_upload.on("removedfile",function(a){ var token=a.token; $.ajax({ blazon:"post", data:{token:token}, url:"<?php echo base_url('index.php/upload/remove_foto') ?>", enshroud:faux, dataType: 'json', success: function(){ console.log("Foto terhapus"); }, error: function(){ console.log("Error"); } }); }); Terakhir, pada file Upload.php, tambahkan juga beberapa code didalamnya, hingga menjadi seperti ini
class Upload extends CI_Controller { role __construct(){ parent::__construct(); $this->load->database(); $this->load->helper(array('url','file')); } function alphabetize(){ $this->load->view('upload_view'); } //Untuk proses upload foto role proses_upload(){ $config['upload_path'] = FCPATH.'/upload-foto/'; $config['allowed_types'] = 'gif|jpg|png|ico'; $this->load->library('upload',$config); if($this->upload->do_upload('userfile')){ $token=$this->input->post('token_foto'); $nama=$this->upload->data('file_name'); $this->db->insert('foto',assortment('nama_foto'=>$nama,'token'=>$token)); } } //Untuk menghapus foto part remove_foto(){ //Ambil token foto $token=$this->input->post('token'); $foto=$this->db->get_where('foto',array('token'=>$token)); if($foto->num_rows()>0){ $hasil=$foto->row(); $nama_foto=$hasil->nama_foto; if(file_exists($file=FCPATH.'/upload-foto/'.$nama_foto)){ unlink($file); } $this->db->delete('foto',array('token'=>$token)); } repeat "{}"; } } Demikianlah keseluruhan tutorial uploade mutiple foto dengan codeigniter.
Karena sudah mempelajari dasar dasar ini, silahkan dikembangkan dan buat untuk kepentingan yang lebih kompleks lagi .
Silahkan download contoh project yang sudah jadi, jangan lupa dibuat dulu databasenya.
DOWNLOAD
Mohon dikoreksi jika ada kesalahan pada tutorial ini. Dan jika ada komentar atau pertanyaa, silahkan tinggalkan pesan kamu pada class komentar dibawah :)
Source: https://www.sandro.id/artikel/26-tutorial-upload-multiple-foto-dengan-ajax-dan-codeigniter-dropzone-js
0 Response to "Datatable With Dropzone for Multiple File Uploads"
Postar um comentário