{"id":309,"date":"2016-05-19T12:39:34","date_gmt":"2016-05-19T11:39:34","guid":{"rendered":"http:\/\/blog.bellanca-web.com\/?p=309"},"modified":"2016-05-19T21:18:36","modified_gmt":"2016-05-19T20:18:36","slug":"upload-dune-image","status":"publish","type":"post","link":"https:\/\/blog.bellanca-web.com\/?p=309","title":{"rendered":"Upload d’une image"},"content":{"rendered":"

Introduction<\/h1>\n

Ce petit tutoriel explique comment sauvegarder un fichier \u00ab\u00a0image\u00a0\u00bb avec Yii 2.<\/p>\n

Mod\u00e8le de base<\/h1>\n

Le mod\u00e8le de base sur lequel sont bas\u00e9 les op\u00e9rations pr\u00e9sent\u00e9es ci-dessous est le suivant :<\/p>\n

\"mdl\"<\/p>\n

Dans ce tutoriel, nous allons nous concentrer uniquement sur la classe\/table Site<\/strong> qui contient une image (logo du site).<\/p>\n

Pr\u00e9requis<\/h1>\n

Avoir cr\u00e9\u00e9 le CRUD des deux mod\u00e8les \u00e0 l’aide de Gii.<\/p>\n

Op\u00e9rations \u00e0 effectuer<\/h1>\n

Mod\u00e8le<\/h2>\n

Pour commencer, il faut modifier le mod\u00e8le Site afin d’y ajouter la variable $image et des r\u00e8gles concernant l’image.<\/p>\n

# modeles\/Site.php<\/p>\n

class Site extends \\yii\\db\\ActiveRecord\r\n{\r\n    public $image;<\/pre>\n
les r\u00e8gles :<\/p>\n
# models\/Site.php::rules()<\/p>\n
\/\/ Other rules\r\n[['image'], 'file', 'skipOnEmpty' => true,\r\n\u00a0\u00a0\u00a0 'maxSize' => 102400, 'extensions' => 'jpg, jpeg, png',\r\n\u00a0\u00a0\u00a0 'tooBig' => 'L\\'image ne peut pas \u00eatre plus grande que 100 Ko.',\r\n\u00a0\u00a0\u00a0 'wrongExtension' => 'L\\'image doit \u00eatre au format JPG ou PNG.',\r\n\u00a0\u00a0\u00a0 'on' => 'register'],\r\n[['image'], 'file', 'skipOnEmpty' => false,\r\n\u00a0\u00a0\u00a0 'maxSize' => 102400, 'extensions' => 'jpg, jpeg, png',\r\n\u00a0\u00a0\u00a0 'tooBig' => 'L\\'image ne peut pas \u00eatre plus grande que 100 Ko.',\r\n\u00a0\u00a0\u00a0 'wrongExtension' => 'L\\'image doit \u00eatre au format JPG ou PNG.',\r\n\u00a0\u00a0\u00a0 'on' => 'update']<\/pre>\n
Dans cet exemple, l’image doit \u00eatre de type jpg, jpeg ou png et ne doit pas \u00eatre plus grande que 100 octets.<\/p>\n
Form<\/h2>\n
Nous devons ensuite modifier le formulaire afin de permettre la s\u00e9lection de l’image. Nous en profiterons pour \u00e9purer l’affichage du formulaire des donn\u00e9es techniques de l’image (type et taille).<\/p>\n
Il faut que le formulaire ait l’option enctype<\/strong> de type multipart\/form-data<\/strong>.<\/p>\n
use yii\\widgets\\ActiveForm;\r\n$form = ActiveForm::begin(\r\n  [\r\n    'enableAjaxValidation' => false,\r\n    'options' => ['enctype' => 'multipart\/form-data'],\r\n  ]\r\n);<\/pre>\n
Ensuite, il faut supprimer les lignes suivantes car ces champs seront renseign\u00e9s par le controller\u00a0 :<\/p>\n
    <?= $form->field($model, 'image_name')->textInput(['maxlength' => true]) ?>\r\n\r\n    <?= $form->field($model, 'image_type')->textInput(['maxlength' => true]) ?>\r\n\r\n    <?= $form->field($model, 'image_size')->textInput() ?><\/pre>\n
Puis, il faut ajouter le champs \u00ab\u00a0fichier\u00a0\u00bb d’upload de l’image :<\/p>\n
<?= $form->field($model, 'image')->fileInput() ?><\/pre>\n
Controller<\/h2>\n
Finalement, nous allons voir comment r\u00e9cup\u00e9rer et sauvegarder l’image. Pour ce faire, il faut modifier le controller controllers\/SiteController.php<\/strong>.<\/p>\n
Create<\/h3>\n
Nous allons commencer par modifier l’action actionCreate. Son \u00e9tat de base est le suivant :<\/p>\n
public function actionCreate()\r\n{\r\n    $model = new Site();\r\n\r\n    if ($model->load(Yii::$app->request->post()) && $model->save()) {\r\n        return $this->redirect(['view', 'id' => $model->id]);\r\n    } else {\r\n        return $this->render('create', [\r\n            'model' => $model,\r\n        ]);\r\n    }\r\n}<\/pre>\n
Il faut la modifier comme suite :<\/p>\n
public function actionCreate()\r\n{\r\n    $model = new Site();\r\n\r\n\u00a0\u00a0\u00a0 if (Yii::$app->request->isPost) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->load(Yii::$app->request->post());\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image = UploadedFile::getInstance($model, 'image');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if($model->image !== null){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image_name = $model->mnemo . '.' . $model->image->extension;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image_type = $model->image->type;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image_size = $model->image->size;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if ($model->save()) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if($model->image !== null){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image->saveAs('chemin\/vers\/destination');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n            return $this->redirect(['view','id' => $model->id]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 return $this->render('create', ['model' => $model]);\r\n}<\/pre>\n
Il faut \u00e9galement ajouter en d\u00e9but de document le namespace pour pouvoir utiliser le helper du m\u00eame nom :<\/p>\n
use yii\\web\\UploadedFile;<\/pre>\n
Update<\/h3>\n
Les modifications \u00e0 apporter \u00e0 l’action Update sont tr\u00e8s similaire \u00e0 l’action Create.<\/p>\n
L’action sans modification est la suivante :<\/p>\n
public function actionUpdate($id)\r\n{\r\n    $model = $this->findModel($id);\r\n\r\n    if ($model->load(Yii::$app->request->post()) && $model->save()) {\r\n        return $this->redirect(['view', 'id' => $model->id]);\r\n    } else {\r\n        return $this->render('update', [\r\n            'model' => $model,\r\n        ]);\r\n    }\r\n}<\/pre>\n
Nous la modifions comme suite :<\/p>\n
public function actionUpdate($id)\r\n{\r\n    $model = $this->findModel($id);\r\n\r\n    if (Yii::$app->request->isPost) {\r\n        $model->load(Yii::$app->request->post());\r\n        $upload = UploadedFile::getInstance($model, 'image');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if($upload !== null){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image_name = $model->mnemo . '.' . $upload->extension;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image_type = $upload->type;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $model->image_size = $upload->size;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n        if ($model->save()) {\r\n            if($upload !== null){\r\n                $model->image = $upload;\r\n\r\n                $model->image->saveAs('chemin\/vers\/destination');\r\n            }\r\n            return $this->redirect(['view','id' => $model->id]);\r\n        }    \r\n    }\r\n    return $this->render('update', ['model' => $model]);       \r\n}<\/pre>\n
Delete<\/h3>\n
Il ne faut pas oublier de supprimer le fichier lors du lancement de l’action Delete. Pour ce faire, nous utilisons la fonction unlink<\/strong> de PHP.<\/p>\n
Action d’origine :<\/p>\n
public function actionDelete($id)\r\n{\r\n    $this->findModel($id)->delete();\r\n\r\n    return $this->redirect(['index']);\r\n}<\/pre>\n
Action modifi\u00e9e :<\/p>\n
public function actionDelete($id)\r\n{\r\n    $model = $this->findModel($id);\r\n    $filename = $model->image_name;\r\n        \r\n    $model->delete();\r\n        \r\n    unlink('chemin\/vers\/destination' . $filename);\r\n\r\n    return $this->redirect(['index']);\r\n}<\/pre>\n
Remarques<\/h1>\n
Dans ce tutoriel, nous n’avons pas abord\u00e9 plusieurs aspect qu’il est important de traiter dans un projet r\u00e9el :<\/p>\n