Make New Idea: Upload multiple images in Laravel 5.6

Are you using Laravel? Do you want to upload multi images in Laravel? There are multi way and code to upload images with Laravel. On this article, I would like to show you how to upload multi images using bootstrap fileinput plugin on Laravel 5.6 application. You can do on this style such as upload multi images, zoom images, and remove images by using bootstrap fileinput plugin. One more thing, you can customize font size too. What is bootstrap fileinput? Bootstrap fileinput is a bootstrap plugin. Advantage of bootstrap file is upload multi images and dropzone.

Step 1: please download style and script from this path Style and Script

step 2: copy into public folder or you can upload it into your hosting. On this, I will show you style upload to hosting.

public folder

into your hosting

Step 3: create blade PHP file

You need to create blade file on path “resource/view/uploadmulti.blade.php”

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .main-section{
            margin:0 auto;
            padding: 25px;
            margin-top: 80px;
            background-color: #fff;
            box-shadow: 0px 0px 25px #c1c1c1;
        }
        .fileinput-remove,
        .fileinput-upload{
            display: none;
        }
    </style>
</head>
<body class="bg-danger">
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-sm-12 col-11 main-section">
            <h1 class="text-center text-danger">upload Multi image</h1><br>

            {!! csrf_field() !!}
            <div class="form-group">
                <div class="file-loading">
                    <input id="file-1" type="file" name="fileimg" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                </div>
            </div>

        </div>
    </div>
</div>
<script src="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/jquery-3.2.1.min.js"></script>
<script src="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/fileinput.js" type="text/javascript"></script>
<script src="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/theme.js" type="text/javascript"></script>
<script src="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/umd/popper.min.js" type="text/javascript"></script>
<script src="http://www.dada.com.kh/DaWebsit/syleAndJSuploadImg/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $("#file-1").fileinput({
        theme: 'fa',
        uploadUrl: "/uploadImg",
        uploadExtraData: function() {
            return {
                _token: $("input[name='_token']").val(),
            };
        },
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize:2000,
        maxFilesNum: 5,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
</script>

</body>
</html>

Step 4: create Routes on path “Routes/Web.php”

Route::get('uploadImg,'ImageController@index');
Route::post('uploadImg','ImageController@store');

Step 5: create controller “app/http/controllers/ImageController.php”

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('uploadImg');
}

/**
* success response method.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
    $imageName = request()->fileimg->getClientOriginalName();
    request()->fileimg->move(public_path('upload'), $imageName);
    return response()->json(['uploaded' => '/upload/'.$imageName]);
}
}

Make New Idea

Pages

Wednesday, April 17, 2019

Upload multiple images in Laravel 5.6

No comments:

Post a Comment