[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-drag-drop-upload-gambar-dengan-php-dan-dropzonejs-3":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":10,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},405,"drag-drop-upload-gambar-dengan-php-dan-dropzonejs-3","Tutorial Drag & Drop Upload Gambar Dengan PHP dan Dropzone Js","Agus Yusida October 25, 2017 Halo teman ngide! Kali ini kita akan belajar bagaimana cara membuat upload gambar dengan drag & drop menggunakan PHP dan DropzoneJS. DropzoneJS adalah sebuah library javas",null,[],"2019-09-21T16:00:00Z","2026-07-14T04:39:37.091206Z","\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>  \u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"https:\u002F\u002Fsecure.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&amp;d=mm&amp;r=g\"\u002F>  Agus Yusida October 25, 2017\u003Cp>Halo teman ngide! Kali ini kita akan belajar bagaimana cara membuat upload gambar dengan drag &amp; drop menggunakan PHP dan DropzoneJS.\u003C\u002Fp>\u003Cp>DropzoneJS adalah sebuah library javascript yang membantu kamu untuk membuat sebuah drag &amp; drop dengan mudah, tentunya bisa tanpa JQuery.\u003C\u002Fp>\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>\u003Cp>Bisa cek demo di sini.\u003C\u002Fp> \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>\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>\u003Cp>Struktur file dan foldernya akan seperti di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>\u002F\u002Fgrab-upload\n-- index.php\n-- upload.php\n-- uploads \u002F\u002F folder\n-- dropzone.min.js\n-- dropzine.min.css\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>1. Buat file index.php\u003C\u002Fh3>\u003Cp>Buka file \u003Ccode>index.php\u003C\u002Fcode> dan isi dengan script di bawah ini:\u003C\u002Fp>\u003Cpre>class Voila {\npublic:\n  \u002F\u002F Voila\n  static const string VOILA = \"Voila\";\n  \u002F\u002F will not interfere with embedded tags.\n}\u003C\u002Fpre>\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;\u003C\u002Fcode>\u003C\u002Fpre>\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>\u003Ch3>2. Buat file upload.php\u003C\u002Fh3>\u003Cp>File \u003Ccode>upload.php\u003C\u002Fcode> akan menerima dan memproses request untuk mengupload gambar ke dalam folder uploads.\u003C\u002Fp>\u003Cp>Buka file \u003Ccode>upload.php\u003C\u002Fcode> dan isi dengan kode di bawah ini:\u003C\u002Fp>\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;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Jadi file \u003Ccode>upload.php\u003C\u002Fcode> ini memberikan response berupa json baik saat gambar berhasil di upload ataupun gagal.\u003C\u002Fp>Rekomendasi:  PHP 7 telah release, apa yang baru?\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>\u003Ch3>3. Menampilkan list gambar\u003C\u002Fh3>\u003Cp>Jika sekarang kamu mengupload gambar dan berhasil maka tidak akan tampil. Lalu bagaimana cara menampilkan gambar yang sudah di upload?\u003C\u002Fp>\u003Cp>Buka lagi file \u003Ccode>index.php\u003C\u002Fcode> dan tambahkan script ini di paling atas sebelum tag\u003C\u002Fp>\u003Cpre>\u003Ccode>&lt;?php\n \n$dir    = 'uploads\u002F';\n$files = scandir($dir);\n \n?&gt;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Script di atas adalah untuk mengambil list semua file di dalam folder uploads\u003C\u002Fp>\u003Cp>Kemudian tambahkan script ini di dalam div dengan id preview\u003C\u002Fp>\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;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Script di atas berfungsi untuk melakukan perulangan terhadap list gambar dan menampilkannya.\u003C\u002Fp>\u003Cp>Sekarang coba reload browser kamu, dan kamu akan mendapatkan list gambar yang sudah berhasil di upload. \u003C\u002Fp>\u003Cp>4. Menampilkan gambar tanpa reload halaman\u003C\u002Fp> \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>\u003Cp>Tambahkan script di bawah ini sebelum tag &lt;\u002Fbody&gt;\u003C\u002Fp>\u003Cpre>\u003Ccode>&lt;script type=\"text\u002Fjavascript\"&gt;\n    Dropzone.options.Ngide = {\n        addRemoveLinks : true,\n        maxFilesize : 1,\n        success: function(file, data){\n            console.log(file)\n            console.log(data)\n            var preview = document.getElementById('preview');\n            var img = \"&lt;img src='\" + data.file + \"'&gt;\";\n            \n            preview.insertAdjacentHTML( 'beforeend', img );\n        }\n    }\n&lt;\u002Fscript&gt;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jadi dari event success itu akan menerima data berupa json dari \u003Ccode>upload.php\u003C\u002Fcode>. Lalu menambahkan gambar tadi secara langsung di dalam div id preview. \u003C\u002Fp>\u003Cp>Silakan teman-teman reload halaman dan coba upload sebuah gambar. Jika berhasil maka gambar yang baru di upload akan otomatis ditampilkan di dalam \u003Cem>div id preview\u003C\u002Fem>.\u003C\u002Fp>\u003Cp>Jadi itulah bagaimana cara membuat \u003Cstrong>drag &amp; drop upload gambar dengan menggunakan PHP dan DropzoneJs\u003C\u002Fstrong>. Kalian bisa berkereasi lebih lanjut memanfaatkan beberapa event dari DropzoneJs sehingga proses upload menjadi lebih menarik.\u003C\u002Fp>Rekomendasi:  Helllo Laravel! Perkenalan dengan Laravel\u003Cp>Jika ada pertanyaan dan komentar bisa di isi di kolom komentar di bawah dan inget share juga jika bermanfaat ya.\u003C\u002Fp>Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&amp;media=&amp;description=\">\u003C\u002Fa> Tags: Dropzonejs PHP","Agus Yusida October 25, 2017 Halo teman ngide! Kali ini kita akan belajar bagaimana cara membuat upload gambar dengan drag & drop menggunakan PHP dan DropzoneJS",[],[],0]