kartik-v/bootstrap-fileinput;The extension is not showing an control to upload neither the chosen photo

Yii 2.0 Extensions
1

hello; I follow everything that is said in the implementation article but when the form is being loaded it is not showing preview area and the chosen image . I don’t know how to attach an image file to show you what is happening but here is what I did:

In the Controller:


    public function actionProfilephoto($user_id,$titre=null){


 $model = \Yii::createObject(Profile::className());

 $model->scenario='photo';

 if(\Yii::$app->request->post() && $titre==null){

     $model=\Yii::$app->request->post('uploadExtraData')['user_id'];

     $model->photo = UploadedFile::getInstance($model, 'photo');

     \Yii::$app->response->format = Response::FORMAT_JSON;

     if($model->validate()){

        $reponses[]= $model->upload();

          if($reponses['error']==true){

             $reponse['error']=\Yii::t('app','An error occurs while uploading,Try again.') . ' ' . $reponses['erreur'] ; 

          }

     }else{

         $reponse['error']=\Yii::t('app','An error occurs while uploading,Try again.') . ' ' . implode(' ',$model->errors) ; 

     }

      $reponse['initialPreview'] = '<img src="'. \Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]) .'" class="file-preview-image" alt="" title="Desert">';

      $reponse['initialPreviewConfig']=['caption'=>\Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]),

                'width'=>'90px','url'=>\Yii::$app->urlManager->createUrl(['utilisateur/deletephoto'])];

      echo json_encode($reponse);

        \Yii::$app->end();

 }

In the view:





   <div id="partiechargee" class="panel panel-default center-block">

            <?php if($titre==true){

             echo '<p class="well-sm">';

           $this->render('/_alert', ['module' => $module,]);

            echo '</p>';}?>

            

            <h3 class="panel-title panel-heading text-center" style="margin-bottom:5px;"><strong><?= Html::encode($this->title)?></strong></h3>

<?php $form = ActiveForm::begin([

                     'id'=> 'profile-form',

                    'enableAjaxValidation'   => true,

                    'enableClientValidation' => false

                ,'options'=>['class'=>'well-sm',

                    'enctype'=>'multipart/form-data']]); ?>

<?=FileInput::widget([

    'name' => 'photo',

    'language'=>\Yii::$app->language,

    'pluginOptions' => [

        'uploadUrl'=>\Yii::$app->urlManager->createUrl(['settings/profilephoto']),

        'initialPreview'=> ['<img src="'. \Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]) .'" class="file-preview-image" alt="" title="Desert">'],

        'initialPreviewConfig'=> ['caption'=>\Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]),

                    'width'=>'90px',

        'url'=>\Yii::$app->urlManager->createUrl(['settings/deletephoto']),

        ],

        'uploadExtraData'=>['user_id'=>$model->user_id],

        'image'=>['width'=>'90px','height'=>'90px'],

        'allowedPreviewTypes'=>['image'],

        'allowedFileExtensions'=>['gif','png','jpeg','jpg'],

        'allowedFileTypes'=>['image'],

        'maxFileSize'=>'3072',

        'maxFileCount'=>'1',

        'validateInitialCount'=>true,

        'resizeImage'=>true,

        'maxImageWidth'=> 90,

        'maxImageHeight'=>90,

        'resizePreference'=>'width',

        'browseClass' => 'btn btn-success',

        'uploadClass' => 'btn btn-info',

        'removeClass' => 'btn btn-danger',

        'uploadIcon'=>'<i class="glyphicon glyphicon-upload"></i> ',

        'removeIcon' => '<i class="glyphicon glyphicon-trash"></i> ',

        'browseIcon' => '<i class="glyphicon glyphicon-camera"></i> ',

        'browseLabel' =>  \Yii::t('app','Select Photo')

    ],

    'options' => ['accept' => 'image/*']

]);

?></div>

The attached file is how the control is being displayed.

2

Please I need help I am stack with this code; What I am doing wrong so that it doesn’t show the controle properly when I am calling it via layout but alone occupying the wall page and showing? The picture attached is when I don’t load the view via layout.

3

[color="#006400"]/* moved to Extensions */[/color]

4

Thanks!

5

I follow everything that is said in the implementation article but when the form is being loaded it is not showing preview area and the chosen image but when the view that contain the widget is not rendered in main layout(rendered alone) It showing the control but very big,images are attached).here is what I did:

In the Controller:


     public function actionProfilephoto($user_id,$titre=null){


     $model = \Yii::createObject(Profile::className());

     $model->scenario='photo';

     if(\Yii::$app->request->post() && $titre==null){

         $model=\Yii::$app->request->post('uploadExtraData')['user_id'];

         $model->photo = UploadedFile::getInstance($model, 'photo');

         \Yii::$app->response->format = Response::FORMAT_JSON;

         if($model->validate()){

            $reponses[]= $model->upload();

              if($reponses['error']==true){

                 $reponse['error']=\Yii::t('app','An error occurs while uploading,Try again.') . ' ' . $reponses['erreur'] ; 

              }

         }else{

             $reponse['error']=\Yii::t('app','An error occurs while uploading,Try again.') . ' ' . implode(' ',$model->errors) ; 

         }

          $reponse['initialPreview'] = '<img src="'. \Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]) .'" class="file-preview-image" alt="" title="Desert">';

          $reponse['initialPreviewConfig']=['caption'=>\Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]),

                    'width'=>'90px','url'=>\Yii::$app->urlManager->createUrl(['utilisateur/deletephoto'])];

          echo json_encode($reponse);

            \Yii::$app->end();

     }

    return $this->render('profilephoto',array('model'=>$model,'titre'=>false,'ajax'=>false));

}

In view


 <div id="okp" class="panel panel-default center-block">

                <?php if($titre==true){

                 echo '<p class="well-sm">';

               $this->render('/_alert', ['module' => $module,]);

                echo '</p>';}?>

                

                <h3 class="panel-title panel-heading text-center" style="margin-bottom:5px;"><strong><?= Html::encode($this->title)?></strong></h3>

    <?php $form = ActiveForm::begin([

                         'id'=> 'profile-form',

                        'enableAjaxValidation'   => true,

                        'enableClientValidation' => false

                    ,'options'=>['class'=>'well-sm',

                        'enctype'=>'multipart/form-data']]); ?>

    <?=FileInput::widget([

        'name' => 'photo',

        'language'=>\Yii::$app->language,

        'pluginOptions' => [

            'uploadUrl'=>\Yii::$app->urlManager->createUrl(['settings/profilephoto']),

            'initialPreview'=> ['<img src="'. \Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]) .'" class="file-preview-image" alt="" title="Desert">'],

            'initialPreviewConfig'=> ['caption'=>\Yii::$app->urlManager->createUrl(['@webroot/media/utilisateurs/'. $model->lienphoto]),

                        'width'=>'90px',

            'url'=>\Yii::$app->urlManager->createUrl(['settings/deletephoto']),

            ],

            'uploadExtraData'=>['user_id'=>$model->user_id],

            'image'=>['width'=>'90px','height'=>'90px'],

            'allowedPreviewTypes'=>['image'],

            'allowedFileExtensions'=>['gif','png','jpeg','jpg'],

            'allowedFileTypes'=>['image'],

            'maxFileSize'=>'3072',

            'maxFileCount'=>'1',

            'validateInitialCount'=>true,

            'resizeImage'=>true,

            'maxImageWidth'=> 90,

            'maxImageHeight'=>90,

            'resizePreference'=>'width',

            'browseClass' => 'btn btn-success',

            'uploadClass' => 'btn btn-info',

            'removeClass' => 'btn btn-danger',

            'uploadIcon'=>'<i class="glyphicon glyphicon-upload"></i> ',

            'removeIcon' => '<i class="glyphicon glyphicon-trash"></i> ',

            'browseIcon' => '<i class="glyphicon glyphicon-camera"></i> ',

            'browseLabel' =>  \Yii::t('app','Select Photo')

        ],

        'options' => ['accept' => 'image/*']

    ]);

    ?></div>

Attached are the images how it is being rendered. I really don’t know what’s wrong.

6

Your life will be so much easier if you actually did what the tutorial and the guide says about CUploadedFile.

You are doing something different, and you better have a good reason for breaking the rules.

Only break them when you know how the rules work.

That CUploadedFile probably goes out of scope when you pass it to the model::upload function.

Why not do as the TutsPlus article and the Yii 2 Guide section does?

At least for starters.

CUploadedFile needs to be saved, before you are doing anything with the model.

When the file has been saved, you tell your model how the file was saved, validate and save.

Saving the file and saving the model are two separate ‘things’.

And do everything in that one action.