We can upload images directly to a public folder or we can upload images to the storage folder in Laravel. So there are two options to upload images in laravel. In this tutorial, we will upload images to the public directory. You know that laravel 10 store image in a public folder is a little bit easier than a storage directory
So in this tutorial, you will see save file in public folder laravel 10 application. I will create this store image in public folder laravel 10 tutorial from scratch. So let's see the preview of this tutorial upload image to public folder laravel:
Step 1: Download Fresh Laravel
In this first step, we need a fresh Laravel 10 application for the laravel 10 store image in public folder. So download it by the below command:
composer create-project laravel/laravel example-app
Step 2: Create Model
We are going to use the Image model. Now create an image model and update it 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('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
};
And now update the model like:
app/Models/Image.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}
Step 3: Connect database
After successfully installing the laravel app and then configuring the database setup like below to create this save file in public folder laravel 10:
.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 Multiple Image Upload With Preview And Delete
Step 4: Create Route
Now in this step, we have to create a route to store image in public folder laravel 10.
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 save image to public folder.
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\Image;
use Illuminate\Http\Request;
class TutorialController extends Controller
{
public function index()
{
return view('welcome');
}
public function store(Request $request)
{
$request->validate([
'image' => 'required|image|mimes:jpeg,png,jpg|max:2048',
]);
$path = public_path('images/');
!is_dir($path) &&
mkdir($path, 0777, true);
$imageName = time() . '.' . $request->image->extension();
$request->image->move($path, $imageName);
$image = new Image();
$image->name = $imageName;
$image->save();
return redirect()
->back()
->with('success', 'Image successfully upload.');
}
}
Step 6: Create Views
In this step, we will create a form for upload image to public folder laravel. So update the welcome file like below:
resources/views/welcome.blade.php
@extends('layouts.app')
@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 To Public Folder Preview - Laravelia
</div>
<div class="card-body">
<form class="w-px-500 p-3 p-md-3" action="{{ route('store') }}" method="post" enctype="multipart/form-data">
@csrf
<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 Crop Image Before Upload With Cropper Js
Conclusion
I have tried my best to create this how to upload files in Laravel directly into public folder tutorial. Now we know save file in public folder laravel 10. Hope this store image in public folder laravel 10 tutorial will help you to create upload image to public folder laravel.
