Yii2 Tips 20 : Mengupload File Menggunakan Kartik FileInput Widget

Upload file menggunakan kartik fileinput widget :

yii2 tips upload

Langkah 1 : Install Yii2 Extension Kartik FileInput

Langkah 2 : Buat Tabel dan Model

Pada contoh ini, kita akan membuat tabel file dan model File dengan Gii.

Langkah 3 : Persiapkan Controller dan View

Siapkan FileController.php kemudian tambahkan beberapa action sebagai berikut :

1. public function actionIndex : Untuk menampilkan data

2. public function actionCreate : Untuk menampilkan form dan mengupload File

3. public function actionUpdate : Untuk mengupdate File

4. public function actionDelete : Untuk menghapus File

5. public function actionDeleteUpload : Untuk menghapus file di dalam FileInput

Tambahkan function findModel dan jangan lupa untuk use extension yang diperlukan, sehingga FileController.php menjadi seperti ini :

Buat folder baru bernama file di dalam folder views dan tambahkan file-file berikut

1. _form.php

2. create.php

3. index.php

4. update.php

Langkah 4 : Membuat folder untuk menampung File

Buatlah folder untuk menampung file yang diupload. Pada contoh ini file akan disimpan di folder frontend/web/file.

Testing

Kita coba untuk mengupload sebuah file : http://localhost/yii2advanced/frontend/web/index.php?r=file/create

yii2 tips upload

Menu index :

yii2 tips upload

Tekan Update untuk mengganti file dan tekan Delete untuk menghapus file.

Apabila ingin membatasi hanya file gambar saja yang bisa diupload, atau file pdf saja misalnya, maka perlu menambahkan keterangan berikut di options :

Hanya accept file gambar saja :

Hanya accept file pdf saja :

Pada controller terdapat function DeleteUpload. Function ini berguna untuk menghapus file ketika ada di layar FileInput ketika melakukan Update data (tombol trash bin warna merah) :

yii2 tips upload

Untuk dokumentasi Widget FileUpload : http://demos.krajee.com/widget-details/fileinput

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.