Tutorial kali ini akan menjelaskan bagaimana cara membuat sebuah form untuk mengupload file dengan menggunakan Laravel. Ada kalanya program yang kita buat tidak hanya berisi form input berupa teks saja namun juga bisa melakukan suatu attachment file. Nah untuk tutorial ini hanya akan dijelaskan cara untuk mengupload sebuah file dilengkapi dengan beberapa validasi yang biasanya dibutuhkan seperti ukuran file dan juga ekstensi dari file tersebut. Berikut ini adalah langkah-langkah yang perlu dilalukan :
#MENYIAPKAN ROUTE
Hal pertama yang saya lakukan adalah menyiapkan route terlebih dahulu. Sebagai contoh di sini, saya membuat 2 buah route yang berguna untuk menampilkan form dan yang kedua untuk memproses hasil upload dari form. Berikut ini adalah contoh kode nya
Route::get('/upload-file','UploadController@index');
Route::post('/upload-file','UploadController@update');
Route dengan method GET berfungsi untuk menampilkan form awal dan route dengan method POST digunakan untuk melakukan proses upload inputan dari form tadi.
#MEMBUAT CONTROLLER
Kemudian langkah selanjutnya adalah membuat file Controller sesuai dengan route yang terlah dibuat tadi. Di sini nama file tersebut adalah UploadController.php dan berikut ini adalah sebagian kode dari file tersebut :
<?php
namespace App\Http\Controllers;
use App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use Illuminate\Support\Facades\Redirect;
use Validator;
class UploadController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
return view ('index');
}
}
Kode di atas hanyalah sebagian kode dari file controller yang nanti akan kita buat. Fungsi index berfungsi untuk menampilkan view yang akan digunakan sebagai tampilan dari form untuk melakukan upload file tersebut.
#MEMBUAT VIEW
Langkah berikutnya adalah membuat view yang digunakan untuk tampilan form upload. Buatlah sebuah file view dengan nama index.php.blade. Nama file index ini sesuai dengan penamaan file view pada function index di controller sebelumnya.
Berikut ini adalah isi kode dari file index.blade.php tersebut
<!doctype html>
<html lang="en">
<head>
<title>Upload File</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<ul>
@foreach($errors->all() as $error)
<li>{{$error}}</li>
@endforeach
</ul>
{{ Form::open(['method' => 'POST', 'class' => 'form-horizontal', 'files' => true]) }}
<div class="form-group">
<label class="control-label col-sm-3 col-xs-12">File Upload</label>
<div class="col-sm-4 col-xs-10">
<input type="file" name="upload" class="form-control">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit </button>
</div>
{{ Form::close() }}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Contoh kode di atas menggunakan bootstrap 4 dan juga yang perlu diperhatikan adalah di sini saya menggunakan penulisan kode dari plugin Laravel yaitu LaravelCollective. Bagaimana cara menginstall dan menggunakan plugin tersebut akan saya jelaskan pada artikel selanjutnya.
Inti dari kode tersebut adalah membuat sebuah form dengan method POST dan dengan atribut enctype="multipart/form-data". Penulisan kode dengan LaravelCollective dapat dilihat pada contoh kode di atas tadi.
Berikut ini adalah tampilan dari form view tersebut saat anda mengaksesnya melalui browser
#MEMBUAT FUNCTION PROSES UPLOAD
Nah bagian terakhir adalah membuat function untuk proses upload nya sesuai dengan route yang telah kita buat sebelumnya. Di sini kita membuat function update pada file UploadController.php dengan kode sebagai berikut
public function update(Request $request)
{
//
$rules = array(
'upload' => 'required|max:3072'
);
$validator = Validator::make($request->all(), $rules);
if ($validator->fails()) {
return Redirect::to('/upload-file')->withErrors($validator)->withInput($request->all());
}
$files_ext = ['jpg','jpeg','bmp','png','xls','xlsx','doc','docx','pdf','txt'];
$validator = Validator::make($request->all(),[]);
if ($request->hasFile('upload')) {
$file = $request->file('upload');
$ext = $file->getClientOriginalExtension();
if (in_array($ext, $files_ext)){
$file->move('upload', $file->getClientOriginalName());
} else {
$validator->getMessageBag()->add('extension', 'Invalid file extension');
return Redirect::to('/upload-file')
->withErrors($validator)
->withInput();
}
}
return Redirect::to('/upload-file');
}
Untuk validasinya, saya menggunakan validator required dan max di mana required berarti input tersebut wajib diisi dan max digunakan untuk membatasi ukuran file yang diupload (pada contoh di atas sebesar 3Mb). Saya tidak menggunakan validator untuk melakukan pengecekan ekstensi file melainkan menggunakan sebuah array yang berisi daftar ekstensi yang diijinkan.
Dengan menggunakan Validator, maka semua error yang muncul akan tersimpan dalam variabel $errors dan bagaimana cara menampilkan error tersebut pada view dapat dilihat pada potongan kode berikut
<ul>
@foreach($errors->all() as $error)
<li>{{$error}}</li>
@endforeach
</ul>
Kode di atas terdapat pada file view yang kita buat sebelumnya dan berfungsi untuk menampilkan error yang muncul saat proses validasi.
Demikianlah artikel Tutorial Laravel 6.0 - Membuat File Upload ini. Semua kode contoh di atas merupakan contoh sederhana yang dimaksudkan agar mempermudah pemahaman. Anda tentu saja dapat memodifikasi kode di atas agar mempunyai tampilan yang lebih tentu saja lebih baik dari contoh yang saya berikan. Jika ada pertanyaan mengenai tutorial ini, silahkan gunakan kolom komentar di bawah. Terima kasih
Tutorial Laravel 6.0 - Membuat File Upload
Reviewed by Donny Winarto
on
September 21, 2019
Rating:
Reviewed by Donny Winarto
on
September 21, 2019
Rating:
No comments: