Drag & Drop Upload Gambar Dengan PHP dan DropzoneJs

  bcscoder
25 Oct 2017 at 1:01 am

Halo teman ngide! Kali ini kita akan belajar bagaimana cara membuat upload gambar dengan drag & drop menggunakan PHP dan DropzoneJS.

DropzoneJS adalah sebuah library javascript yang membantu kamu untuk membuat sebuah drag & drop dengan mudah, tentunya bisa tanpa JQuery.

Kamu juga bisa membaca tutorial lainnya tentang bagaimana cara mengupload gambar dengan PHP di sini: Tutorial Upload Gambar Dengan PHP dan JQuery

Bisa cek demo di sini.

Pertama kamu buat sebuah folder di local server kamu, misalnya di dalam folder htdocs dengan nama drag-upload (nama bisa dibedakan).

Kemudian kamu download dulu file dropzone.min.js dan dropzone.min.css di sini : Dropzone

Struktur file dan foldernya akan seperti di bawah ini:

//grab-upload
-- index.php
-- upload.php
-- uploads // folder
-- dropzone.min.js
-- dropzine.min.css

1. Buat file index.php

Buka file index.php dan isi dengan script di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Drag & Drop File Upload</title>
	<link rel="stylesheet" type="text/css" href="dropzone.min.css">
	<style type="text/css">
		.container{
			width: 50%;
			margin: auto;
		}
		#preview img{
			margin: 8px;
			width: 150px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1 style="text-align: center;">Drag & Drop File Upload</h1>
		<form action="upload.php" class="dropzone" id="Ngide">
		  <div class="fallback">
		    <input name="file" type="file" multiple />
		  </div>
		</form>
		<h2 style="text-align: center;">List Image</h2>
		<div id="preview">


		</div>

		<a href=""></a>
	</div>

<script type="text/javascript" src="dropzone.min.js"></script>

</body>
</html>

Sedikit pejelasan tentang file index.php adalah kita include script dan css dropzone, kemudian kita buat sebuah form denga action yaitu upload.php. Form dengan class dropzone akan secara otomatis terdeteksi oleh DropzoneJs dan mengubahnya menjadi drag & drop.

2. Buat file upload.php

File upload.php akan menerima dan memproses request untuk mengupload gambar ke dalam folder uploads.

Buka file upload.php dan isi dengan kode di bawah ini:

<?php
header('Content-Type: application/json');
 
 
if(isset($_FILES['file']['type'])){
 
	$validextensions = array('jpeg', 'jpg', 'png');
	$temporary = explode('.', $_FILES['file']['name']);
	$file_extension = strtolower(end($temporary));
	
	if(($_FILES['file']['size'] > 1000000)){
		$data = array(
					'error'	=> 'Max file size is 1Mb',
				);
				
		http_response_code(500);
		echo json_encode($data);
	}else {

			
		if (
	 
			(($_FILES['file']['type'] == 'image/png') || 
			($_FILES['file']['type'] == 'image/jpg') || 
			($_FILES['file']['type'] == 'image/jpeg'))
	 
			&& 
			
			in_array($file_extension, $validextensions)){
	 
			if ($_FILES['file']['error'] > 0){
	 
				$data = array(
					'error' => $_FILES['file']['error']
					);
	 
				echo json_encode($data);
	 
			}else{
				
				if (file_exists('uploads/' . $_FILES['file']['name'])) {
	 
					$data = array(
						'error' => $_FILES['file']['name'] . ' already exists' 
					);
					
					http_response_code(500);
					echo json_encode($data);
				
				}else{
					
					$filename = $_FILES['file']['name'];
					$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
					$targetPath = 'uploads/'.$filename; // Target path where file is to be stored
					move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
					
					$data = array(
						'message'	=> 'Image Uploaded Successfully',
						'file' 		=> $targetPath
					);
				
					echo json_encode($data);
				}
			}
	 
		} else{
	 
			$data = array(
				'error'	=> 'Invalid file Type',
			);

			http_response_code(500);
		
			echo json_encode($data);
	 
		}
	}
}
?>

Jadi file upload.php ini memberikan response berupa json baik saat gambar berhasil di upload ataupun gagal.

Sekarang kamu bisa mencoba untuk mengupload sebuah gambar dengan cara mendrag & drop ke dalam kotak tersebut. Jika berhasil akan ada pesan sukses ataupun gagal.

3. Menampilkan list gambar

Jika sekarang kamu mengupload gambar dan berhasil maka tidak akan tampil. Lalu bagaimana cara menampilkan gambar yang sudah di upload?

Buka lagi file index.php dan tambahkan script ini di paling atas sebelum tag

<?php
 
$dir    = 'uploads/';
$files = scandir($dir);
 
?>

Script di atas adalah untuk mengambil list semua file di dalam folder uploads

Kemudian tambahkan script ini di dalam div dengan id preview

<?php
foreach ($files as $key => $img) {
	if($img != '..' && $img != '.' )
		echo '<img src="'.$dir.$img.'" />';
	}
?>

Script di atas berfungsi untuk melakukan perulangan terhadap list gambar dan menampilkannya.

Sekarang coba reload browser kamu, dan kamu akan mendapatkan list gambar yang sudah berhasil di upload. 

4. Menampilkan gambar tanpa reload halaman

Jika sebelumnya kita perlu mereload halaman untuk melihat gambar yang baru di upload, sekarang kita akan menambahkan beberapa script dengan memanfaatkan event success dari DropzoneJs saat proses upload sudah berhasil. 

Tambahkan script di bawah ini sebelum tag </body>

<script type="text/javascript">
    Dropzone.options.Ngide = {
        addRemoveLinks : true,
        maxFilesize : 1,
        success: function(file, data){
            console.log(file)
            console.log(data)

            var preview = document.getElementById('preview');
            var img = "<img src='" + data.file + "'>";
            
            preview.insertAdjacentHTML( 'beforeend', img );
        }
    }
</script>

Jadi dari event success itu akan menerima data berupa json dari upload.php. Lalu menambahkan gambar tadi secara langsung di dalam div id preview. 

Silakan teman-teman reload halaman dan coba upload sebuah gambar. Jika berhasil maka gambar yang baru di upload akan otomatis ditampilkan di dalam div id preview.

Jadi itulah bagaimana cara membuat drag & drop upload gambar dengan menggunakan PHP dan DropzoneJs. Kalian bisa berkereasi lebih lanjut memanfaatkan beberapa event dari DropzoneJs sehingga proses upload menjadi lebih menarik.

Jika ada pertanyaan dan komentar bisa di isi di kolom komentar di bawah dan inget share juga jika bermanfaat ya.


Share Yuk:

Rekomendasi untuk di baca!


Belajar Laravel : Apa yang baru dari Laravel 5.5?

06 Sep 2017

Like our facebook page


Around Web