In this Bootstrap Tutorial, I will let you know how to upload multiple images using jQuery and Bootstrap Fileinut in Laravel 5.6
There are many ways to upload multiple file on the server but this is an enhancement HTML 5 file input for Bootstrap 3.x with file preview, remove uploaded files and many more.
For this example, I am going to start with routes.
Step 1: Add Routes
In this step, I will have following two routes in routes/web.php file.
Route::get('upload-image','FileController@index');
Route::post('upload-image',['as'=>'image.upload','uses'=>'FileController@uploadImages']);
Step 2: Create File Controller
In this example, I will create a controller "FileController.php" in app/Http/Controllers/ directory.
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class FileController extends Controller { public function index() { return view('file'); } public function uploadImages() { $imgName = request()->file->getClientOriginalName(); request()->file->move(public_path('images'), $imgName); return response()->json(['uploaded' => '/images/'.$imgName]); } }
Don't forget to create a "images" directory inside the public.
Step 3: Create View File
In this step, I will create a file "file.blade.php" inside the resources/views directory.
<!DOCTYPE html> <html lang="en"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center">jQuery, Bootstrap Fileinput Example</h1><br> <div class="form-group"> <div class="file-loading"> <input id="image-file" type="file" name="file" accept="image/*" data-min-file-count="1" multiple> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#image-file").fileinput({ theme: 'fa', uploadUrl: "{{route('image.upload')}}", uploadExtraData: function() { return { _token: "{{ csrf_token() }}", }; }, allowedFileExtensions: ['jpg', 'png', 'gif','jpeg'], overwriteInitial: false, maxFileSize:2048, maxFilesNum: 10 }); </script> </body> </html>
0 comments