[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-drag-drop-upload-gambar-dengan-php-dan-dropzonejs":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},432,"drag-drop-upload-gambar-dengan-php-dan-dropzonejs","Tutorial PHP – Drag & Drop Upload Gambar Dengan PHP dan Dropzone Js","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 untu",null,[],"2020-09-20T16:00:00Z","2026-07-14T04:39:39.193877Z","\u003Cp>Halo teman ngide! Kali ini kita akan belajar bagaimana cara membuat upload gambar dengan drag &amp; drop menggunakan PHP dan DropzoneJS.\u003C\u002Fp>\n\u003Cp>DropzoneJS adalah sebuah library javascript yang membantu kamu untuk membuat sebuah drag &amp; drop dengan mudah, tentunya bisa tanpa JQuery.\u003C\u002Fp>\n\u003Cp>Kamu juga bisa membaca tutorial lainnya tentang bagaimana cara mengupload gambar dengan PHP di sini: Tutorial Upload Gambar Dengan PHP dan JQuery\u003C\u002Fp>\n\u003Cp>Bisa cek demo di sini.\u003C\u002Fp>\n\u003Cp>Pertama kamu buat sebuah folder di local server kamu, misalnya di dalam folder htdocs dengan nama drag-upload \u003Cem>(nama bisa dibedakan)\u003C\u002Fem>.\u003C\u002Fp>\n\u003Cp>Kemudian kamu download dulu file dropzone.min.js dan dropzone.min.css di sini : \u003Ca href=\"https:\u002F\u002Fgitlab.com\u002Fmeno\u002Fdropzone\u002Fbuilds\u002Fartifacts\u002Fmaster\u002Fdownload?job=release\">Dropzone\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>Struktur file dan foldernya akan seperti di bawah ini:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002Fgrab-upload\n-- index.php\n-- upload.php\n-- uploads \u002F\u002F folder\n-- dropzone.min.js\n-- dropzine.min.css\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>1. Buat file index.php\u003C\u002Fh3>\n\u003Cp>Buka file \u003Ccode>index.php\u003C\u002Fcode> dan isi dengan script di bawah ini:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Drag &amp; Drop File Upload&lt;\u002Ftitle&gt;\n\t&lt;link rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"dropzone.min.css\"&gt;\n\t&lt;style type=\"text\u002Fcss\"&gt;\n\t\t.container{\n\t\t\twidth: 50%;\n\t\t\tmargin: auto;\n\t\t}\n\t\t#preview img{\n\t\t\tmargin: 8px;\n\t\t\twidth: 150px;\n\t\t\theight: 150px;\n\t\t}\n\t&lt;\u002Fstyle&gt;\n&lt;\u002Fhead&gt;\n&lt;body&gt;\n\t&lt;div class=\"container\"&gt;\n\t\t&lt;h1 style=\"text-align: center;\"&gt;Drag &amp; Drop File Upload&lt;\u002Fh1&gt;\n\t\t&lt;form action=\"upload.php\" class=\"dropzone\" id=\"Ngide\"&gt;\n\t\t  &lt;div class=\"fallback\"&gt;\n\t\t    &lt;input name=\"file\" type=\"file\" multiple \u002F&gt;\n\t\t  &lt;\u002Fdiv&gt;\n\t\t&lt;\u002Fform&gt;\n\t\t&lt;h2 style=\"text-align: center;\"&gt;List Image&lt;\u002Fh2&gt;\n\t\t&lt;div id=\"preview\"&gt;\n\t\t&lt;\u002Fdiv&gt;\n\t\t&lt;a href=\"\"&gt;&lt;\u002Fa&gt;\n\t&lt;\u002Fdiv&gt;\n&lt;script type=\"text\u002Fjavascript\" src=\"dropzone.min.js\"&gt;&lt;\u002Fscript&gt;\n&lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\n \u003Cfigcaption>\n\u003Ci>Tampilan index.php\u003C\u002Fi>\n\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Sedikit pejelasan tentang file index.php adalah kita include script dan css dropzone, kemudian kita buat sebuah form denga action yaitu \u003Ccode>upload.php\u003C\u002Fcode>. Form dengan class dropzone akan secara otomatis terdeteksi oleh DropzoneJs dan mengubahnya menjadi drag &amp; drop.\u003C\u002Fp>\n\u003Ch3>2. Buat file upload.php\u003C\u002Fh3>\n\u003Cp>File \u003Ccode>upload.php\u003C\u002Fcode> akan menerima dan memproses request untuk mengupload gambar ke dalam folder uploads.\u003C\u002Fp>\n\u003Cp>Buka file \u003Ccode>upload.php\u003C\u002Fcode> dan isi dengan kode di bawah ini:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php\nheader('Content-Type: application\u002Fjson');\n \n \nif(isset($_FILES['file']['type'])){\n \n\t$validextensions = array('jpeg', 'jpg', 'png');\n\t$temporary = explode('.', $_FILES['file']['name']);\n\t$file_extension = strtolower(end($temporary));\n\t\n\tif(($_FILES['file']['size'] &gt; 1000000)){\n\t\t$data = array(\n\t\t\t\t\t'error'\t=&gt; 'Max file size is 1Mb',\n\t\t\t\t);\n\t\t\t\t\n\t\thttp_response_code(500);\n\t\techo json_encode($data);\n\t}else {\n\t\t\t\n\t\tif (\n\t \n\t\t\t(($_FILES['file']['type'] == 'image\u002Fpng') || \n\t\t\t($_FILES['file']['type'] == 'image\u002Fjpg') || \n\t\t\t($_FILES['file']['type'] == 'image\u002Fjpeg'))\n\t \n\t\t\t&amp;&amp; \n\t\t\t\n\t\t\tin_array($file_extension, $validextensions)){\n\t \n\t\t\tif ($_FILES['file']['error'] &gt; 0){\n\t \n\t\t\t\t$data = array(\n\t\t\t\t\t'error' =&gt; $_FILES['file']['error']\n\t\t\t\t\t);\n\t \n\t\t\t\techo json_encode($data);\n\t \n\t\t\t}else{\n\t\t\t\t\n\t\t\t\tif (file_exists('uploads\u002F' . $_FILES['file']['name'])) {\n\t \n\t\t\t\t\t$data = array(\n\t\t\t\t\t\t'error' =&gt; $_FILES['file']['name'] . ' already exists' \n\t\t\t\t\t);\n\t\t\t\t\t\n\t\t\t\t\thttp_response_code(500);\n\t\t\t\t\techo json_encode($data);\n\t\t\t\t\n\t\t\t\t}else{\n\t\t\t\t\t\n\t\t\t\t\t$filename = $_FILES['file']['name'];\n\t\t\t\t\t$sourcePath = $_FILES['file']['tmp_name']; \u002F\u002F Storing source path of the file in a variable\n\t\t\t\t\t$targetPath = 'uploads\u002F'.$filename; \u002F\u002F Target path where file is to be stored\n\t\t\t\t\tmove_uploaded_file($sourcePath,$targetPath) ; \u002F\u002F Moving Uploaded file\n\t\t\t\t\t\n\t\t\t\t\t$data = array(\n\t\t\t\t\t\t'message'\t=&gt; 'Image Uploaded Successfully',\n\t\t\t\t\t\t'file' \t\t=&gt; $targetPath\n\t\t\t\t\t);\n\t\t\t\t\n\t\t\t\t\techo json_encode($data);\n\t\t\t\t}\n\t\t\t}\n\t \n\t\t} else{\n\t \n\t\t\t$data = array(\n\t\t\t\t'error'\t=&gt; 'Invalid file Type',\n\t\t\t);\n\t\t\thttp_response_code(500);\n\t\t\n\t\t\techo json_encode($data);\n\t \n\t\t}\n\t}\n}\n?&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jadi file \u003Ccode>upload.php\u003C\u002Fcode> ini memberikan response berupa json baik saat gambar berhasil di upload ataupun gagal.\u003C\u002Fp>\n\u003Cp>Sekarang kamu bisa mencoba untuk mengupload sebuah gambar dengan cara mendrag &amp; drop ke dalam kotak tersebut. Jika berhasil akan ada pesan sukses ataupun gagal.\u003C\u002Fp>\n\u003Ch3>3. Menampilkan list gambar\u003C\u002Fh3>\n\u003Cp>Jika sekarang kamu mengupload gambar dan berhasil maka tidak akan tampil. Lalu bagaimana cara menampilkan gambar yang sudah di upload?\u003C\u002Fp>\n\u003Cp>Buka lagi file \u003Ccode>index.php\u003C\u002Fcode> dan tambahkan script ini di paling atas sebelum tag\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php\n \n$dir    = 'uploads\u002F';\n$files = scandir($dir);\n \n?&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Script di atas adalah untuk mengambil list semua file di dalam folder uploads\u003C\u002Fp>\n\u003Cp>Kemudian tambahkan script ini di dalam div dengan id preview\u003C\u002Fp>\n\u003Cpre>\u003Ccode>&lt;?php\nforeach ($files as $key =&gt; $img) {\n\tif($img != '..' &amp;&amp; $img != '.' )\n\t\techo '&lt;img src=\"'.$dir.$img.'\" \u002F&gt;';\n\t}\n?&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Script di atas berfungsi untuk melakukan perulangan terhadap list gambar dan menampilkannya.\u003C\u002Fp>\n\u003Cp>Sekarang coba reload browser kamu, dan kamu akan mendapatkan list gambar yang sudah berhasil di upload. \u003C\u002Fp>\n\u003Col>\n\u003Cli>Menampilkan gambar tanpa reload halaman\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Jika sebelumnya kita perlu mereload halaman untuk melihat gambar yang baru di upload, sekarang kita akan menambahkan beberapa script dengan memanfaatkan event \u003Ccode>success\u003C\u002Fcode> dari DropzoneJs saat proses upload sudah berhasil. \u003C\u002Fp>\n\u003Cp>Tambahkan script di bawah ini sebelum tag \u003C\u002Fp>","Halo teman ngide! Kali ini kita akan belajar bagaimana cara membuat upload gambar dengan drag & drop menggunakan PHP dan DropzoneJS. DropzoneJS adalah sebuah li",[],[],0]