Laravel 11 File Upload in Storage Directory

Uploading file in laravel 11 needs to follow some steps. After that, file should be available inside public directory. This article will give guideline how to upload file inside public directory from laravel 11 framework. Let's get started

  1. Here we will follow some steps. Those are 
  2. Install Laravel 11 Fresh Project
  3. Install and Create Bootstrap 5 Blade
  4. Create Necessary Routes
  5. Create Necessary Controller

Install Laravel 11 Fresh Project

Before starting work we will have to install laravel 11 project. Using below command laravel 11 project will be installed 

composer create-project --prefer-dist laravel/laravel laravel11-fileupload

Create Necessary Routes

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileUploadController;

Route::get('/upload', [FileUploadController::class, 'showForm'])->name('upload.form');
Route::post('/upload', [FileUploadController::class, 'uploadFile'])->name('upload.file');

Create FileUploadController

php artisan make:controller FileUploadController
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileUploadController extends Controller
{
    public function showForm()
    {
        return view('welcome');
    }

    public function uploadFile(Request $request)
    {
        $request->validate([
            'file' => 'required|mimes:jpg,jpeg,png,gif,pdf|max:2048', // Restrict file types & size
        ]);

        if ($request->file('file')) {
            $file = $request->file('file');
            $fileName = time() . '_' . $file->getClientOriginalName();
            $file->move(public_path('uploads/images'), $fileName); // Save to public/uploads

            return back()->with('success', 'File uploaded successfully!')->with('file', $fileName);
        }

        return back()->with('error', 'Please select a file.');
    }
}

Create Blade File Upload.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 File Upload</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex justify-content-center align-items-center vh-100 bg-light">

<div class="card p-4 shadow-sm" style="width: 600px;">
    <h2 class="h5 mb-3 text-center">Upload a File</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
        <p>Uploaded File: <a href="{{ asset('uploads/' . session('file')) }}" target="_blank">{{ session('file') }}</a></p>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <form action="{{ route('upload.file') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <label for="file" class="form-label">Choose a file</label>
            <input class="form-control" type="file" id="file" name="file" required>
            @error('file')
            <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>
        <button type="submit" class="btn btn-primary w-100">Upload</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Read also: Laravel export collection to xlsx file download

Read also: Make sitemap using laravel

laravel file upload storage directory - programmingmindset.com

Run Project and Upload File

php artisan serve

This will serve and start project on http://127.0.0.1:8000; After that visit routes /upload and try to upload image file. As we have added public directory uploads/images, so images will be uploaded inside uploads/images/ directory

laravel file upload storage directory - programmingmindset.com

Read also: Real time notification using reverb laravel 11

Read also: Laravel 11 sanctum api login registration

Read also: Host multiple laravel project on same port in nginx server

Tags: