月別アーカイブ: 2019年8月

summernoteで画像をアップロード

summernoteで画像をアップロードする方法を調べてみたが情報が古く自分で実装したのでまとめ。
画像をアップロードしたらエディタに画像を反映させるところまで解説します。

環境
summernote v0.8.12
XAMPP
PHP 7.3

読み込むファイル

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="summernote-master/dist/summernote.css" rel="stylesheet">
<script src="summernote-master/dist/summernote.min.js"></script>
<script src="summernote-master/dist/lang/summernote-ja-JP.js"></script>

<form method="post" enctype="multipart/form-data" action="">
  <textarea id="summernote" name="editordata"></textarea>
<input type="submit" name="send" value="送信する">

bootstrapはCDNでsummernoteは日本語で読み込んでいます。

画像ファイルのアップロード部

$(document).ready(function() {
    $('#summernote').summernote({
      lang: 'ja-JP',
        height: 200,
        callbacks: {
            onImageUpload: function(files) {
                sendFile(files[0]);
            },
        }
    });
});

function sendFile(file) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: "upimg.php",
        cache: false,
        contentType: false,
        processData: false,
    }).done(function(data, textStatus, jqXHR){
        $('#summernote').summernote('insertImage', 'http://localhost/develop.git/img/' + file.name);
    });
}

sendFileに渡すデータはfileだけなのとsummernoteで画像をアップしたらエディタに反映させるのはinsertImageで画像URLを指定しています。
その他は先人の知恵をお借りしました。

upimg.php

    move_uploaded_file($_FILES['file']['tmp_name'], "img/". $_FILES['file']['name']);

画像をアップしているだけなので
ファイル名が重複しないようしたりリサイズなどはこのファイルでするようにしましょう。

Laravel ミドルウェアで独自のログイン機能を実装する

Laravelで二段階認証とか既存のAuthを使わずにミドルウェアでいろいろやったのでまとめ。

環境
Laravel:5.5 LTS

独自のAuthクラスを作成

app/Http/Middleware/Auth.php

<?php

namespace App\Http\Middleware;

use Illuminate\Support\Facades\Redirect;
use Closure;

class Auth
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (!session()->has('loginFlg')) {
            return redirect('admin/login');
        }
        return $next($request);
    }
}

セッションのログインフラグが立ってなかったらログイン画面へリダイレクト。

自作したAuthクラスをルートへ登録

app/Http/kernel.php

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
//        'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth' => \App\Http\Middleware\Auth::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    ];

既存のAuthと名前が被るのでコメントアウトして追加

ルートに対しミドルウェアを指定

routes/web.php

Route::group(['middleware' => ['auth']], function () {
    Route::get('admin/my', 'Admin\MyController@index')
    Route::get('/', function () {
        return view('welcome');
    });
});

管理画面はログインフラグが立ってないとログイン画面にリダイレクトさせたいので管理画面のルートはgroup内に追加していく。
welcomeはログインフラグが立ってない場合ログイン画面にリダイレクトするかのテスト。
myページとwelcomeページにアクセスしてログインフラグが立っていないときちんとリダイレクトしたのでこの書き方でまとめて記載していく。