Laravel 6 Image Upload Tutorial Example From Scratch

Image Upload in laravel 6 Tutorial From Scratch. Today In this tutorial, we will learn how to upload image or file in laravel 6 application step by step simple and easy way. We will upload image with live preview and validate file or image type in laravel app. we will also validate image with laravel validator and store the image to database and folder.

In this tutorial, We will tell you each things about image upload in laravel app. Just follow few steps and upload image in folder laravel app .

Laravel Image Upload Tutorial

Contents

Install Laravel App
Make Route
Create Controller & Methods
Create Blade View
Make Folder
Start Development Server
Conclusion

Install Laravel 6 App

Before get started we must have a laravel setup ready. If you don’t know how to setup laravel project click here

Make Route

We will create two routes in web.php file. Go to app/routes/web.php file and create two below routes here :

 Route::get('image', '[email protected]');
Route::get('save', '[email protected]');

Create Controller

We need to create a controller name ImageController. Use the below command and create Controller :

php artisan make:controller ImageController

After successfully create controller go to app/controllers/ImageController.php and put the below code :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator,Redirect,Response,File;

class ImageController extends Controller
{

    public function index()
    {
        return view('image');
    }

    public function save()
    {
       request()->validate([
            'fileUpload' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
       ]);
       if ($files = $request->file('fileUpload')) {
           $destinationPath = 'public/image/'; // upload path
           $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
           $files->move($destinationPath, $profileImage);
        }
        return Redirect::to("image")
        ->withSuccess('Great! Image has been successfully uploaded.');

    }
}

Create Blade view

In this step we need to create blade view file. Go to app/resources/views and create one file name image.blade.php :

<html lang="en" class="">
<head>
<meta charset="UTF-8">
<title>Laravel Image Upload Tutorial Example From Scratch</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
    <br><br><br>
    @if ($message = Session::get('success'))
    
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{{ $message }}</strong>
    </div>
    <br>
    @endif
    <h2>File Upload &amp; Image Preview</h2>
    <p class="lead">No Plugins <b>Just Javascript</b></p>
    <!-- Upload  -->
    <form id="file-upload-form" class="uploader" action="{{url('save')}}" method="post" accept-charset="utf-8" enctype="multipart/form-data">
        @csrf
        <input id="file-upload" type="file" name="fileUpload" accept="image/*" onchange="readURL(this);">
        <label for="file-upload" id="file-drag">
            <img id="file-image" src="#" alt="Preview" class="hidden">
            <div id="start" >
                <i class="fa fa-download" aria-hidden="true"></i>
                <div>Select a file or drag here</div>
                <div id="notimage" class="hidden">Please select an image</div>
                <span id="file-upload-btn" class="btn btn-primary">Select a file</span>
                <br>
                <span class="text-danger">{{ $errors->first('fileUpload') }}</span>
            </div>
            <button type="submit" class="btn btn-success">Submit</button>
        </label>
    </form>
</body>
</html>
Put css on image.blade.php in head section
    <style class="">
    @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
    @import url("https://fonts.googleapis.com/css?family=Roboto");
    html, body, * {
    box-sizing: border-box;
    font-size: 16px;
    }
    html, body {
    height: 100%;
    text-align: center;
    }
    body {
    padding: 2rem;
    background: #f8f8f8;
    }
    h2 {
    font-family: "Roboto", sans-serif;
    font-size: 26px;
    line-height: 1;
    color: #454cad;
    margin-bottom: 0;
    }
    p {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    color: #5f6982;
    }
    .uploader {
    display: block;
    clear: both;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    }
    .uploader label {
    float: left;
    clear: both;
    width: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    border-radius: 7px;
    border: 3px solid #eee;
    transition: all .2s ease;
    user-select: none;
    }
    .uploader label:hover {
    border-color: #454cad;
    }
    .uploader label.hover {
    border: 3px solid #454cad;
    box-shadow: inset 0 0 0 6px #eee;
    }
    .uploader label.hover #start i.fa {
    transform: scale(0.8);
    opacity: 0.3;
    }
    .uploader #start {
    float: left;
    clear: both;
    width: 100%;
    }
    .uploader #start.hidden {
    display: none;
    }
    .uploader #start i.fa {
    font-size: 50px;
    margin-bottom: 1rem;
    transition: all .2s ease-in-out;
    }
    .uploader #response {
    float: left;
    clear: both;
    width: 100%;
    }
    .uploader #response.hidden {
    display: none;
    }
    .uploader #response #messages {
    margin-bottom: .5rem;
    }
    .uploader #file-image {
    display: inline;
    margin: 0 auto .5rem auto;
    width: auto;
    height: auto;
    max-width: 180px;
    }
    .uploader #file-image.hidden {
    display: none;
    }
    .uploader #notimage {
    display: block;
    float: left;
    clear: both;
    width: 100%;
    }
    .uploader #notimage.hidden {
    display: none;
    }
    .uploader progress,
    .uploader .progress {
    display: inline;
    clear: both;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    height: 8px;
    border: 0;
    border-radius: 4px;
    background-color: #eee;
    overflow: hidden;
    }
    .uploader .progress[value]::-webkit-progress-bar {
    border-radius: 4px;
    background-color: #eee;
    }
    .uploader .progress[value]::-webkit-progress-value {
    background: linear-gradient(to right, #393f90 0%, #454cad 50%);
    border-radius: 4px;
    }
    .uploader .progress[value]::-moz-progress-bar {
    background: linear-gradient(to right, #393f90 0%, #454cad 50%);
    border-radius: 4px;
    }
    .uploader input[type="file"] {
    display: none;
    }
    .uploader div {
    margin: 0 0 .5rem 0;
    color: #5f6982;
    }
    .uploader .btn {
    display: inline-block;
    margin: .5rem .5rem 1rem .5rem;
    clear: both;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: initial;
    border: none;
    border-radius: .2rem;
    outline: none;
    padding: 0 1rem;
    height: 36px;
    line-height: 36px;
    color: #fff;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    background: #454cad;
    border-color: #454cad;
    cursor: pointer;
    }
    .text-danger{
      color: red;
    }
    </style>
Put the script on image.blade.php after closing of body tag
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   </div>
    <script>
      function readURL(input, id) {
        id = id || '#file-image';
        if (input.files &amp;&amp; input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $(id).attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
            $('#file-image').removeClass('hidden');
            $('#start').hide();
        }
     }
    </script> 

Start Development Server

We need to start development server. Use the php artisan serve command and start your server :

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

 http://localhost:8000/image

Conclusion

In this tutorial , We have successfully image upload in folder our laravel application. We uploaded the image in database and folder with live preview our examples run quickly.

If you have found this article useful, share this article with your friends and leave comment if you have any question or thoughts. Your responses are highly appreciated.

One Comment

  1. sirgliofrei said:

    Whats Going down i am new to this, I stumbled upon this I have found It absolutely helpful and it has aided me out loads. I hope to give a contribution & aid other customers like its aided me. Good job.

    October 10, 2019
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *