Display the uploaded image on Laravel 5.7

Create a file name and move it from the temporary folder to under item. Pass variable of file name from controller to view.
ImageIndexController.php

class ImageIndexController extends Controller
{
    public function index(){
    	return view('imageindex');
    }

    public function store(Request $request){

        $filename = date("YmdHis") . "." . $request->file('image')->guessExtension();
    	$request->file('image')->move(public_path('item'), $filename);
    	return view('imageindex',compact('filename'));
    }
}

If there is a variable in the “If statement”, display it.
imageindex.blade.php

@if(!empty($filename))
      <img src="/item/{{$filename}}">
      @else
      @endif

1. upload the image and put register button

2. Then image is displayed on view page.

Ok, first step is well done.
I think I need to insert a file pass to mysql.

Laravel5.7 upload file with extension

uploaded a file with a controller, but looked no file extension.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image;

class ImageIndexController extends Controller
{
    public function index(){
    	return view('imageindex');
    }

    public function store(Request $request){

    	$request->file('image')->move(public_path('item'));
    	return view('imageindex');
    }
}

How come to fix it?

specify the extension with guessExtension method.
ImageIndexController.php

public function store(Request $request){

        $filename = $request->file('image') . "." . $request->file('image')->guessExtension();
    	$request->file('image')->move(public_path('item'), $filename);
    	return view('imageindex');
    }

/image/index

I got it.

I want to display the uploaded image in view.
Before that, you want to make the file name arbitrary, such as date. It seems to be so easy.

$filename = date("YmdHis") . "." . $request->file('image')->guessExtension();

oh, OK.

Laravel5.7 mime type

Use mime type to specify the extension of the image in laravel.

A full listing of MIME types and their corresponding extensions may be found at the following location:
https://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types

I wonder if this match??

custom request
ImageRequest.php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ImageRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return false;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'image' => 'image|mimes:jpg,jpeg,gif,png',
        ];
    }
    public function messages()
    {
        return [
            'image.required' => '画像以外のファイルが指定されています。画像ファイル(png/jpg/jpeg/gif)を指定して下さい',
        ];
    }
}

Upload image with Laravel5.7

Upload images with Laravel5.7.
Configure routing to save images posted from view.

Route::get('/image/index', 'ImageIndexController@index');
Route::post('/image/index', 'ImageIndexController@store');

imageindex.blade.php

@extends('layouts.image')
@section('title', '画像管理')

@section('breadcrumb')
	@@parent
	<ul class="breadcrumb">
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">ホーム</span>
        </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">画像管理</span>
        </a>
      </li>
    </ul>
@endsection

@section('content')
<h2>画像管理</h2>
      <hr>
      <form action="/image/index" method="POST" enctype="multipart/form-data">
        <div id="drag-drop-area">
         <div class="drag-drop-inside">
          <p class="drag-drop-info">ここにファイルをアップロード</p>
          <p>または</p>
          <!-- <input type="file" value="ファイルを選択" name="image"> -->
          <p class="drag-drop-buttons"><input id="fileInput" type="file" value="ファイルを選択" name="image"></p>
              <!-- <input type="submit" value="送信"> -->
           </div>
          </div>
            

      <div class="button_wrapper remodal-bg">
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>
       </form> 

      <!-- remodal -->
      <div class="remodal" data-remodal-id="modal">
        <button data-remodal-action="close" class="remodal-close"></button>
        <h1>保存しますか</h1>
        <p>
          入力した内容で宜しいでしょうか?
        </p>
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </div>
      <!-- /remodal -->

      <script>
      var fileArea = document.getElementById('drag-drop-area');
      var fileInput = document.getElementById('fileInput');

      fileArea.addEventListener('dragover', function(evt){
        evt.preventDefault();
        fileArea.classList.add('dragover');
      });

      fileArea.addEventListener('dragleave', function(evt){
        evt.preventDefault();
        fileArea.classList.remove('dragover');
      });

      fileArea.addEventListener('drop', function(evt){
        evt.preventDefault();
        fileArea.classList.remove('dragenter');
        var files = evt.dataTransfer.files;
        fileInput.files = files;
      });

      </script>
      
@endsection

Laravel フォーム・確認画面の「戻る」ボタンの処理実装

confirm.blad.php

<div class="button_wrapper remodal-bg">
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>

「戻る」ボタンを追加する。

<div class="button_wrapper remodal-bg">
         <button id="square_btn" onClick="history.back()">戻る</button>
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>

あれ!?onclickのhistory.back()だとエラーになるな。。何故??

やりなおします。
「戻る」ボタンのvalueを”back”として、一度、controllerにpostします。

<div class="button_wrapper remodal-bg">
         <button type="submit" name="action" id="square_btn" value="back">戻る</button>
         <button type="submit" name="action" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>

controllerでbackを受けた場合は、AccountInputControllerにリダイレクトさせます。

public function store(Request $request){

        $action = $request->get('action', 'back');
        $input = $request->except('action');

        if($action == 'back'){
            return redirect()->action('AccountInputController@input')
->withInput($input);
        } else {

        $account = new Account([
        'login_id' => $request->get('login_id'),
        hogehoge // 省略
        ]);
        $account->save();
        return view('account');

        }

    	
    }

これだと値が保持されたまま、入力画面に戻ります^^
うむ、なかなか簡単には行かせてくれないな。

### Laravelの学習になぞっておきたい本

laravel5.7のバリデーションで複数条件を設定する

required以外のバリデーションを追加したい。
ログインIDは半角英数字
メールアドレス: 半角英数字、@

$validatedData = $request->validate([
        'title' => 'required|unique:posts|max:255',
        'body' => 'required',
    ]);

requiredのほかに、unique:posts, max:255などがあります。
bail:最初のバリデーションに失敗したら、残りのバリデーションルールの判定を停止

埒が明かないので、公式サイトをみます。
validation

色々ありますね。正規表現があるなら、全部それでよさそうではあります。

半角英数字っぽいのは二つあります。

alpha_dash
フィールドが全部アルファベット文字と数字、ダッシュ(-)、下線(_)であることをバリデートします。

alpha_num
フィールドが全部アルファベット文字と数字であることをバリデートします。

ログインidなので、ダッシュ、下線が入る可能性があるので、alpha_dashでしょうか?

mailアドレスは[email]というメソッドがありました。ほう。

email
フィールドがメールアドレスとして正しいことをバリデートします

では、カスタムバリエーションを編集していきます。

public function rules()
    {
        return [
            'login_id' => 'required|alpha_dash',
        ];
    }
    public function messages()
    {
        return [
            'login_id.required' => 'ログインIDを入力してください',
            'login_id.alpha_dash' => '半角英数字、数字、ダッシュ(-)、下線(_)いずれかで作成してください',

        ];
    }

あれ、上手くいかない。何故だ?
alpha_dashが日本語でも通してしまう!!!!!!!!!!!!!!
なにいいいいいい?

ということで変更します。

'login_id' => 'required|regex:/^[a-zA-Z0-9-]+$/',

おおおおおおおおおおおおお sugeeeeeeeeeeee

emailもついでに

'mail_address' => 'required|email',

OKOK

Larave5.7フォームリクエストのメッセージ設定

フォームリクエストとはなにか?公式のフォームリクエスト作成を見てみましょう。
https://readouble.com/laravel/5.7/ja/validation.html
フォームリクエストはバリデーションロジックを含んだカスタムリクエストクラス。フォームリクエストクラスを作成するには、make:request Artisan CLIコマンドを使用する。
生成されたクラスは、app/Http/Request ディレクトリへ設置される。

ふーん

とりあえず、やってみましょう。

1. make:requestでフォームリクエストクラスを作成
CompanyRequestを作ってみたいと思います。

[vagrant@localhost zeus]$ php artisan make:request CompanyRequest
Request created successfully.

app/Http のディレクトリに、Reqeust/CompanyReqeust.phpが生成されているのがわかります。

ファイルの中身を見てみると、authorizeとrulesメソッドが作られています。

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class CompanyRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return false;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            //
        ];
    }
}

2.生成されたクラス内のrules()の中身を編集
バリデーションを記述します。

public function rules()
    {
        return [
            'company_name' => 'required',
            'agent_name' => 'required',
        ];
    }

3.コントローラーでフォームリクエストを呼び込む
use App\Http\Requests\CompanyRequest; を追加
public function confirm(Request $request) を、public function confirm(CompanyRequest $request)に変更する

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Company;
use App\Agent_mst;
use App\Http\Requests\CompanyRequest;

class CompanyConfirmController extends Controller
{
    public function confirm(CompanyRequest $request){
    	// $validatedData = $request->validate([
     //        'company_name' => 'required',
     //        'agent_name' => 'required',
     //    ]);
    	$confirm = new Company($request->all());

    	return view('companyconfirm', compact('confirm'));
    }
}

フォームリクエスト側でバリデーションができるようになりました。

やったーーーー^^

laravel5.7のカスタムバリデーションでエラーメッセージを出す

まず公式ドキュメントのバリデーションを見てみましょう。
https://readouble.com/laravel/5.7/ja/validation.html

*.blade.phpを作ります。

@extends('layouts.account')
@section('title', '原稿管理会社登録')

@section('breadcrumb')
	@@parent
	<ul class="breadcrumb">
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">ホーム</span>
        </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" >
        <a href="/top" itemprop="url">
          <span itemprop="title">原稿管理会社登録</span>
        </a>
      </li>
    </ul>
@endsection

@section('content')
<h2>原稿管理会社登録</h2>
      <hr>
      <form action="/company/confirm" method="post" id="form1">
      <table id="tbl">
        @csrf        
        <tr>
          <th>会社名</th><td><input type="text" name="company_name" size="40"  value="{{ old('company_name') }}">{{$errors->first('company_name')}}</td>
        </tr>
        <tr>
          <th>代理店</th><td><input type="text" name="agent_name" size="40"  value="{{ old('agent_name') }}">{{$errors->first('agent_name')}}</td>
        </tr>
      </table>      

      <div class="button_wrapper remodal-bg">
         <button type="submit" value="送信" id="square_btn" onClick="location.href='#modal'">登録</button>
      </div>
      </form>

      <!-- remodal -->
      <div class="remodal" data-remodal-id="modal">
        <button data-remodal-action="close" class="remodal-close"></button>
        <h1>登録しますか</h1>
        <p>
          入力した内容で宜しいでしょうか?
        </p>
        <br>
        <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
      </div>
@endsection

で、どうするか?
→ フォームリクエストを使う。

Laravel5.7 でバリデーションメッセージを表示する

Laravel5.7 でバリデーションメッセージを表示したいと思います。

Controllerの編集
まずformの確認画面のcontrollerで、送られてきたリクエストに対し、’required’として入力必須にします。

class CompanyConfirmController extends Controller
{
    public function confirm(Request $request){
    	$validatedData = $request->validate([
            'company_name' => 'required',
            'agent_name' => 'required',
        ]);
    	$confirm = new Company($request->all());

    	return view('companyconfirm', compact('confirm'));
    }
}

View(*.blade.php)の編集
デフォルトのメッセージを表示させます。

<span>{{$errors->first('company_name')}}</span>
<span>{{$errors->first('agent_name')}}</span>

特にメッセージをカスタマイズしなければ、英語のメッセージが表示されます。
これでもいいような気はします。

Laravel5.7 バリデーションエラー表示

まず公式を見ます。
https://readouble.com/laravel/5.7/ja/validation.html

リクエストの入力が指定したバリデーションルールに当てはまらなかった場合はどうなるか?
→自動的にユーザを以前のページへリダイレクトする。加えて、バリデーションエラーは自動的にフラッシュデータとしてセッションへ保存される。

ん?フラッシュデータって何?
>セッションにアイテムを保存したいことは良くあります。flashメソッドを使ってください。flashメソッドは直後のHTTPリクエストの間だけセッションにデータを保存します。それ以降は削除されます

なるほど、セッションに保持されるデータのことね。$errors変数はIlluminate\Support\MessageBagのインスタンス

う、う、急激に眠くなってきた。

続けて、エラー表示の例
$errors->all()で表示しています。

<h1>ポスト作成</h1>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif