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