We can upload images in laravel without showing the preview. But it is good practice to show a preview so that users can understand what they are going to upload. So in this tutorial, I will show you laravel 10 image upload with preview.
I will use vanilla js, not jQuery to show a preview and then we will store the image in the storage folder. So you will learn image upload and reset with preview in laravel from this tutorial. See the preview how to preview image before upload from below:
Step 1: Download Fresh Laravel
In this first step, we need a fresh Laravel 10 application for the laravel 10 image upload with preview. So download it by the below command:
composer create-project laravel/laravel example-app
Step 2: Create Migration
We are going to use the User model. Now update by adding an image uploading system which means an image column to the users table like below:
database/migrations
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->string('password');
$table->string('image')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
};
And now update the model like:
app/Models/User.php
<?php
namespace App\Models;
use Laravel\Sanctum\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable implements MustVerifyEmail
{
use HasApiTokens, HasFactory, Notifiable;
protected $fillable = [
'name',
'email',
'password',
'image'
];
}
Step 3: Connect database
After successfully installing the laravel app and then configuring the database setup. We will open the ".env" file and change the database name, username, and password in the env file to create an image upload and reset with preview in laravel.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Now run php artisan migrate command to update the database.
php artisan migrate
Read also: Laravel 10 Crop Image Before Upload With Cropper Js
Step 4: Create Route
Now update the 'web.php' file like below to create this how do I preview a picture before uploading?
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TutorialController;
Route::get('/', [TutorialController::class,'index'])->name('welcome');
Route::post('/', [TutorialController::class,'store'])->name('store');
Step 5: Create Controller
Now in this step, we have to create a TutorialController to define this method to create laravel upload image with a preview.
php artisan make:controller TutorialController
Now update the controller like the below:
app/Http/Controllers/TutorialController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
class TutorialController extends Controller
{
public function index()
{
return view('welcome');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required|min:6',
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
$fileName = time() . '.' . $request->image->extension();
$request->image->storeAs('public/images', $fileName);
$user = new User;
$user->name = $request->input('name');
$user->email = trim($request->input('email'));
$user->password = bcrypt($request->input('password'));
$user->image = $fileName;
$user->save();
return redirect()->route('user.index')->with([
'message' => 'User added successfully!',
'status' => 'success'
]);
}
}
Step 6: Create Views
We are almost there. Just we have to create four views files before completing laravel 10 multiple image upload with preview.
- app.balde.php
- welcome.blade.php
So create these files inside the following path and update them like below:
resources/views/welcome.blade.php
@extends('layouts.app')
@push('style')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header" style="background: gray; color:#f1f7fa; font-weight:bold;">
Laravel 10 Upload Image With Preview - Laravelia
</div>
@if($errors->any())
{!! implode('', $errors->all('<div>:message</div>')) !!}
@endif
<div class="card-body">
<form class="w-px-500 p-3 p-md-3" action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="name" placeholder="Name" @error('name') is-invalid @enderror>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" name="email" placeholder="Email" @error('email') is-invalid @enderror>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="password" placeholder="Password" @error('password') is-invalid @enderror>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Profile Pic</label>
<div class="col-sm-9">
<input type="file" class="form-control" name="image" @error('image') is-invalid @enderror id="selectImage">
</div>
@error('image')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
<img id="preview" src="#" alt="your image" class="mt-3" style="display:none;"/>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label"></label>
<div class="col-sm-9">
<button type="submit" class="btn btn-success btn-block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script>
selectImage.onchange = evt => {
preview = document.getElementById('preview');
preview.style.display = 'block';
const [file] = selectImage.files
if (file) {
preview.src = URL.createObjectURL(file)
}
}
</script>
@endpush
Now we need to create a master file. So let's create a app.blade.php file and add it to the following path:
resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Tailwindcss -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
@stack('style')
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
Laravelia
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4" style="background: #f1f7fa;">
@yield('content')
</main>
</div>
@stack('script')
</body>
</html>
Read also: Laravel 10 Image Upload And Display Tutorial
Conclusion
I have tried my best to create this laravel 10 image upload with preview tutorial. Now we know image upload and reset with preview in laravel. Hope this how to preview image before upload tutorial will help you to create how do I preview a picture before uploading?
