Bro kali ini kita akan mendemonstrasikan penggunaan ajax upload dengan menggunakan library Plupload dan jquery.
Ada beberapa manfaat kita menggunakan plupload ini sebagai library :
1. Dapat melakukan proses upload dengan metode chunk atau pemotongan file-file besar menjadi lebih kecil / parsial pada saat proses upload
2. Adanya fitur progress upload yang sederhana.
3. Multiple Upload
4. Resize on the fly. Artinya kita bisa setting di library ini dengan melakukan resize gambar yang diupload oleh resource klien, ini sangat bermanfaat karena dapat mengurangi kinerja server dalam proses image resize.
5. Upload dengan menggunakan HTML5 tanpa harus ada flash.
Berikut langkah-langkahnya :
1. Tambahkan jquery dan library ini di master template atau blade view kalian dibawah ini kita menggunakan cdnjs jadi tidak perlu di download librarynya :
<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Plupload -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/plupload/3.1.2/plupload.full.min.js"></script>
<!-- CustomJs-->
<scriptsrc="{{ asset('js/custom.js') }}"defer></script>
2. Buat satu file baru namanya custom.js taruh file tersebut di folder /public/js/ dan isikan baris ini :
$(document).ready(function($) {
//Upload Library
var uploader = new plupload.Uploader({
browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
url: $('#browse').attr('url'),
multi_selection: false,
multipart_params: {
},
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
file_data_name: 'file',
//only resize on browser not on android
});
uploader.init();
uploader.bind('FilesAdded', function(up, files) {
uploader.start();
var html = '';
plupload.each(files, function(file) {
// html += '<li id="' + file.id + '" class="file_uploading"> ' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
});
// document.getElementById('filelist').innerHTML += html;
});
uploader.bind('UploadProgress', function(up, file) {
// document.getElementById('submit').setAttribute("disabled", true);
//document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
document.getElementById('file_progress').innerHTML = '<span class="text-warning"> Uploading ' + file.percent + "%</span>";
});
uploader.bind('Error', function(up, err) {
document.getElementById('file_progress').innerHTML += "\nError #" + err.code + ": " + err.message;
});
uploader.bind('FileUploaded', function(up, file) {
// $(file.id).removeClass('loading_small');
// document.getElementById(file.id).getElementsByTagName('span')[0].className = "fa fa-check";
// document.getElementById(file.id).className = "upload_success";
document.getElementById('file_progress').innerHTML = '<span> <i class="fa fa-check text-success"></i> Upload Success </span>';
//Jquery(file.id).css({color : "#18930B"});
});
uploader.bind('UploadComplete', function(up, file) {
});
//End Upload Library
});
3. Tambahkan tombol upload dan csrf_token di halaman blade yang ingin anda tambahkan fitur upload ajax tadi script berikut :
<meta name="csrf-token" content="{{ csrf_token() }}">
<span id="file_progress" class="float-left"></span>
<a id="browse" href="javascript:;" style="float:right" class="uploader" url="{{ url('attachment')}}" ><button class="btn btn-warning"> <i class="fa fa-paperclip"> </i> Upload </button></a>
4. Buat satu file controller dengan nama AttachmentController.php dengan isian berikut :
<?php
namespace App\Http\Controllers;
use App\Attachments;
use Illuminate\Http\Request;
class AttachmentController extends Controller
{
public function upload(Request $request)
{
$path = 'attachments';
$file = $request->file('file');
$request->file->store($path);
}
}
file ini digunakan untuk menerima kiriman file upload yang telah diupload pada plupload.
5. Jangan lupa tambahkan routes di file web.php dengan route script berikut :
// uploader
Route::post('attachment', 'AttachmentController@upload');
berikut contoh tampilan form yang saya buat dengan menambahkan fitur upload dengan contoh script diatas (tombol upload isinya adalah script pada langkah 3 diatas ) :
Selesai bro… jika ada yang kurang jelas bisa didiskusikan di kolom komentar.
