Bagi kalian yang sering menggunakan toko online atau sering menggunakan wordpress sebagai media untuk berinternet atau saling berbagi mungkin tidak akan asing lagi dengan fitur ini. Ya! mungkin waktu dulu kita menggunakan input type file untuk mengupload sebuah file dan kita harus browse dan memilih file yang akan kita upload.. wow panjang banget ya kalo dipikir2 dan sangat ribet. Lebay banget ya padahal ga seribet itu.. hehhe

Dengan seiring kemajuan teknologi dan semakin banyak nya para inventor muda yang terus mengembangkan library javascript kita sekarang dimudahkan dalam memanfaatkan internet. Salah satunya pemanfatan library dropzone.js yang dapat memudahkan kita dalam mengupload secara multiple bahkan kita dapat mengupload nya secara Drag and Drop alias tinggal tarik saja file yang akan kita upload :)Mudah bukan?

drag and drop

bagaimana? bagi pengguna wordpress mungkin sudah tidak asing dengan gambar bacaan diatas, sewaktu kalian melakukan posting artikel kalian diminta untuk melakukan upload file melalu drag and drop atau melalui select file :D

Plugin Dropzone ini memiliki beberapa kelebihan seperti,

  1. Diberi kemudahan mengostumisasi CSS dan tampilannya
  2. Membuat Thumbnail pada gambar yang kita upload nanti
  3. Multiple Upload file, jadi kita bisa mengupload sebanyak – banyaknya ke dalam folder
  4. Memiliki Callback event sehingga kita mengetahui file mana yang berhasil kita upload nanti

Nah sekarang bagaimana kita mengimplementasikan library dropzone.js ini  pada website kita, berikut penerapan simplenya :D

  • Download File

Untuk dapat mendownload file silahkan kunjungi http://www.dropzonejs.com/ untuk dapat mendowload file nya silahkan klik https://github.com/enyo/dropzone/tree/master/downloads

Jika sudah di download maka akan berisi file sebagai berikut

  1. Folder CSS
  2. Folder Images
  3. File dropzone.js
  4. File dropzone.min.js
  5. dropzone-amd-module.js
  6. dropzone-amd-module.min.js
  • Mempersiapkan File Index.php

Pada dasarnya untuk dapat mengupload sesuatu kita membutuhkan form, baiklah di dalam file index.php tadi seperti syntax berikut

<form action="proses.php" class="dropzone" id="my-awesome-dropzone">
			<div class="fallback">
				<input type="file" name="file" />
			</div>
		</form>

pada sintaks diatas dapat dilihat bahwa aksi pada mengacu pada file proses.php dan memiliki class dropzone dan id my-awesome-dropzone yang nanti nya akan kita gunakan pada pada library dropzone nya :D

Setelah sintaks form tadi selesai maka kita persiapkan sintaks untuk head pada html nya yang berisi sintaks javascript sebagai berikut

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/dropzone.css" type="text/css" />
		<script src="dropzone.js"></script>
		<script src="jquery.js"></script>
		<script>
			var Dropzone = require("dropzone");

			$("div#my-awesome-dropzone").dropzone({ url: "proses.php" });

		</script>

Pada bagian header diatas dilakukan pemanggilan CSS dropzone, jquery, dan library dropzone itu sendiri. Setelah itu dilakukan proses eksekusi fungsi pada library dropzone.js

Baiklah  file index.php tersebut ditulis lengkap maka akan seperti dibawah ini sintaksnya

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/dropzone.css" type="text/css" />
		<script src="dropzone.js"></script>
		<script src="jquery.js"></script>
		<script>
			var Dropzone = require("dropzone");

			$("div#my-awesome-dropzone").dropzone({ url: "proses.php" });

		</script>
	</head>
	<body>
		<form action="proses.php" class="dropzone" id="my-awesome-dropzone">
			<div class="fallback">
				<input type="file" name="file" />
			</div>
		</form>
	</body>
</html>
  • Membuat File Proses.php

File proses.php ini berguna untuk proses pemindahan file kedalam suatu folder dimana folder yang akan dipakai adalah folder bernama file , selanjutnya masukan sintaks berikut

$ds = "/";

	$storeFolder = 'file';

	if(!empty($_FILES)) {
		$tempFile = $_FILES['file']['tmp_name'];
		$targetPath = dirname(__FILE__) . $ds . $storeFolder . $ds;
		$targetFile = $targetPath . $_FILES['file']['name'];
		move_uploaded_file($tempFile, $targetFile);
	}

Sintaks diatas merupakan sintaks untuk memindahkan file yang akan diupload kedalam folder yang bernama file. Selanjutnya jika file proses.php tersebut sudah selesai maka kita buat file yang bernama file.

Jika semuanya sudah dilakukan, langkah terakhir adalah menguji coba aplikasi aplikasi tadi di localhost, jika langkahnya benar maka seharusnya tampil sebagai berikut… :D

Dropzone Upload

dan sekarang lihat ke dalam folder file anda, seharusnya file yang anda upload tadi sudah berada di dalam folder tersebut :)

Bagaimana? mudah bukan? hehe plugin ini juga dapat di integrasikan dengan proses penginputan produk pada toko online dan aplikasi lainnya sehingga toko online dan aplikasi kita terlihat elegann hahaha :D ⤧  Next post Membuat OAuth Login Facebook PHP dan MySQL ⤧  Previous post Membuat Login Verifikasi Email PHP dan MySQL