Dedikisme's Blog

Ngeblog biar dibilang eksis

Yii2 File Input Widget Kartik

Yii2 Upload File by Kartik

Setelah lama tidak update blog dikarenakan banyak aktifitas jadi mumpung saat ini lagi luang maka update blog. Kali ini saya akan menulis cara menggunakan fitur Upload File dengan ajax upload, delete dan preview for lazy coder. hehe… karena for lazy coder skip saja kalau anda seorang yang rajin dan giat. Disini saya akan coba menjelaskan Upload File dengan menggunakan widget dari kartik yaitu kartik FileInput. Mengapa menggunakan punya abang kartik? ya karena customizable dan banyak juga dokumentasinya. Yuk kita mulai kita awali dengan pasang code repository FileInput pada require composernya dulu kalau pakai boostrap4

1
"yiisoft/yii2-bootstrap4": "@dev"

dan jika kisanak menggukanan boostrap 3 kita hilangkan saja angka ‘4’ pada repositorynya atau jadinya kayak gini

1
"yiisoft/yii2-bootstrap": "@dev"

kemudian composer install atau update pada view kita implementasikan pada field active form kita

jadi kodenya seperti ini:

_form.php
1
2
3
4
5
6
7
8
9
10
11
 <?php
    echo $form->field($model, 'foto_poster')->widget(\kartik\widgets\FileInput::classname(), [
        'options' => ['accept' => 'image/*'],
                'pluginOptions' => [
                    'initialPreview' =>
                    ($model->foto) ? Url::to('@web/', true) . Yii::getAlias('@image_path/') . $model->foto : NULL, //menampilkan preview gambar saat buka halaman
                    'initialPreviewAsData' => true, // untuk menampilkan preview data jika ada pada awal
                    'showUpload' => false, // untuk menampilkan tombol upload
                ]
            ]);
            ?>

pada initialPreview kita cek dahulu apakah $model->foto sudah diisi atau belum, jika sudah terisi kita kasih url dari web kita. Url::to(‘@web/’, true) untuk melakukan url ke folder public kita dan Yii::getAlias(‘@image_path/’) akan menujukkan path image kita dan $model->foto ini berisikan nama file dari foto kita sebelumnya kita buat alias dulu untuk @image_path nya pada file config/aliases.php agar enak untuk dirubah sewaktu – waktu

_form.php
1
Yii::setAlias('@image_path','uploads');

dan jangan lupa untuk memasukkan parameter ‘options’ => [‘enctype’ => ‘multipart/form-data’] pada beginForm kita jadi seperti ini

_form.php
1
2
3
4
5
<?php
$form = ActiveForm::begin([
    'options' => ['enctype' => 'multipart/form-data']
]);
?>

Silahkan dicoba semoga bermanfaat

Comments