Membuat image upload dengan Dropzone.js dan Codeigniter
Kali ini cilphie akan memberikan sedikit tutorial bagaimana membuat image upload dengan menggunakan plugin dropzone.js pada codeigniter. Dropzone.js merupakan plugin yang bagus untuk membuat image upload karena selain bisa di click juga bisa men-drop image kedalam box yang ada sekaligus.
Langsung aja di praktekkan ya, saya anggap agan semua sudah bisa cara memasang plugin dropzone.js, selengkapnya lihat disini
View:
<--label class="form-label">Upload Image<--/label>
<--form action="upload" class="dropzone no-margin" id="myDropzone">
<--div class="fallback">
<--input name="file" type="file" multiple/>
<--/div>
<--/form>
<--button type="button" id="save">Save<--/button>
<--button type="button" id="clear">Clear<--/button>
<---script>
$(document).ready(function()
{
Dropzone.options.myDropzone =
{
autoProcessQueue: false, // Berfungsi file diupload hanya ketika ada tombol yang di click
addRemoveLinks: true, // menampilkan remove button di thumbnail
parallelUploads: 50, // Berfungsi untuk meng-upload image seberapa banyak dalam sekali proses
init: function()
{
var submitButton = document.querySelector("#save") // Deklarasi tombol submit
myDropzone = this;
submitButton.addEventListener("click", function()
{
myDropzone.processQueue(); // upload file dijalankan
});
}
};
$('#clear').click(function()
{
Dropzone.forElement("#myDropzone").removeAllFiles(true);
});
});
<---/script>
controler:
function upload()
{
if (!empty($_FILES))
{
$config['upload_path'] = './upload/';
$config['allowed_types'] = 'gif|jpg|png';
$config['encrypt_name'] = TRUE;
$config['overwrite'] = FALSE;
$config['max_size'] = '500000';
$this->upload->initialize($config);
if ($this->upload->do_upload('file'))
{
$fileData = $this->upload->data();
$config['image_library'] = 'gd2';
$config['source_image'] = $fileData['full_path'];
$config['create_thumb'] = TRUE;
$config['maintain_ratio'] = TRUE;
$config['width'] = 370;
$config['height'] = 277;
$this->image_lib->initialize($config);
$this->image_lib->resize();
// Bisa ditambahkan code untuk insert ke db
}
}
}
happy coding