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